Cara mengubah Navigasi "newer posts/older posts" menjadi nomor halaman

Defaultnya, halaman navigasi berpindah di blogger menggunakan link dengan anchor "posting lama/olderposts" atau "posting baru/newer posts". tidak seperti di wordpress yang menggunakan nomor halaman untuk pindah ke halaman lain sehingga memungkinkan pengunjung untuk melompat ke halaman lain baik yang lebih baru ataupun  lama tanpa perlu melewati halaman satu per satu. Tentu saja, ini kurang menarik. namun, saya punya trik untuk memodifikasi "posting lebih baru / lebih tua" menjadi navigasi nomor halaman seperti di wordpress.

Caranya  sederhana. Anda hanya harus mengikuti dan mempraktekkan langkah-langkah di bawah ini:

1. masuk ke dashboard Anda
2. masuk ke menu "Template"
3. pilih "edit html" >> Lanjutkan
4. temukan kode </ body> dan tempatkan kode di bawah ini sebelum kode </body>. (click ctrl+F untuk pencarian kata)

<!--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 -->

5. untuk style, Anda dapat menggunakan kode css di bawah ini. tempatkan itu sebelum 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;
}


* Anda juga dapat memodifikasi kode css / style terserah Anda.

6. Simpan dan Selesai. Dan lihatlah hasilnya.

Itu saja. jika Anda memiliki masalah, tanyakan saja pada rumput yang bergoyang, eh di kotak komentar maksudnya hehe. Semoga bermanfaat dan Happy Blogging :)

rujukan : http://trik-tips.blogspot.com

Share ke :

About Syakir Rahman

Syakir rahman adalah seorang blogger, dan juga front-end web developer. Kunjung website pribadinya disini : http://www.syakirurohman.net