Cara Membuat Navigasi Halaman Blog Pake Nomor

Sabtu, 30 April 2016

Cara mengganti teks "Newer Posts" (Posting Terbaru), "Home" (Beranda), dan "Older Posts" (Posting Lama) dengan Nomor/Angka.

PANDUAN cara menampilkan, memunculkan, atau membuat Navigasi Halaman dengan Nomor/Angka (Numbered Page Navigation) ini diambil dari Help Blogger setelah dipraktikkan di blog ini dan sukses.

Tips ini sekaligus mengganti teks "Newer Posts" (Posting Terbaru), "Home" (Beranda), dan "Older Posts" (Posting Lama) yang biasa muncul di halalaman depan dan/atau halaman Label/Kategori konten blog.

Cara Membuat Navigasi Halaman Blog Pake Angka/Nomor

1. Template > Edit HTML
2. Cari (Ctrl+F) kode </body> (Ada di bagian bawah banget).
3.  Copy kode berikut ini dan paste di atas kode </body> tadi:

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

4. Cari (Ctrl+F) kode ]]</b:skin>
5. Copy kode berikut ini dan paste di atas kode ]]</b:skin> tersebut:

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

6. Save Template!

Kini Navigasi Halaman blog Anda berubah jadi nomor, dari yang tadinya Newer, Older, dan Home, menjadi angka seperti tampak di halaman depan blog ini.

Kode no. 5 tadi hanya satu dari sekian kode lain dengan model Numbered Page Navigationlainnya. Silakan pilih di Help Blogger untuk model lainnya

Labels: Desain Blog

Thanks for reading Cara Membuat Navigasi Halaman Blog Pake Nomor . Please share...!