Widget Navigasi Halaman

Halo sahabat bloggers. Siap untuk belajar kan? Siapkan blogger, laptop, komputer, mouse, keyboard dll deh. Ok, kali ini kita akan membuat widget navigasi halaman di blogger (mau mana lagi?). Untuk membuatnya lebih menarik, pertama taruhkan CSS. Ayo mulai.



Tahap 1 Tambahkan CSS

1. Masuk ke dasbor mu.
2. Klik Template > Edit HTML.
3. Cari kode ]]></b:skin> pada CTRL + F. 
4. Pastekan kode ini tepat diatasnya.

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

Tahap 2 Tambahkan Script
1. CTRL + F cari kode </body>
2. Pastekan kode ini tepat diatasnya

<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>

Keterangan:
1. var perPage=7; untuk post yang ditampilkan
2. var numPages=6; untuk banyaknya halaman pada navigasi
3. var firstText='First'; « Previous, Last', Next »', teks pertama, balik, terakhir, dan selanjutnya.

Jadinya Akan seperti ini:




Cukup sekian terima kasih :) :-d
berbagai tema-tema navigasi bisa dilihat di helplogger.blogspot.com