Numbered Page Navigation

Leave a comment »

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. 

This entry was posted on Sabtu, 27 Agustus 2011 at 12.18 and is filed under . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response.

Posted in by Dark Acewell. No Comments

Leave a Comment