Page Navigation Ala Lentera Langit, Cantik..!

Page Navigation Ala Lentera Langit

Bismillah....

Bahasa kerennya Page Navigation/Numbered Page, kalau bahasa gak kerenx nomor halaman hehe.., jadi bukan hanya buku saja sob yang punya nomor-nomor halaman tapi blog pun ada. Sebenarnya secara default blog juga telah menyediakan fasilitas untuk membuka-buka halaman posting cuma kelemahan dari fasilitas bawaan blog ini adalah perlompatan yang mampu dilakukan hanyalah satu halaman saja, misalnya halaman 1 (satu) ke halaman 2 (dua) dan seterusnya. Sedangkan Paga Navigation yang akan kita bahas ini mampu melompat dari halaman 1 (satu) hingga ke halaman 5 (lima) bahkan bisa lebih dari itu.

Lentera Langit gak ngerti sama sekali dengan bahasa-bahasa asing untuk blogger, yang Lentera Langit tahu hanya copy kode ini lalu simpan diatas kode ini heheh..., daripada makin aneh ngomongnya mari kita simak langsung cara-cara pembuatannya..., cekibrottt...! :)

1. Login ke Akun blog

2. Pilih Rancangan/Design

3. Edit HTML
4. Backup terlebih dahulu template anda lalu Cari kode  ]]></b:skin>, untuk memudahkan pencarian gunakan control + f

5. Masukkan kode dibawah ini sebelum/diatas kode ]]></b:skin>

.blog-pager,#blog-pager{font-family:"Times New Roman", Times, serif;font-weight:normal;font-size:12px;width:700px;padding:17px;} 
.showpageNum a,.showpage a {background:#069; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;} 
.showpageNum a:hover,.showpage a:hover {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}
.showpageOf{margin:0 8px 0 0;font-family:'Coming Soon', cursive;text-decoration:none;font-size:100%;}
.showpagePoint {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}

6. Masukkan kode dibawah ini sebelum/diatas kode </body>

<script type='text/javascript'>;
var home_page=&#39;/&#39;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=4;
var upPageWord =&#39;Prev&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://stylifyyourblog1.googlecode.com/svn/trunk/pagination.js' type='text/javascript'/>

7. Klik Pratinjau/PREVIEW
8. Kalau tidak ada yang erorr, klik Simpan Template/Save Template

Hasilnya akan seperti gambar dibawah ini.

Semoga Bermanfaat... :)

Sumber : http://www.stylifyyourblog.com