Cara Mengganti Older Posts Dengan Angka

Sepertinya kita bosan dengan tampilan older post yang tidak dapat meloncat ke suatu halaman atau topik tertentu secara langsung. Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts" dan "Newer Posts" yang tidak simpel. Beda dengan wordpress yang navigasinya bisa berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman ke postingan yg lama maupun baru.

Nah, trik kali ini akan menjelaskan bagaimana cara mengganti link "Older Posts" dan "Newer Posts" menjadi angka seperti gambar di bawah ini: 


Ikuti langkah-langkahnya:
1. Yang paling paling penting, nyalakan komputer
2. Pastikan connect dengan internet
3. Log in blogger
4. Langsung menuju ke desain template anda kemudian ke "Edit HTML"
5. Setelah itu cari kode ]]></b:skin> kalo sudah ketemu taruh script dibawah ini di bawah ]]></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;

}

6. setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum kode </body>:

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


Kalau sudah silahkan lihat hasilnya. cara ini sudah saya pakai di blog lama saya sob. Semoga berhasil. 
^_^

0 komentar:

Posting Komentar

Pages