Cara Membuat Navigasi Blogger Nomor Halaman

Navigasi nomor halaman yang dimaksud adalah nomor halaman yang ada di homepage blog kita. Biasanya pada homepage hanya berisi tulisan 'posting lama' - 'posting baru' dan 'home'. Jadi, disini kita akan memodifikasi sedikit. Lihat contohnya pada blog Template Blogger, nah kalau yang ini beda lagi desainnya hehe

Navigasi nomer halaman blogger ini intinya sebagai pengganti dari blog pager. Tentunya navigasi halaman bernomer ini terlihat lebih elegant dan profesional dengan menampilkan juga total page yang ada.

Beberapa fungsi memasang navigasi nomor halaman pada homepage adalah :

• Mempermudah pengunjung untuk melihat artikel-artikel kita yang sebelumnya
• Mempercantik tampilan

Oke deh….yuk ikutin langkah-langkahnya berikut ini

• Login ke blog anda kemudian menuju halaman Design dan Edit HTML, jangan lupa di back up dulu templatenya untuk keamanan soalnya akhir akhir ini sering error blogger.
• Cari kode ]]></b:skin> lalu paste script Css di bawah 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;
}

Langkah selanjutnya anda cari kode </body> , kalau sudah ketemu paste kode berikut ini tepat di atas kode </body>

<!--Page Navigasi-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=6;
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>
</b:if>
<!--Page Navigasi -->

Untuk melihat hasilnya, klik dulu PRATINJAU, jika dianggap sudah oke, silahkan klik SIMPAN TEMPLATE dan lihat hasilnya.

Keterangan :

Anda bebas mengubah tulisan yang saya kasih warna biru, angka 6 adalah jumlah posting yang tampil tiap halaman sedangkan yang 5 adalah tombol navigasi yang tampil. Next adalah text untuk ke halaman selanjutnya, sebalikanya previous untuk kembali kehalaman sebelumnya.

Tambahan :

Untuk menyesuaikan Tampilan pada label, silahkan cari kode
'data:label.url' dan ganti dengan kode 'data:label.url + "?&max-results=5"'