Cara Membuat Page Number-Navigasi Halaman

Page Number atau Navigasi Halaman dengan menggunakan nomor atau angka adalah sebagai alat navigasi yang berfungsi selain dapat mempercantik tampilan halaman utama juga dapat memudahkan pengunjung dalam menjelajahi content sebuah website atau blog. Lihat contohnya pada halaman utama blog saya ini, kira-kira tampilan seperti pada gambar di bawah :

Contoh Website yg menggunakan Page number-Navigasi

Nah, jika sobat t'Net berminat, silahkan ikuti langkah-langkah berikut.

1. Login Dengan akun anda

2. Pilih Rancangan

3. Kemudian Edit HTML

4. Cari kode berikut ini ]]></b:skin>

5. Pastekan kode berikut tepat diatas 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. Lalu cari kode seperti ini </body>

7. Jika sudah ketemu, letakkan kode berikut ini di atas kode </body>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>

8. Selanjutnya, cari kode seperti ini 'data:label.url'

9. Jika sudah ketemu, hapus kode terbut dan ganti dengan kode berikut ini

'data:label.url + &quot;?&amp;max-results=5&quot;'

10. Simpan Template, dan lihat hasilnya

Semoga bermanfaat.

Dari Berbagai Sumber.