Tapike.com

Cara Membuat Navigasi Page Number Di Blog

Navigasi Page Number Di Blog
Cara Membuat Navigasi Page Number Di Blog - Pada postingan kali ini kita akan membuat navigasi page number atau cara membuat navigasi halaman dengan nomor. Blogger sebenarnya sudah memiliki navigasi untuk menampilkan postingan baru dan postingan lama. Tapi sayangnya secara default blogger tidak dapat menampilkan jumlah halaman dengan menggunakan nomor. Dengan membuat navigasi page number di blog, pengguna blog akan lebih cepat untuk melihat postigan lama dari blog. Kegunaan dari navigasi page number adalah untuk menampilkan jumlah halaman dan tombol link dengan angka, dimana setiap halaman memiliki jumlah postingan yg bisa diatur sedemikian rupa. Bagi yg ingin membuat navigasi page number di blog, simak langkah-langkah berikut. Baca juga Cara Membuat Menu Responsive Tanpa Javascript

CSS Navigasi Page Number

  • Login ke blogger > Template > Edit html
  • Cari kode ]]></b:skin>
  • Kemudian pastekan salah satu css navigasi page number tepat diatas kode tersebut

CSS Navigasi Page Number Style 1

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}.blog-pager {background: none;}.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}.showpageOf{display:none!important}#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}#blog-pager .pages{border:none;}

CSS Navigasi Page Number Style 2

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;} .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}.showpageOf{display:none!important}#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

CSS Navigasi Page Number Style 3

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

CSS Navigasi Page Number Style 4

#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: #3E5801; background-color:#E0EDC1;}.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}.showpageOf{display:none!important}#blog-pager .pages{border:none;}

CSS Navigasi Page Number 5

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

JavaScript Navigasi Page Number

Masih di dalam template blogger, cari kode </body> kemudian tambahkan script navigasi page number dibawah ini tepat diatas kode tsb.

Pengaturan

perPage: 7;
numPages: 6;
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
}
Silahkan ubah tulisan warna merah sesuai dengan keinginan anda dan kemudian klik simpan. Demikianlah postingan saya mengenai cara membuat navigasi page number di blog atau cara membuat navigasi halaman dengan nomor. Semoga artikel ini dapat bermanfaat bagi kita semua.
3 Comments Blogger
Disqus
  1. di template saya kok versi selulernya berbeda ya mas navigasi page numbernya,apa ada script yang kurang ?

    BalasHapus
  2. Mantap ! Makasih ya... kunjungi balik otaktutorial.blogspot.com

    BalasHapus


Join This SiteInstagram