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 blog saya ini.


Langsung saja kita memulainya, jangan lupa Ucapkan Basmallah.


1. Log in ke Blogger
2. Selanjutnya Design (Rancangan) pilih Edit HTML, (download full template supaya ada back up jika ada kesalahan) dan centang option Expand Widget Templates. 
3. Selanjutnya cari kode berikut ]]></b:skin>
Setelah ketemu kode diatas letakkan code dibawah ini 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;
}



4. Kemudian cari kode seperti ini </body>
Setelah ketemu kode diatas, letakkan code dibawah ini tepat diatas 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>



5. Terakhir carilah kode berikut ini : 'data:label.url'
Setelah ketemu hapus kode diatas dan ganti dengan kode dibawah ini.

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


Terakhir Simpan Templates dan lihat hasilnya.
Selamat Mencoba
sumber