Cara Menambahkan Navigasi Halaman Nomor Yang Menarik dan Keren[Responsive]

Navigasi Halaman berfungsi: untuk membawa pengunjung ke artikel-artikel lainnya yang pastinya telah dipublish terlebih dahulu, secara default, blogger memanag sudah support page navigation.

Secara default template pada blogger bawaan sudah mempunyai menu navigasi halaman, hanya saja sedikit merepotkan karena harus diklik satu persatu halaman. Oleh karena itu disini kita memerlukan sebuah script tambahan agar desain pada navigasi halaman menjadi lebih menarik dan lebih user friendly.  

Fungsi Navigasi Halaman Dengan Nomor:
1. Pastinya memudahkan sekali untuk para pengunjung yang ingin melanjutkan mencari page-page selanjutnya.
2. Mempercantik halaman blogger tersendiri, dan biasanya setiap template sudah memiliki navigasi-navigasi yang berbeda.Tetapi tidak menutup kemungkinan ada juga template yang tidak memiliki navigasi halaman bernomor.

Pada kali ini saya akan membagikan sedikit tutorial mengenai blog, yang mungkin anda coba untuk mengoptimalkan atau mempercantik blog kalian.

Dibawah Ini adalah Cara Membuat Navigasi Halaman Bernomor :

1.    Masuk ke Dasboard Blogger
2.    Pilih Tema dan klik Edit HTML
3.    Cari kode ]]></b:skin> "Bisa menggunakan CTRL + F agar lebih cepat"
4.    Copy dan Pastekan Kode CSS yang anda pilih dibawah ini tepat diatas kode ]]></b:skin>
Dan berikut ini beberapa style navigasi halaman yang bisa anda pilih.

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

Navigasi 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);}

Navigasi Style 3

#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}

.blog-pager {background: none;}

.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}

.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}

.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}

a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}

#blog-pager .pages{border:none;background: none;}

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

Navigasi Style 5

#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: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Setelah kalian memilih salah satu menu navigasi diatas hal yang harus diperhatikan lainnya :

1. Agar lebih cepat gunakan CTRL + F untuk mencari kode </body>

2. Tambahkan kode script dibawah ini tepat di atas kode </body> 
3. Langkah terakhir simpan tempalte anda dan lihat hasilnya.

<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=7;
    var numPages=6;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='Previous';
    var nextText ='Next ';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
  <script src="http://www.geocities.ws/usmankurniawan/pagenation.js"/>
</b:if>
</b:if>

Catatan: Jika anda ingin memodifikasi lagi anda bisa mengganti angka dan huruf yang di Bold Berwana Merah tersebut sesuai keinginan anda. Mungkin hanya tutorial inilah yang bisa saya berikan untuk kalian, jangan lupa share apabila artikel ini bermanfaat bagi kalian, terimakasih.

Admin@TatapKu

Seorang Blogger Pemula | Penulis | Simpel Desain