Life is simple , just enjoy it , make your self comfort with the wave , let it flow :)

Rabu, 05 November 2014

Cara Merubah Tampilan Pindah Halaman Dengan Angka Pada Blog

Navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer Posts (posting baru)". Bagaimana cara merubah tampilan tersebut agar bisa berbentuk angka sehingga memudahkan untuk loncat beberapa halaman ke postingan yang lama maupun baru.

Cara merubahnya:
  • Login blog terlebih dahulu lalu pilih desain template kemudian edit HTML
  • Setelah itu cari kode ini ]]></b:skin> dan salin script 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;
}
  • Setelah itu cari kode ini </body> kemudian salin 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 -->
  • Hasilnya akan berubah seperti ini:


Tidak ada komentar:

Posting Komentar