Cara Membuat Navigasi Halaman Dengan Gaya Google - Navigasi Halaman/Page Navigation biasanya ditampilkan dengan keterangan "Posting Lebih Baru" untuk berpindah halaman pada artikel yang terbaru, dan "Posting Lama" untuk berpindah halaman pada artikel yang lebih lama. Beberapa blogger kemudian menggantinya dengan gambar panah atau gambar lainnya yang mewakili navigasi halaman per artikel. Namun kali ini kita akan menggantinya dengan gaya yang berbeda yaitu seperti gaya dari navigasi halaman "Google". Tutor ini saya dapat dari blog www.abu-farhan.com.
Untuk melihat demonya silahkan klik disini.

Berikut Cara Membuat Navigasi Halaman Dengan Gaya Google.
1. Buka dashboard blog > template > Edit html > Centang Expand widget template.
2. Selanjutnya cari kode ]]></b:skin>. Dan tambahkan kode berikut tepat diatasnya.

#blog-pager,.blog-pager{ background-color: #FFFFFF;width:100%,text-align:center;}
td.showpageOf{display:none;}
#nav{font-family: Arial, Helvetica, sans-serif; font-size:12px;margin:0 auto;}
#nav a{display:block; text-decoration:none; color: #0066FF}
#nav a:hover{ text-decoration:underline;}
#nav .b a,#nav .b a:visited{color: #0000CC; text-decoration: underline; font-weight:bold}
.cur{ font-weight:bold;}
.csb{background:url(http://www.google.com/images/nav_logo7.png) no-repeat 0 0;height:26px;display:block;}
.csb.cur{background-position: -44px 0pt; width: 16px;}
.csb.movenext{color:#20c;background-position: -76px 0pt; margin-right: 42px; width: 66px;}
.csb.moveprev{color:#20c;background-position: 0pt 0pt; margin-left: 42px; width: 44px;}
.csb.ch{background-position: -60px 0pt; width: 16px;}
#nav td{padding:0;text-align:center}

3. Cari kode </body> dan tambahkan kode script ini tepat diatasnya.

<script type='text/javascript'>;
var home_page='/';
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>;
<script src='http://accordion-template.googlecode.com/svn/trunk/jsnavigoogle-packer.js' type='text/javascript'></script>

Ket !!! Untuk text yang berwarna biru ganti dengan sesuai keinginkan anda.
postperpage     : Berapa banyak postingan di setiap halaman untuk blog anda.
numshowpage : Berapa banyak nomor yang akan muncul di navigasi halaman.
4. Klik pratinjau terlebih dahulu dan jika tidak terjadi error maka klik save.

Sekian dari postingan saya kali ini semoga dapat membantu anda & terimah kasih kepada www.abu-farhan.com.