Membuat Nomor Halaman pada Blog


page number pada blog

Kali ini saya akan memberikan tutorial untuk membuat Older & Newest Post yang terdapat dibawah posting menjadi lebih menarik, yaitu dengan merubahnya menjadi angka (page number). Selain untuk mempercantik tampilan Blog anda page number ini juga sangat membantu pengunjung Blog untuk dapat dengan mudah menemukan halaman yang ingin dituju.

Kayanya ga perlu basa-basi panjang lebar lagi dah, kita mulai aja langkah-langkahnya.
  • Login ke akun Blog anda.
  • Pilih menu "Template".
  • Klik "Edit HTML".
  • Centang "Expand Template Widget".
  • Cari kode ]]></b:skin> (tekan CTRL+F pada keyboard, untuk mempermudah pencarian).
  • Jika sudah ketemu, sekarang copy kode yang ada dibawah ini, kemudian letakkan sebelum/diatas kode ]]></b:skin>.
/* Page Numbers
----------------------------------------------- */
.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;
}

  • Masih pada "Edit HTML", sekarang cari kode </body>
  • Jika sudah ketemu, copy kode dibawah dan letakkan sebelum/diatas kode </body>
<!-- Page Numbers -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!-- Page Numbers Ends -->

  • Klik "Pratinjau" untuk memastikan hasilnya sesuai.
  • Jika sudah sesuai, sekarang klik "Simpan template".
Sekarang lihat hasilnya.

Semoga bermanfaat.

1 comment:

  1. Mantap tampilannya gan makasih :)
    mohon dilirik blog ane ya gan di calvinzebua.blogspot.com

    ReplyDelete