Cara Membuat Navigasi Halaman Bernomor (II) | Numbered Page Navigation for Blogger

- Adanya widget numbering page navigation atau navigasi halaman bernomor memang membuat blog lebih user friendly. Selain itu, berpotensi meningkatkan page view. 

Hanya saja, lantaran script-nya yang banyak dan njelimet atau mungkin tak support dengan template blog bersangkutan, kadang gagal diterapkan. Nah, ini ada cara lain yang lebih praktis dan scriptnya lebih ringkas.

1. Masuk ‘Layout’-->‘Edit HTML’ (tak usah dicentang)

2. Cari kode ]]></b:skin>

3. Tambahkan kode berikut ini di atasnya:

.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;
}

4. Cari kode </body>

5. Tambahkan kode berikut ini di atasnya:

<!--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://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->

6. Simpan. Selesai

Selamat mencoba..

By@Si OTAK MATI

Posted in: Web dan Blog