Cara Membuat Navigasi Nomor pada Halaman Blogger

• Login ke Dashboard Blogger Anda
• Klik Template – Edit HTML
• Sekarang cari kode dibawah ini :

]]></b:skin>

• Kemudian tambahkan kode dibawah ini tepat diatasnya :

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

• Script diatas bisa Anda gunakan untuk mengedit dari style Navigasi. Selanjutnya cari tag :

</body>

• Kemudian tambahkan script dibawah ini tepat diatasnya :

<script type='text/javascript'>

var pageCount=5;

var displayPageNum=5;

var upPageWord =&#39;Prev&#39;;

var downPageWord =&#39;Next&#39;;

</script>

<script src='https://dl.dropboxusercontent.com/s/xem1puohuldjpms/blogger_pagenavi_min.js' type='text/javascript'/>

• Langkah terakhir klik – Simpan template

Untuk menggunakan Navigasi style ke-2 caranya sama seperti diatas, cukup Anda menggantikan css style dan javascript diatas dengan script berikut :

Css Style Navigasi ke-2 :

.showpageNum a, .showpage a {  text-decoration: none;  margin: 0 0 0 1px;  padding: 7px 11px;  background: #333;  color: #fff;  }

.showpageOf {  display:none;  }

.showpageNum a:hover, .showpage a:hover {  background: #41B7D8;  color: #fff;  text-decoration: none;  }

.showpagePoint {  color:#fff;  padding: 7px 11px;  background: #41B7D8;  text-decoration: none;  }

Javascript Navigasi ke-2 :

<!--Navigasi Nomor Starts-->

<script type='text/javascript'>

    var postperpage=5;

    var numshowpage=2;

    var upPageWord = &#39;Prev&#39;;

    var downPageWord = &#39;Next&#39;;

    var urlactivepage=location.href;

    var home_page=&quot;/&quot;;

</script>

<script src='https://dl.dropboxusercontent.com/s/gzu15cdm6njxqba/btnt-pagenav.js' type='text/javascript'/>

<!--Page Navigation Ends -->

Keterangan :

Kode ini menentukan jumlah posting yang akan ditampilkan per halaman.

var pageCount=5;

dan

var postperpage=5;

Kode ini menentukan jumlah nomor navigasi halaman tambahan yang akan ditampilkan pada halaman.

var displayPageNum=5;

dan

var numshowpage=2;

Kedua baris menentukan teks yang akan ditampilkan untuk halaman sebelumnya dan halaman berikutnya.

var upPageWord =&#39;Prev

var donwPageword =&#39;Next

Finaly, dengan menyelesaikan langkah diatas Anda telah berhasil menambahkan Navigasi Nomor pada halaman Blogger. Dan bila Anda menemukan kesulitan dengan tutorial diatas jangan malu untuk meninggalkan komentar Anda. Akhir kata semoga artikel ini bermanfaat buat Anda dan salam satu-delapan !