Untuk menerapkan trik memindahkan tombol next prev dari bawah ke sisi
kiri dan kanan blog sebenarnya sederhana saja. Tambahkan kode "position:fixed" agar icon tetap mengambang. Tambahkan juga pengaturan jarak atas, kiri, dan kanannya.
Biasanya kode css untuk pengaturan letak tombol next prev akan tampak seperti di bawah ini:
#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right}
#blog-pager{text-align:center}
Agar tombolnya pindah ke kiri dan kanan blog, rubah kodenya menjadi seperti di bawah ini:
#blog-pager-newer-link{float:left;position:fixed;left:10px;top:500px}
#blog-pager-older-link{float:right;position:fixed;right:10px;top:500px}
#blog-pager{text-align:center}
Nah sampai di sini sekarang tombol next prev blog Anda sudah pindah ke
sisi kiri dan kanan blog. Jika Anda ingin modifikasi tombolnya dengan
icon, silahkan ikuti langkah-langkahnya seperti di bawah ini.
Silahkan ganti kode css pengaturan tombol next prev lama (seperti kode di atas tadi) dengan kode di bawah ini:
a.home-link{display:none}
#blog-pager-older-link a, #blog-pager-newer-link a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAT9Tyr0YV7k_6pGdU9Dr4op0YPJmLFUk_QoxpzAXMg7bCwAxQtH4eqk_yTloAjSh1__lbO_B5tJ1dJydYMUi-Lc9fsz462bWY5YP8uD_Utns4D_rXAQ_fXT-PNE-mQtgunSQJsaxc0A/s1600/nextprev.png) no-repeat transparent;text-indent:-99999em!important;}
#blog-pager-older-link a{float:right;position:fixed;right:10px;top:500px;display:block;width:35px;height:35px;background-position:-29px 0;transition:all 400ms ease-in-out}
#blog-pager-older-link a:hover{background-position:10px 0}
#blog-pager-newer-link a{float:left;position:fixed;left:10px;top:500px;display:block;width:35px;height:35px;background-position:0 -47px;transition:all 400ms ease-in-out}
#blog-pager-newer-link a:hover{background-position:-35px -47px}
Perhatikan kode yang berwarna biru, itu adalah jarak icon dari tepi
atas. Silahkan atur jaraknya agar sesuai dengan blog Anda. Untuk kode
yang berwarna merah paling atas adalah untuk menyembunyikan tombol
home/beranda karena saya pikir link homepage (home/beranda) biasanya
sudah ada pada menu header atau menupage jadi saya hilangkan saja.
Perhatikan tulisan yang berwarna merah, itu adalah url imagenya yang
menampilkan icon next prevnya. Ada beberapa gambar yang saya sediakan
dalam beberapa warna di bawah ini. Silahkan pilih yang sesuai dengan
tema blog Anda dan ganti tulisan/kode yang berwarna merah di atas dengan
url image yang Anda pilih (untuk image yang ada di kode di atas iconnya
berwarna merah).
Silahkan pilih gambar-gambar di bawah ini yang sesuai dengan selera dan tema blog anda kemudian copy url imagenya
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMepzYCR5A3kh63k3GVSwfsaMV2P6QvODDYb4Mt60w9z5r4BDhRVpRkWhgp6F0Zp8153RugIzJF5FPuoq9QvbN_qlfcn3Q-FIUKtOu_57e6QtzxPB8oiBjpaIxbV5D4ZXGvVK_I7CHgE2M/s1600/nextprevbiru.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnMSz0cTYxylfsCIp5pmyjyzWnKn5SXOy23MOkiKdPDUId6WS252LPBCAFQR2peBkuroCjJ1ltdL3h20UzHKgCwzY8XB1tp0yUBGoHfQx7rh8E2aWJk64W7oMUQznn8ZEn7iyuIQR6B5C0/s1600/nextprevhijau.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPDYzNEI0CMVeF73qHOI0zwg6cgNeUTLqI6iiPg7E1cwl-d8SFaSmxIn8FuDjBx5_AKCKK2QUSVkmIKdH7_EBaX8Jlxepdx4ddgA7W5ZinwcN6VbFjEpGRWiIE9qQB72KrxEkuHFw14NRn/s1600/nextprevhitam.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQoZkFaV21EMpS7VFtY1nORg_d6lYTbwhBL03b0uQFsmFckS5Oyoz7Y0kOJ9zyMO8UHISw5i7PZ2t3ImZc84SacJ2hgL4HZ0HngS5y4LT1GEhvim8QeeMkePkuOseAfp4iRUfIElG2hax9/s1600/nextprevkuning.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRiPiwsGaPfSgwFI3yh_nl-VILs0iy0YHQyNnZ_3LvsUyKcw1-p9JrHjd943sTu29kjbGSJovYlp5s199yIOg9wuw3xWiYQp5jEd25EyVf0xwNByv0upJUsUCUzB5Q8sBB6Q3dT9wZbLEb/s1600/nextprevungu.png
Demikian saja cara membuat tombol next prev di samping kiri dan kanan blog. Semoga dapat dimengerti dan bermanfaat.
UPDATE:
Maaf ada kesalahan pada kode di atas yang menyebabkan error pembacaan html blog. Silahkan rubah kode a.home-link{display:none} dengan kode a.home-link{visibility:hidden}.
