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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</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.
Artikel keren lainnya:
Belum ada tanggapan untuk "Cara mengubah Newer Post/Older Post menjadi Nomor"
Post a Comment