Cara Mudah Memasang Navigasi Page Number Pada Blog

Navigasi page number adalah sebuah navigasi yang terdapat nomor halaman pada sebuah blog yang biasanya terdapat pada halaman Home dan Label namun tidak untuk halaman search. Dengan adanya navigasi ini sudah tentu akan mempermudah pengunjung untuk melihat artikel yang ada pada blog. Pada navigasi bawaan template biasanya hanya terdapat Postingan Baru, Home dan Postingan Lama sehingga itu akan memakan banyak waktu untuk melihat artikel yang sudah awal-awal, tidak seperti navigasi page number dengan adanya ini pengunjung bisa langsung meloncat apabiola menginginkan melihat artikel yang sudah paling lama dengan langsung ke halaman terakhir ataupun bisa memilih ingin ke halaman berapa.

Memasang page number pada blog sebenarnya mudah Anda hanya perlu memasukan script dan juga dengan css pada template pada edit html. Namun mungkin untuk pemula seperti saya cukup rumit untuk awal-awal karena tidak mengerti apa itu css dan script dan dengan berjalannya waktu Anda juga pasti akan bisa dan jago mengenai html. Karena kita memang harus menguasai html sebagai blogger supaya dapat mengedit tampilan blog yang kita kelola tersebut dan saya juga masih belajar dalam hal itu.

Memasang Navigasi Page Number Pada Blog

Sesuai yang saya sudah jelaskan dalam membuat navigasi ini yang perlu Anda lakukan adalah memasukan script dan juga css untuk style pada page number yang dipasang tersebut dengan cara mengedit html pada template blog.

A. Memasukan Script

1. Pada keadaan login dan pada Dashboard blogger Anda masuk ke "Template" > "Edit HTML".
2. Cari kode script </body> dan apabila sudah ketemu masukan kode script dibawah ini diatas kode </body>.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var perPage=4;
    var numPages=4;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
<script src="https://cdn.rawgit.com/aramdan/share/master/pagenumber.js"/>
</b:if>
</b:if>

Keterangan:
Anda bisa mengedit nomor/kata yang berwarna merah dibawah sesuai keinginan.

• var perPage=4; (Postingan per halaman)
• var numPages=4; (Nomor halaman)
• var firstText ='First';
• var lastText ='Last';
• var prevText ='« Previous';
• var nextText ='Next »';


3. Supaya tidak semua menggunakan url javascript yang berwarna biru diatas, saya sarankan untuk menggunakannya untuk sendiri dan script bisa didapatkan link yang sudah saya sediakan disini dan Anda upload kembali pada situs hosting javascript lainnya atau saya sarankan untuk situs GitHub atau bisa membaca artikel Cara Daftar dan Hosting Javascript / CSS di GitHub (Recommended). Apabila Anda malas juga tidak apa-apa untuk menggunakan yang sudah ada diatas karena javascript diatas memang untuk di share.

Baca juga "Memasang Widget Sosial Media di Blog"

B. Memasukan CSS untuk style

1. Masih pada Edit HTML, kemudian Anda cari kode ]]></b:skin>.
2. Setelah itu masukan CSS dibawah ini diatas kode ]]></b:skin> tersebut.

#CSS Style 1 (BloggARs)

#blog-pager {clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent {font-size: 13px;padding: 5px 12px;margin-right:5px; color: #fff; background-color:#00a3c1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent {background:#ef380e;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent {font-weight:bold;color: #fff;background:#ef380e;}
.showpageOf {display:none!important}
#blog-pager .pages {border:none;}

#CSS Style 2

#blog-pager{clear:both;margin:10px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #666;border:1px solid #CCC;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#808080;text-decoration:none;color: #fff;}
.showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{background:#808080;font-weight:normal;color: #fff;}
#blog-pager .pages{border:none;}

#CSS Style 3

#blog-pager{clear:both;margin:10px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 3px 10px;margin-right:5px; color: #666; background-color:#eee; border: 1px solid #ccc;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#00a3c1;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#00a3c1;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}


3. Pilihlah salah satu CSS sesuai keinginan Anda atau bisa juga mengedit sendiri dengan mengubah kode warna pada css dan lainnya. Hasil CSS Style bisa Anda lihat pada gambar thumb artikel diatas.

Baca juga "Cara Memasang Back To Top pada HTML Blog"

C. Menambahkan Script

1. Tetap pada Edit HTML, Anda cari kode script berikut.

expr:href='data:label.url'

2. Kemudian Anda tambahkan script + &quot;?&amp;max-results=4&quot; pada script tersebut sehingga menjadi seperti ini.

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

Keterangan:
Nomor yang berwarna merah pada script adalah tampilan postingan pada label dan bisa Anda ubah sesuai keinginan. Contoh diatas bernomor 4 yang berarti setiap halaman terdapat 4 postingan dari halaman satu sampai terakhir sisanya.


3. Setelah semuanya duah diterapkan, Anda klik "Simpan template" dan kemudian lihat hasilnya.

Begitulah Cara Memasang Navigasi Page Number Pada Blog, apabila Anda masih tidak mengerti atau ada yang akan dipertanyakan Anda bisa berkomentar dibawah atau bisa menghubungi saya di Kontak. Sekian dulu dari saya dan terima kasih sudah mengunjungi situs ini.