Mengganti "Posting Lama" dengan Navigasi Angka

Table of Contents

Baiklah kawan, kali ini saya akan berbagi trik bagaimana mengganti "Older Posts (Posting Lama)" pada halaman blogspot dengan navigasi angka. Hasilnya lebih keren loh... Bisa dibuktikan deh. Selain itu navigasi dalam bentuk angka bisa langsung menghilangkan rasa sebel pengunjung yang harus sabar klik satu persatu untuk ngais-ngais halaman lampau, Repot.. Feuh, hingga juga memudahkan pengunjung untuk loncat-loncat. What ???? Maksudnya loncat beberapa halaman tanpa harus mengklik satu persatu seperti pada "Older Posts". Okey !! Let's Learn !

Perbandingan Tampilan Antara Navigasi Older Post dengan Angka...

Older Posts

Angka

Caranya gimana Gan ... ?

Simak sini

• Masuk dulu pada Template kalian dan pilih Edit HTML
• Lantas, cari kode ini ]]></b:skin>  ketikkan, saja CTRL+F pada kode HTMLnya. kalau 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 -->

Okey,,, Tinggal nikmati aja hasilnya..

Posted By :