Membuat Tombol Next Prev Di Samping Kiri Kanan Blog

Melanjutkan pembelajaran aku ihwal CSS Sprite untuk image di blog, sasaran 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 ibarat bergerak saat 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 alasannya yaitu 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 bergotong-royong sederhana saja. Tambahkan instruksi "position:fixed" biar icon tetap mengambang. Tambahkan juga pengaturan jarak atas, kiri, dan kanannya. 

Biasanya instruksi css untuk pengaturan letak tombol next prev akan tampak ibarat 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 ibarat 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 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 ibarat di bawah ini.

Silahkan ganti instruksi css pengaturan tombol next prev lama (seperti instruksi di atas tadi) dengan instruksi 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/AVvXsEhoszIcgWG6sjrVm0lfCJWDhdcdW-AzchB-XlnzCd3BkTPRmfkzpy5Nk2MeWP6AjyfiYZROyrkTAKcCCYWPxQ0o4-tnV1mmCc9HTnUaoDHCoZku4jucr8azr4PbuV9qZ-UWIYj0c5UX7RA/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 instruksi yang berwarna biru, itu yaitu jarak icon dari tepi atas. Silahkan atur jaraknya biar sesuai dengan blog Anda. Untuk instruksi yang berwarna merah paling atas yaitu untuk menyembunyikan tombol home/beranda alasannya yaitu aku pikir link homepage (home/beranda) biasanya sudah ada pada menu header atau menupage jadi aku hilangkan saja.

Perhatikan goresan pena yang berwarna merah, itu yaitu 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 instruksi 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/AVvXsEg_I3fgKXZRcCJBe3jvMbK0OSPTvRcvkNS2xB03GdRhdiU4g_aTaoOxDlG8245U5gIiGuxL94EedtuOfFeJxl8mSEorZtYhH8Z7ESPnH1Jx0HH1xMA84jQIpTmn9IO8Q9dpyHZDLm3w8Bv4/s1600/nextprevbiru.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimmcPCh4bSUC29Pi2C0lEvgvy8FN0_zqSTcM_nfdMHD5b0l1veDQSq39CYJg4QrAizP2hyphenhyphenIcRsGqy0Ug8hYFJW7H1YTKat_MmBimq1L5am3hJAw07BnjxOAb5cXFgpvTuL41ih5qvx7v7P/s1600/nextprevhijau.png

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqtDGKz-DhZTvQwkpFZp3LvitWRgsz1f9YR4JOtkBnYVqBgL2PE4wQLfquiEJCJIe0AzTOMno4TzKAHS86g-w-ACX_y4UjWnWLBZw0sKGQ-MkMNNCl5OfDa2pTk5cLjQr7Y6uZby0HMrhA/s1600/nextprevhitam.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5efnAZ9EQyc_4CIGINSbdwySAN3QEiZWDjKu5ZZZyGpBHt4JmSpbgDEHv2vkHA7cvxtjxJHenjHUIyekHlRL0XjvrtAdl3zL2mWupmgPe1L0XnsLvXOJLLKKE2oyWPX-OAF0YJ1RUU1tE/s1600/nextprevkuning.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgea16CBpR6GZApqil-RHLjJJKsGQ2g-q7CystsK-A5kCeiGUNcvsYVOd2HSsywwGSKpC3aF8JY3U_duVdIx0EkkFZHEM8V4aVc16rFyqO_9adyyg3FpgmfhurSSQj0pMKwkbSU6-n7Sr6f/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 instruksi di atas yang menimbulkan error pembacaan html blog. Silahkan rubah kode a.home-link{display:none} dengan kode a.home-link{visibility:hidden}.