Membuat Tombol Next Prev Di Samping Kanan Kiri Blog

Ketemu lagi dengan saya disini dan Alhamdulillah saya masih diberi kesempatan oleh Allah SWT untuk membagikan artikel kepada anda semua. Artikel pembuka hari ini yaitu artikelMembuat Tombol Next Prev Di Samping Kanan Kiri Blog , Cara ini sendiri saya terapkan di blog saya ini , kalau anda ingin melihat silahkan lihat pada kanan kiri blog ini , pastinya ada Tombol Next Prev Di Samping Kanan Kiri Blog ini. Tutorial ini sendiri di buat oleh blog www.kompiajaib.com yang telah memodifikasi Membuat Tombol Next Prev Di Samping Kanan Kiri Blog ini.

Sebelumnya saya juga pernah membagikan suatu tips kepada anda semua yaitu artikel yang berjudul Membuat Blockquote dengan Fungsi Popup Copy Plain yang berguna untuk memudahkan pengunjung dalam mencopy kode di blockquote kita.

Untuk menerapkan trik memindahkan tombol next prev dari bawah ke sisi kiri dan kanan blog ini seperti kata kompiajaib :  sebenarnya sederhana saja. Anda hanya perlu tambahkan kode "position:fixed" agar icon tetap mengambang. Tambahkan juga pengaturan jarak atas, kiri, dan kanannya.

Untuk Membuat Tombol Next Prev Di Samping Kanan Kiri Blog anda perlu melakukan langkah-langkahnya berikut in :

1. Loggin Ke blogger Anda
2. Klik Template > Edit HTML
3. Cari kode dibawah ini :

#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right}
#blog-pager{text-align:center}

4. Gantilah kode diatas dengan kode berikut 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} 

5. Silahkan anda ganti kode css pengaturan tombol next prev lama (seperti kode di atas tadi) dengan kode di bawah ini:

a.home-link{visibility:hidden}#blog-pager-older-link a, #blog-pager-newer-link a {background:url(http://2.bp.blogspot.com/-cJuvrllFnjM/UbFp8muCOyI/AAAAAAAAYxM/3Bl8krsFx6I/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}

Kode berwarna biru  itu adalah jarak icon dari tepi atas ,Silahkan atur jaraknya agar sesuai dengan blog Anda.

Anda juga bisa mengganti gambar Next Prev Di Samping Kanan Kiri Blog anda , dan anda bisa memilih jenis tombolnya dibawah ini :

http://i1287.photobucket.com/albums/a622/Planet_Ajaib/nextprevhijau_zps0a34c059.png

http://i1287.photobucket.com/albums/a622/Planet_Ajaib/nextprevhitam_zpsc058a99e.png

http://i1287.photobucket.com/albums/a622/Planet_Ajaib/nextprevkuning_zps3ac71ab2.png

http://i1287.photobucket.com/albums/a622/Planet_Ajaib/nextprevungu_zps39532b73.png

http://i1287.photobucket.com/albums/a622/Planet_Ajaib/nextprevbiru_zpsa96b9cbf.png

Anda bisa memilih warna kesukaan anda , juga bisa memilih sesuai warna template blog anda.

Demikianlah artikel saya hari ini tentang Membuat Tombol Next Prev Di Samping Kanan Kiri Blog semoga artikel ini bisa bermanfaat dan berguna bagi anda semua, dan bila ada tutur kata atau pengucapan saya yang kurang baik saya mohon maaf sebesar-besarnya , Wassalamuaikum.