Cara Membuat Page Number Navigasi

Page Number Navigasi 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 :

Apakah Anda ingin mencobanya? Jika iya, maka berikut ini adalah langkah-langkah Cara Membuat Page Number Navigasi khususnya blogspot.com :

1. Masuk dahulu ke Dashboard blogspot Anda, selanjutnya pilih Rancangan (Layout) dan pilih Edit HTML, seperti biasa contreng option Expand Widget Templates, selanjutnya cari kode berikut: ]]></b:skin>;

2. Setelah ketemu, di atas kode ]]></b:skin> letakkan kode di bawah ini :
   

   .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;
   }




3. Lalu cari lagi kode seperti ini: </body>;

4. Jika sudah ketemu, di atas kode </body> letakkan script di bawah ini:
   

   <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. Selanjutnya carilah kode berikut ini : 'data:label.url';

6. Hapus kode ini : 'data:label.url' dan gantilah dengan kode di bawah ini:
   

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




7. Terakhir Simpan Templates dan lihat hasilnya.

NB : Jika ada diantara Anda yang mempunyai cara lebih baik atau ingin memberikan tambahan atau masukan, mohon disampaikan pada kolom komentar sebagai perbaikan atas tutorial ini, terima kasih.

= = == = => Selamat Mencoba, Semoga Sukses!!! <= = = = = =