Cara Merubah "Newer dan Older Posts" Dengan Angka - Petrus Siahaan

Trik Cara Mengganti atau Merubah Tampilan "Older Posts" Dengan Angka - Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer Posts (posting baru)". hal ini tentu sangat Beda dengan yang ada pada wordpress yang navigasinya bisa berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman ke postingan yg lama maupun baru.

Jika mungkin pada postingan terdahulu LBN pernah membahas tentang "Cara Merubah Posting Lama dan Baru Dengan Judul Postingan" kali ini mungkin hampir sama , namun disini posting lama akan dikumpulkan kedalam halaman2 yang terdiri dari beberapa judul posting sekaligus.

Dalam trik kali ini akan kita bahas tentang bagaimana cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" tersebut menjadi angka seperti yang ditunjukkan pada gambar di bawah ini.


1. Langkah pertama tentu saja anda harus Login ke akun blogger milik anda selanjutnya menuju ke desain template anda kemudian lalu "Edit HTML"
2. setelah itu cari kode ini ]]></b:skin> Jika sudah anda temukan lalu letakkan kode CSS 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;
}

3. Jika sudah kemudian cari kode ini </body> lalu tempatkan kode 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 -->

4. Terakhir simpan dan lihat hasilnya.

Selamat mencoba semoga informasi tersebut bermanfaat untuk anda