Membuat Tombol Next Prev Di Samping Kiri Kanan Blog

Melanjutkan pembelajaran aku perihal CSS Sprite untuk image di blog, target aku kini tertuju pada tombol next prev di bawah. Alasan utamanya yaitu ingin menyingkirkan penomoran halaman yang sebelumnya aku 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 menyerupai bergerak dikala disorot mouse. Dan kali ini aku 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 sebab aku 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 bekerjsama sederhana saja. Tambahkan isyarat "position:fixed" supaya icon tetap mengambang. Tambahkan juga pengaturan jarak atas, kiri, dan kanannya. 

Biasanya isyarat css untuk pengaturan letak tombol next prev akan tampak menyerupai 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 menyerupai 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 hingga di sini kini tombol next prev blog Anda sudah pindah ke sisi kiri dan kanan blog. Jika Anda ingin modifikasi tombolnya dengan icon, silahkan ikuti langkah-langkahnya menyerupai di bawah ini.

Silahkan ganti isyarat css pengaturan tombol next prev usang (seperti isyarat di atas tadi) dengan isyarat 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/AVvXsEhlNLNwNOgdjZoXlR7g6p1o9GeYHMzDSSnsS-zbdutFghQQzbH3oBOPi5RJcuhfa9I_Lt-FFaEE1US39mnMQjW9ZYneP-8UD0OPTzdBv-EtMQMjaSwy6P83tFpXQ67Yxu5_eUsHfAGd-Qc/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 isyarat yang berwarna biru, itu ialah jarak icon dari tepi atas. Silahkan atur jaraknya supaya sesuai dengan blog Anda. Untuk isyarat yang berwarna merah paling atas ialah untuk menyembunyikan tombol home/beranda sebab aku pikir link homepage (home/beranda) biasanya sudah ada pada hidangan header atau menupage jadi aku hilangkan saja.

Perhatikan goresan pena yang berwarna merah, itu ialah url imagenya yang menampilkan icon next prevnya. Ada beberapa gambar yang aku 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 isyarat 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/AVvXsEgUDXGF0rQeBdK2F7vUIdeeDBB9bxUAweLJ7rQJJc0vN9w53vY5ujUqz8F7OPVKfXFsZx4zvPV5HgDCArvTG2kfkNsqU-78g5jzZEQdnMwUK31Id7LF64hpuu09YRXMTIGorXRPgwcKnawT/s1600/nextprevbiru.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8nNx9uPVU3EuB9trNkKWVVmcqYOFPvuhgLcNEGQDnP23BD91p3vjjfkp6ilXUBshV5xKz7rSgjOBVVOXb9ZFIbwXrM2cKmGrRACqd8bSrHTG1V5J82NqQwLc8jKErZocT3-jKKfJzYE5f/s1600/nextprevhijau.png

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsfwFowhnRgbUr8wdr_4yvs-WDP4_BVjsId9TLV19oziyUG09ZgPPvNA7dndEXBiooezRGH1fYn9eEX6dLQwhrVxQpKkrKRx2NZjOxI4VIoTEXg0t8p44SFu0K-TSaUexsc1g_KudL1AlD/s1600/nextprevhitam.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCKlea3txGtqRPOoGWcEAGw-55u0YuKdBzs5NqNHf7pAvA9GZxMIFyL6vEMkiBy_hV4rfUGYRSu2bd9AnUwzS6bpENDQAuYZn2Ftc-ZeEnQi6hwSULHYjPDGbkkUcNhhYOy_M4U-wHHsg7/s1600/nextprevkuning.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDvfDpQTNk6t53JLgZGqz8k6bg8FN6aNIbnOoqqdQ5zbD5CkJPh3_RxbhtKQuxZofXEPvpv0diPXu_N9cIs57gK2WUujCO8G7v6GibvNOULd7LWK0kToK6eTuMGo36ankrKSQRkzNqHL_f/s1600/nextprevungu.png

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

UPDATE:
Maaf ada kesalahan pada isyarat di atas yang menjadikan error pembacaan html blog. Silahkan rubah kode a.home-link{display:none} dengan kode a.home-link{visibility:hidden}.

Sumber https://www.kompiajaib.com/

Share this post