2 Style Navigasi Nomor Halaman Blogger

Halaman Navigasi adalah fitur yang akan memberikan kenyamanan bagi pengunjung blog Anda untuk menjalahi index posting dari blog Anda. Untuk template bawaan dari blogger memang sudah ada tombol Navigasi halaman tapi itu bukanlah yang terbaik. Nah, pada kesempatan ini kita akan mempelajari tutorial tentang membuat Navigasi Nomor Halaman Blogger yang tentunya sudah sering Anda lihat pada blog lain.

Artikel Terkait :

• Menampilkan Hanya Title Posting di Halaman Blogger
• Membuat Sitemap HTML di Blogger
• Membuat Halaman Statis Blogger dan Lebih Dari 20 Halaman

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 ='Prev

var donwPageword ='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 !