Cara membuat Page Number di Blog

Halo sobat-sobat semua, kali ini saya akan membahas bagaimana Cara membuat Page Number di Blog  pada template Blogspot, umumnya template blogspot menggunakan navigasi Previous dan Next/Posting lebih baru dan Posting Lama yang ada pada bagian bawah postinagn blog, yang fungsinya yaitu membantu pembaca/pengunjung blog kita untuk menganti halaman menuju tulisan sebelum atau setelah dari tulisan yang sedang dibaca tanpa ada keterangan nomor halaman. Contohnya dapat langsung dilihat di blog saya ini (pada halaman awal diujung bawah post), agar sobat-sobat blogger tidak bingung saya juga telah memberikan contoh gambar dibawah ini :

Page Number

Nah, kurang lebih seperti itulah tampilan dari page number yang akan kita buat untuk kali ini, berikut adalah langkah-langkah membuat navigasi nomor halaman.
Berikut adalah langkah-langkahnya :

1. Login ke blogger sobat
2. Klik Tata Letak dan pilih Edit HTML
3. Kalau sudah, beritanda centang Expand Template Widget
4. Lalu cari kode berikut (Ctrl + F)  "]]></b:skin>" (tanpa tanda petik)
5. Kemudian masukan kode script dibawah ini tepat di atas kode: ]]></b:skin>
.showpageArea a { text-decoration:underline; } .showpageNum a { text-decoration:none; border: 1px solid #cccccc; margin:0 3px; padding:3px; } .showpageNum a:hover { border: 1px solid #cccccc; background-color:#cccccc; } .showpagePoint { color:#333; text-decoration:none; border: 1px solid #cccccc; background: #cccccc; margin:0 3px; padding:3px; } .showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; } .showpage a { text-decoration:none; border: 1px solid #cccccc; padding:3px; } .showpage a:hover { text-decoration:none; } .showpageNum a:link,.showpage a:link { text-decoration:none; color:#333333; }
6. Selanjutnya kita cari lagi kode berikut: </body>
7. Kemudian masukan kode script berikut tepat di atas kode: </body>
<b:if cond='data:blog.pageType != "item"'> <script type='text/javascript'> var pageCount=5; var displayPageNum=5; var upPageWord ='Previous'; var downPageWord ='Next'; </script> <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/> </b:if>
8. Terakhir kita cari kode script berikut: 'data:label.url'
9. Gantilah kode script diatas dengan kode disamping ini : 'data:label.url + &quot;?&amp;max-results=5&quot;'
10. Simpan Template dan lihat hasilnya