Cara Membuat Navigasi Angka Halaman Blog Dengan Bermacam Style

Cara Membuat Navigasi Angka Halaman Blog Dengan Bermacam Style. Sobat blogger, yg saya cintai mari simak dengan seksama

Apa itu navigasi angka ?

navigasi angka halaman blog atau navigasi number adalah sebuah number halaman artikel, jika artikel kita memang sudah banyak dan melebihi kapasitas hompage untuk di tampilkan, navigasi ini bertujuan untuk memudahkan pengunjung dalam mencari artikel-artikel yang ada pada blog kita yang sebelumnya atau yang sudah lawas dengan jumlah halaman yang bisa kita tentukan atau kita sesuaikan dengan jumlah artikel pada blog kita, maka penggunaan navigasi halaman ini sangat penting sekali untuk menawarkan halaman selanjutnya dalam pencarian artikel dengan lebih mudah.

Untuk itu disini saya akan membuat tutorial membuat navigasi angka halaman blog dengan 7 style atau 7 gaya, jadi anda bisa pilih navigasi angka tersebut sesuai slera anda, dan cara penerapannyapun sangat mudah sekali. oke bagi anda yang ingin membuat navigasi angka halaman blog di terapkan di blog anda, silahkan ikuti tutorialnya.

Cara Membuat Navigasi Angka Halaman Blog Dengan Bermacam Style

1. Buka akun blogger anda.

2. Pilih menu template > Edit HTML

3. Selanjutnya pilih salah satu kode navigasi yang anda suka lalu letakan kode tersebut di atas kode ]]></b:skin> atau </style> 

Navigasi angka Style  1

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

Navigasi angka Style 2

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

Navigasi Angka 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: 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 Angka 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: #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;}

Jika sudah memasang kode navigasi yang anda suka, selanjutnya letakan kode dibawah ini tepat di atas 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=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://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
</b:if>
</b:if>

Note :
var perPage=7; : Jumlah posting yang ditampilkan di setiap halaman.
var numPages=6; : Jumlah number yang di tampilkan di halaman, Sesuaikan dengan jumlah artikel.

Selanjutnya klik save Template.

Saya rasa sudah cukup untuk tutorial cara membuat navigasi angka halaman blog dengan bermacam style.semoga sukses

Tweet