Cara Mengganti "Older Posts" Dengan Kotak Angka

Umumnya navigasi untuk berpindah page di blogspot, biasa menggunakan link dengan teks "Older Posts untuk posting lama" dan "Newer Posts untuk posting baru".
Beda lagi dengan wordpress yang navigasinya bisa berbentuk angka, hingga bisa memudahkan untuk loncat beberapa halaman ke postingan yg lama maupun baru.

Nah tutor kali ini saya akan menjelaskan bagaimana cara mengganti link "Older Posts" dan "Newer Posts" menjadi angka seperti gambar di bawah ini

Oke, ini tutornya lur..
> Pertama ke desain template, kemudian ke "Edit HTML"
> Setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu, taruh script dibawah ini sebelum kode tersebut

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

> Setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum kode tersebut.

<!--Page Navigation Starts-->
<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 Navigation Ends -->

Kalau Sudah, pratinjau dulu untuk melihat hasilnya, lalu simpan.
Semoga berhasil

Share :