Membuat Navigasi Nomor Halaman Stylish di Blog

Di Blogger kita memiliki opsi pengaturan untuk menentukan jumlah posting yang tampil dalam 1 halaman dengan cara mensettingnya di menu Settings » Posts and comments » Show at most ? posts. Jika jumlah post sudah melebihi dari jumlah batas yang kita tentukan maka kita akan melihat link "Older Posts" dan "Newer Posts" pada pages footer, hal ini muncul karena Blogger tidak memiliki built-in page numbering. Padahal dibandingkan older dan newer posts menu pages numbering bisa lebih efisien membantu navigasi pengunjung (bisa melompat dari satu page ke page lain yang jauh di belakangnya atau di depannya) dan bisa memberi gambaran seberapa banyak posting yang ada. Nah buat kamu-kamu yang minat ini saya share tutorial membuat pages numbering menggunakan Javascript untuk Blogger/Blogspot blog. Saya sediakan 7 style yang bisa kamu pilih mana yang sesuai untuk blogmu ;)

Step by Step Memasang Navigasi Halaman di Blogger!

Kamu bisa memasangnya hanya dalam 2 langkah
1. Menambahkan CSS
2. Memasang Script

Sekarang ayo ke cek TKP cara memasang CSS-nya.

1. Menambahkan CSS
Step 1. Masuk ke Blogger Dashboard » Template » klik tombol Edit HTML:

Step 2. Klik dimanapun di dalam kode area lalu klik CTRL + F untuk membuka search box!

... gunakan search box tersebut untuk mencari kode berikut:

]]></b:skin>

Step 3. Sekarang pilih salah satu style dari 7 style nomor halaman yang saya sediakan yang menurut kamu paling cocok. Copy dan Paste kode dari style yang kamu pilih diatas kode ]]></b:skin>!

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

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

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

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

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

Style 6

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

Style 7

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

Note: Jika ingin menghilangkan tombol "first" dan "last" maka tambahkan kode berikut pada kode CSS-nya:

.firstpage, .lastpage {display: none;}

2. Memasang Script

Step 4. Sekarang cari (CTRL + F) kode berikut:

</body>

Step 5. Paste kan kode berikut diatas kode pada step 4:

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

Konfigurasi
Setelah diinstal maka kamu bisa melakukan beberapa perubahan untuk penyesuaian:

perPage: 7,
numPages: 6,
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
}

• perPage: berapa banyak posting yang akan ditampilkan per-halaman (7). Jumlah ini harus sama dengan setting pada homepage. Cara mensettingnya masuk ke opsi "Settings" » "Formatting" dan tuliskan angka pada kolom "Show at most", terkahir klik tombol "Save Settings".
• numPages: berapa banyak halaman yang akan ditampilkan pada navigasi  (6)
• untuk mengubah 'First', 'Last', "« Previous" dan "Next »" tinggal replace saja tulisan tersebut dengan kata-kata kamu sendiri.

Labels fix:
Secara default, Blogger hanya akan menampilkan 20 post per label. Untuk membuat widget navigasi label ini muncul di halaman label, kita harus mengubah sedikit kode pada template agar sinkron dengan kode perPage.

Cari semua kode seperti ini di template:

expr:href='data:label.url'

Replace dengan kode berikut:

expr:href='data:label.url + "?&amp;max-results=7"'

7 adalah banyaknya post yang akan muncul per-halaman.

Step 8. klik tombol Save Template! Beres! Let's Enjoy it!