Membuat tombol melayang prev dan next posting di blog

Posted by : AdiMPS Monday, 8 July 2013

nih aku agak bingung PREV ma NEXT blog ku hilang karena aku edit CSSnya, karena galau aku nemuin ini deh tombol baru :

cari ja kode home-link atau kalo gak ketemu cari kode page kayak gini :
#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right}#blog-pager{text-align:center}

lalu copas diatasnya kode dibawah ini atau langsung ja timpa dengan kode dibawah ini:

a.home-link{visibility:hidden}
#blog-pager-older-link a, #blog-pager-newer-link a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifApzac2ozbQkKj4pFaCk4MPP7LUq9NnZLxyVKVNUyCjeSadrF1CrljRMkFMwhfk6RqHq_Ps9cbFQpD0vQ4iGVMEcXpicQSW4xt9sE8wj5ExADCH9gmZkpNXc4rzUgYW9dPOIJWU_z7zU/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/AVvXsEj165imCYusWT8SOMrjaeKj7WHENjkDS4h9Ohxchiz8_Ij_iId84jxSm_0M3YfPdXnkOIHB0kQOJkB_Abdi4mow5Lav1Az7kGavZedyfHCAzfoXIu4GJ6MraVUaH-5fQjyti3wkxicmX_7-/s1600/nextprevbiru.pngCopy Text Click Here

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG7vPQvzwaQ25v7StRacf4gOB4a5uY9pul_HTG1tqSuMAQkVGUOAlwPSZ1ERGmfN4d0-4GlHxSlOsA4V7TiQ8tzbbaXulIcs1zF8caXXN0ZYgIH40FfNxhZDHJrCEUwmOyH0Uh8wZPig5A/s1600/nextprevhijau.pngCopy Text Click Here

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXFqbwKrJqn-D6Im96no6TCUn23ZPZ5Hu3ohFfj71W-PGD6IRIwWow9gNhVvyIwOh3HdjiB8VIjMfWLc46P7Jmy3ob94xVHXa0iegGmmwM2WhizsTeUFGQQaliRBv3JjiQPcQe6m2UUzkk/s1600/nextprevhitam.pngCopy Text Click Here

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiTlRCVnGclv-T2oilA0j2nf82e2inPeIwNN0VmW10HsBDDfuRFIzA2Ft_cIiyHt1BYROuQJV0oTTI215u5zZeNge067-RUqxHFBZuz2VpJTckKpvteMGQKnGvTMuIjhy2FrcYSxnKNfae/s1600/nextprevkuning.pngCopy Text Click Here

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgjo_GTDcBXSL29PbgCrPUkI-DediKTGFM1dcb8pelaP-KnCedwqlUAwiXJhVw2H5QdEGLEHFRpLW275CmnYG7h2iskLL1q8uxe3RdZFCicdjtbHr2zDa9MHNd0lPHgUfws7-u0CEc81wn/s1600/nextprevungu.png

BERES.

Tapi nih kode tombol dan gambarnya kayaknya rada salah.. tapi aku berhasil nemuin solusi buat kembaliin tombol lama ku yang hilang. ha" SIP dah.