Pernah lihat gambar seperti ini pada blogspot ?
Itu adalah Numbered Page Navigation. Yang berfungsi buat navigasi halaman blog berdasarkan nomor.

Gimana cara buatnya:


# Langkah Pertama:
Copy kode dibawah ini lalu paste ke blog kamu. caranya:
Cari kode XML dibawah ini (di bagian Edit HTML kamu):

]]></b:skin>
Setelah dapat silahkan copy kode CSS yang ada dibawah ini, terus taruh kodenya tsb tepat diatas kode ]]></b:skin>].
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
# Langkah Kedua

Cari kode XML dibawah ini (di bagian Edit HTML kamu):
<!-- Untuk Prev / Postingan Baru -->
<b:if cond='data:newerPageUrl'>
  <span id='blog-pager-newer-link'>
    <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
  </span>
</b:if>
<!-- letakkan sini -->
<!-- unutuk Next Postingan Lama -->
<b:if cond='data:olderPageUrl'>
  <span id='blog-pager-older-link'>
    <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
  </span>
</b:if>
Kemudian setelah ketemu tarus kode ini di bawah kata <!-- letakkan sini -->
<!-- Page Navigation -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <script type='text/javascript'>
        var pageCount=5;
        var displayPageNum=5;
        var upPageWord ='Prev';
        var downPageWord ='Next';
    </script>
    <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>

Alhasil, Simpan Template lalu lihat hasilnya, seperti pada blog saya itu tu... :D

Perhatikan:
  • Var pageCount=5; -> angka 5 artinya, ada 5 postingan yang tampil perhalaman, silahkan diganti menurut kamu, Ingat : sesuaikan dengan nilai pada saat kamu setting gadget, nilai defaultnya adalah 5 entri perhalaman.
  • Var displayPageNum=5; ->angka 5 juga bisa diganti sesuka kamu.
  • Var upPageWord ='Previous'; -> kata previous kata yg muncul di blog bisa diganti, misalnya "sebelumnya", atau apapun yg kamu mau.
  • Var downPageWord ='Next'; -> kata next kata yg muncul di blog bisa diganti, misalnya "berikutnya", atau apapun yg kamu mau.
 Silahkan posting komentar untuk pertanyaaan, jika anda mengalami kesulitan.. trims friends.

0 komentar:

Posting Komentar

Beta Blogs

Situs ini masih dalam pengembangan, dikit-dikit ajalah....
Tadi malem nemu nemu script baru dan hasilnya di Gallery tapi lom sampai dini, admin masih ngoprek lagi.....

Twitter Module

Show users what you're up to! The YOOtweet module is the neatest way to display your Twitter entries directly on your website. New YOOtweet module! For more details take a look at the YOOtweet page...