Sabtu, 23 Juni 2012

Mengganti "Older Posts" Dengan Angka


Kali ini Saya akan membahas cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" menjadi angka seperti gambar di bawah ini ↓

Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer Posts (posting baru)". Beda dengan wordpress yang navigasinya bisa berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman ke postingan yg lama maupun baru.

Berikut cara membuatnya :

  • Login ke blogger.com, jika sudah,
  • Pilih Template → Edit HTML → Expand Template Widget
  • Cari kode ]]></b:skin> agar mudah mencari tekan (ctrl+f)
  • Letakkan script di bawah ini di atas 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;
}


  • Setelah itu cari kode </body> kemudian letakkan script di bawah ini di atas 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 -->

  • Cari kode  'data:label.url'
  • Kemudian ganti dengan kode di bawah ini.

    'data:label.url + &quot;?&amp;max-results=5&quot;'

  • Simpan dan lihat hasilnya


Selamat Mencoba !

Tidak ada komentar:

Posting Komentar