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 !
Load disqus comments

0 komentar