Cara Mengganti Older Post dengan Angka

Selamat malam sobat semua, kali ini saya akan berbagi tentang posting
bagaimana cara mengganti post dengan angka.

Navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer Posts (posting baru)."


Berbeda dengan wordpress yang navigasinya bisa berbentuk angka sehingga
bisa memudahkan untuk loncat ke halaman atau postingan yang lama maupun
yang baru.
Oke kali ini saya akan menjelaskan bagaimana cara mengganti link "Order posts (posting lama)" dan "Newer posts (posting baru)" menjadi angka seperti gambar di bawah ini.
                       

                           


1. Langkah awal harus menuju ke desain template anda kemudian ke
    "Edit HTML"


2. Setelah itu cari kode seperti ini ]]></b:skin> kalau sudah ketemu
    taruh kode script di bawah 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. Setelah itu cari kode ini </body> kemudian taruh script di bawah 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. Selesai,.. jangan lupa simpan dan silahkan dilihat hasilnya.

3 komentar:

  1. Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...

    BalasHapus
    Balasan
    1. Oke sob, thanks atas kunjungannya..smoga berhasil..

      Hapus
  2. Terimakasih untuk tutorial bagus nya sob! Kebetulan saya sudah pakai sistem ini! :)

    BalasHapus

>> Tinggalkan Komentar Anda.. <<