Flash_D Acewell

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>

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