Membuat Numbered Page Navigation pada Blog

Membuat Numbered Page Navigation pada Blog - Halo Sobat BMN, Sebelum kita masuk ke dalam tutorial cara membuat Numbered Page Navigation, mari kita pahami dulu apa yang dimaksud dengan Numbered Page Navigation. Numbered Page Navigation adalah suatu Navigasi halaman yang ditandai dengan penomeran halaman dari postingan yang paling baru ke postingan yang lebih lawas. Agar tidak membingungkan mari kita lihat gambar dibawah ini :

Nah sobat BMN, pada postingan kali ini, saya akan sharing ke sobat semuanya bagaimana cara Membuat Numbered Page Navigation tersebut

Ok, kita langsung saja ke langkah langkahnya :

1. Silakan sobat login ke akun blog sobat.

2. Klik pada menu rancangan > edit HTML

3. Kemudian cari kode

    ]]></b:skin> 

    (untuk mempermudah gunakan ctrl+F untuk mencarinya)
    Silakan sobat copy kode dibawah ini dan letakkan SEBELUM kode di atas

.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. Setelah itu cari kode

   </body>

5. Letakkan kode dibawah ini SEBELUM kode diatas

<!--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://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->

6. Silakan Sobat simpan dan lihat hasilnya

Jika sobat ingin mengubah jumlah postingan yang tampil pada tiap halaman silakan sobat ubah angka 5 menjadi angka berapa saja yang sobat inginkan pada kode berikut :

var pageCount=5;

Atau jika sobat ingin mengubah jumlah nomor navigasi halaman tambahan yang akan ditampilkan pada halaman, silakan ubah angka pada kode berikut :

var displayPageNum = 5;

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

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

Silakan sobat berkreasi dengan tutorial yang satu ini.

Baiklah sobat BMN semua, saya cukupkan postingan saya mengenai cara Membuat Numbered Page Navigation kali ini, Semoga Bermanfaat