Membuat Page Navigation Pada Blog

Pada postingan kali ini saya akan menjelaskan bagaimana cara membuat Page Navigation. Page Navigation adalah suatu navigasi halaman yang ditandai dengan penomeran halaman dari postingan yang paling baru ke postingan yang lebih lawas. Supaya tidak bingung, coba perhatikan gambar dibawah ini, yang saya beri garis warna merah.

Langkah langkahnya sebagai berikut :

1. Silakan sobat login ke akun blog sobat.

2. Klik pada menu rancangan > edit HTML

3. Kemudian cari kode

]]></b:skin>

4. Copy kode dibawah ini dan letakkan SEBELUM 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;
}

5. Setelah itu cari kode </body>
6. Letakkan kode dibawah ini SEBELUM kode </body>

<!--Page Navigation Starts-->
<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=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://aguskristianto.googlecode.com/files/aguskristianto-page-navigation.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends --> 

7. Simpan dan lihat hasilnya.

Jika teman- teman ingin merubah jumlah postingan yang tampil pada setiap halaman silahkan ubah angka 5 menjadi angka berapa saja yang teman- teman inginkan pada kode berikut :

var displayPageNum = 5;

Sedangkan pada kode dibawah ini teman - teman bisa memodifikasi kata NEXT dan PREVIOUS menjadi SEBELUMNYA atau BERIKUTNYA ataupun dengan kata-kata yang sobat inginkan.

var upPageWord = 'Sebelumnya';
var downPageWord = 'Berikutnya';

 
Terima Kasih,
Semoga Bermanfaat,