Cara Membuat Navigasi Nomer Halaman di Bawah Postingan Blog

Pada kesempatan kali ini mimin mau berbagi cara membuat Navigasi Nomor Halaman pada Blog atau yang biasa yang disebut Page Number adalah urutan nomor-nomor halaman pada blog kita.

Hal ini sangatlah penting, karena bila kita memiliki postingan yang panjang bila tidak dibuatkan nomor navigasi halamannya tentu saja pembaca akan bosa membaca postingan yang begitu panjang. Oleh karenanya navigasi ini sangatlah penting.

Baiklah untuk mempersingkatnya alangkah baiknya kita simak panduan dibawah ini.

Login ke blog kamu  kemudian menuju halaman Design dan Edit HTML, Cari kode ]]></b:skin> lalu paste Css di bawah ini tepat 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;
}

Langkah selanjutnya kamu cari kode </body> , kalau sudah ketemu paste kode berikut ini tepat di atas kode </body>

<!--Page Navigasi-->
<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=6;
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 Navigasi -->

Keterangan: 
Kamu bebas mengubah tulisan yang saya kasih warna merah, angka 6 adalah jumlah posting yang tampil tiap halaman sedangkan yang 5 adalah tombol navigasi yang tampil. Next adalah text untuk ke halaman selanjutnya, sebalikanya Previous untuk kembali kehalaman sebelumnya.

Simpan template dan lihat hasilnya.

Demikian tutorial ini semoga dapat membantu sahabat semua dimana saja berada.

Post a Comment

Previous Post Next Post

SLOT 1