Cara Membuat Halaman Navigasi Blog Dengan Nomor 7 Style

Cara Membuat Halaman Navigasi Blog Dengan Nomor 7 Style - Selamat pagi sobat Blogger Indonesia. Kali ini saya akan memberikan tutorial widget yakni bagaimana Cara Membuat Halaman Navigasi blog menggunakan nomor. Page Navigation adalah salah satu kerangka penting bagi blog agar visitor bisa mengeksplorasi semua artikel blog dengan mudah. Dan bagi sobat yang ingin mengubah atau membuat halaman navigasi menggunakan nomor maka artikel ini sangat tepat bagi sobat.

Page Navigation juga bisa menguatkan Internal Linking karena menghubungkan setiap artikel. Baiklah tanpa basa basi lagi, berikut tahap-tahap Tutorial Cara Membuat Halaman Navigasi Blog Dengan Nomor.

1. Login ke akun blogger sobat seperti biasa dan pilih blog yang akan dibuat halamna navigasi dengan nomornya.

2. Masuk ke menu template lalu ke edit html

3. Cari kode ]]></b:skin> menggunakn fungsi CTRL + F

4. Setelah kode diatas sobat temukan, copas kode dibawah ini tepat dibawah kode ]]></b:skin> tadi.

  

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

5. Cari kode </body> lalu copas kode berikut dibawah 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>

6. Terakhir, save template dan lihat hasilnya!

Nah, itu adalah satu style pilihan saya yang berwarna putih dengan kombinasi warna biru, jika sobat ingin melihat 6 style atau model gaya Page Navigation yang lain sobat lihat artikel How To Add Numbered Page Navigation Widget For Blogger

Setting Pengaturan

Jika sobat ingin mengubah pengaturan nya silahkan ikut tutorial dibawah ini.

1. perPage : Berapa banyak artikel yang akan ditampilkan pada setiap halaman (7). Jika sobat ingin mengubah pengaturan ini maka sobat juga harus menyesuaikan nya dengan pengaturan Post dibagian Setting Blogger nya agar bisa bekerja dengan baik.

2. numPages : Jumlah halaman yang ditampilkan pada Page Navigation (6)

3. Silahkan ganti First, Last, << Previous Dan Next >> sesuai dengan keinginan sobat.

Dan silahkan follow Anas Blogging Tips untuk terus mengetahui Panduan, Trik, Dan Tips Lengkap Lain nya Tentang Blogging serta nantikan artikel berikutnya ya.

Terima kasih sobat telah membaca artikel "Cara Membuat Halaman Navigasi Blog Dengan Nomor 7 Style". Sobat tidak diperbolehkan untuk menyalin (copy-paste) segala dan keseluruhan konten Anas Blogging Tips

Tweet