Membuat Tombol Page Navigasi Animasi CSS3 Postingan Keren

Membuat Tombol Page Navigasi Animasi CSS3 Postingan Keren - Wah, malam begini ini bingung mau posting apaan, tadi bersyukur muncul sebuah ide untuk membuat postingan yakni Membuat Tombol Page Navigasi Animasi CSS3 Postingan Keren. Mungkin postingan kali ini secara umumnya tidak jauh berbeda dari postingan Mengganti Tulisan Posting Lama, Posting Baru, Dan Beranda Dengan Gambar sendiri, namun tetap saja berbeda dari tutorial blog yang satu ini. Membuat Tombol Page Navigasi Postingannya menjadi terlihat keren dan menarik, siapa yang tak doyan tentu semua doyan. Oke, daripada nulis-nulis terus nggak ke inti-inti, ayo langsung ke intinya saja. Sebagai pengujian yang telah berhasil silahkan lihat demonya dulu, dengan klik disini.

Langkah-langkah singkat Membuat Tombol Page Navigasi Animasi CSS3 Postingan:
>> Login ke account blogger kita sehingga masuk ke dasbor
>> Jika masih menggunakan tampilan lama, klik Rancangan
>> Lalu pilih Edit HTML
>>Kemudaian cari kode ]]></b:skin> dan copykan kode yang dibawah ini nanti diatasnya kode ]]></b:skin>.
Supaya lebih mudah gunakan Ctrl+F untuk mempermudah pencarian...

#blog-pager-newer-link { float: right; padding: 3px; background: rgba(0, 0, 0, 0.6 ); z-index: 1001; color: white; position: fixed; bottom: 0px; right: 0%; font-size: 15px; line-height: 100px; text-align: center; width: 100px; height: 100px; overflow: hidden; margin-left: -25px; -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3); -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3); box-shadow: 0px 1px 2px rgba(0,0,0,0.3); -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; -moz-border-radius-topleft: 15px; -moz-border-radius-bottomright: 15px; -webkit-border-top-left-radius: 15px; -webkit-border-bottom-right-radius: 15px; border-top-left-radius: 15px; border-bottom-right-radius: 15px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; } #blog-pager-newer-link:hover { width: 150px; height: 150px; font-size: 25px; line-height: 150px;} #blog-pager-older-link:hover {width: 150px; height: 150px; font-size: 25px; line-height: 150px;} #blog-pager-older-link { float: left; margin-right: 10px; padding: 3px; background: rgba(0, 0, 0, 0.6 ); z-index: 1001; color: white; position: fixed; bottom: 0px; left: 0px; font-size: 15px; line-height: 100px; text-align: center; width: 100px; height: 100px; overflow: hidden; -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3); -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3); box-shadow: 0px 1px 2px rgba(0,0,0,0.3); -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomleft: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; } #blog-pager { font-family: 'Terminal Dosis Light', Arial, sans-serif; color:#eeeeee; text-shadow: 0px 0px 1px white; text-align: center; text-transform:capitalize; padding:0px 0; clear:both; margin:0px; font-size:15px; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 9; background: rgba(0, 0, 0, 0.8 ); border-top: 1px dotted #AC0; } #blog-pager {border-top: 1px dotted #314584;}

Jika sudah klik simpan...
NB: Jika blog anda sudah memiliki #blog-pager ....bla..bla..., hapus terlebih dahulu dan gantikan dengan kode -kode CSS tadi.

Mungkin segitu dulu tutorial Membuat Tombol Page Navigasi Animasi CSS3 Postingan Keren ini. Semoga apa yang admin tulis ini dapat bermanfaat dan bisa membantu. Thanks for ur' visiting, guys...