Membuat Tombol Next Prev Di Samping Kiri Kanan Blog

Melanjutkan pembelajaran saya tentang CSS Sprite untuk image di blog, sasaran saya kini tertuju pada tombol next prev di bawah. Alasan utamanya yaitu ingin menyingkirkan penomoran halaman yang sebelumnya saya pakai di homepage. Loading blog jadi tersendat oleh hostingan javascriptnya.

Sekalian memodifikasi next prev yang telah ada (blogger) dengan image yang ditambahkan efek hover transisi sehingga image seperti bergerak ketika disorot mouse. Dan kali ini saya pindahkan tombol next prev-nya dari bawah ke kiri dan kanan blog. Ditambahkan juga efek sticky sehingga tombolnya akan selalu nampak biar pun halaman digulang ke atas atau ke bawah.

Enggak usah dibuatkan demonya karena saya sudah menerapkannya di Kompi Ajaib ini. Silahkan lihat di kiri dan kanan blog, ada icon next prev dan silahkan sorotkan mouse Anda ke atasnya. Icon akan bergerak ke kiri dan kanan blog.

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/AVvXsEg-csFL-KFD8kvy4g5e1sXdNxLe4wkNSNuwVl5xLkrPr0mC1wouznKvFbAo5fxWtLaByDjFkP9ddInBxj_JF_m3etd-21z5MlidRg2Q81LOyABcasx2YJXm8-FHyknYsdkUOwD7kp2YBiE/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/AVvXsEiKCbJqK3s_pNk1htP3wWX-WdA1q4D9aCt-_klL0iB4rGdyIplEAGJtMMG4hDcoyM_pAPR2IQwd7S65DRUZzeeWfRdg1ktTpt95tRSMiaELzu4pK36WvN11o63KRcBYy7DbuA9s7bL7LELD/s1600/nextprevbiru.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlWvee2cYa_ptiodkE8JnqSQZFiv8nIeRu-NJ6XFkox6cQQtW1S4van9ummGhbtRViQ2IDtTL7AQoF6YX2XA2vULNkq546ODwiHc82oLKnk_9XMSpekS5Wr7KgBgPxqdZQF_63WlDH_3EZ/s1600/nextprevhijau.png

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlrtCynI0PANS4FSP_fy8thi2WCNYw_e_wfG27_56Of7SB6WGY2_6UIMYtt-Z9pqYaEkUVyz9wP637P8XwvALGxrWaPK9s9Sh3ukKpSACtGjCQNPcIWhQcpV_IUKm9wgMSEAJwIwe_-Moj/s1600/nextprevhitam.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2pbkqhsw89eKa8n6Nz0FX6LTbxW2NZLqV9nTA7DQ7v8qRgNrBnJkO_riJ0ZqgVjjN-81ocgHpx6tN3e3yby8NhCxV1l-6jg1F9AD8kpWKjMl2fp-W0Ndo7IflzRq0pSMms5E2O7-ttRrL/s1600/nextprevkuning.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFJX0De7JxS4A0OVUcyBazP-fZtTYk_f3zTw0a-HbRiTzlx7PFBcYrpI3_b7IiFbqaZpBmKt6LPHLLIiSYqdnNAMrGIvNNt4kNjx_D8y70abJOa4zC9UJn2a8QUQ4q1fG19-ZaKBUIUvQz/s1600/nextprevungu.png

Demikian saja cara membuat tombol next prev di samping kiri dan kanan blog. Semoga dapat dimengerti dan bermanfaat.