Cara Mengganti Older Posts Dengan Angka

Cara Mengganti Older Posts Dengan Angka - Berbagai cara kita lakukan agar pengunjung suka dengan blog kita, mulai dari mendesain tampilan blog agar bersahabat dengan pengunjung dan menyajikan artikel yang bermanfaat.

Pada tampilan biasa, untuk berpindah ke halaman berikutnya menggunakan tulisan Older Posts. Tetapi berpindah ke halaman berikutnya tidak bisa langsung lompat, misalnya dari halaman 1 langsung ke halaman 5.

Tetapi kita bisa mengakalinya dengan mengganti tulisan older posts dengan menggunakan angka, sehingga untuk berpindah ke halaman berikutnya bisa melompat.

Selain itu, dengan merubah tulisan older posts dengan angka juga akan membuat blog kita terlihat lebih cool alias keren. Untuk cara mengganti tulisan posting lama sehingga menjadi angka dengan menambahkan css dan html ke dalam template.

Jadi intinya dengan mengganti older posts dengan angka membuat kita saat berpindah ke halaman berikutnya semakin mudah

Tampilan older posts yang sudah diganti dengan angka dapat Anda kreasikan sendiri dengan merubah css, sehingga dapat mencocokan dengan selera sendiri. Tampilan older posts yang diganti dengan angka ini terlihat elegan dan sederhana, berikut contoh gambarnya.

Bagaimana menurut Anda tampilan older posts yang sudah diganti dengan angka seperti yang terlihat seperti gambar diatas? jika Anda rasa tampilan older posts yang sudah dirubah menjadi angka keren dan Anda tertarik untuk menerapkannya di blog, berikut caranya.

Cara Mengganti Older Posts Dengan Angka

1. Login ke Blogger > Dashboard > Template > Edit HTML (Sebelum edit html, lebih baik backup terlebih dahulu template blog, untuk mengantisipasi kesalahan)

2. Cari kode ]]></b:skin> dan letakan kode css berikut ini sebelum kode tadi.

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

3. Setelah itu cari kode </body> dan letakkan kode html berikut ini

sebelum kode tadi

<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://yourjavascript.com/24245310113/page-bloggermaxdotcom.js' type='text/javascript'/> </b:if> </b:if>

4. Simpat Template