Cara Membuat Navigasi Nomer Halaman Postingan diBlogspot


Navigasi Nomor Halaman pada Blog atau yang biasa yang disebut Page Number adalah urutan nomor-nomor halaman pada blog kita. Atau yang akan menggantikan New Post atau Older Pos....Jadi dengan adanya Page Number ini membuat tampilan blog kita menjadi lebih wooke deh.... juga mempermudah pengunjung melihat postingan kita.... biasanya letaknya persis di bawah postingan dihalaman depan..




Berikut ini adalah cara membuatnya :
  • Login ke blog kalian  kemudian pilih halaman Design dan klik Edit HTML, jangan lupa di back up dulu templatenya untuk keamanan kalo terjadi error.
  • 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 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: 
  1. Untuk Melakukan pencarian kode gunakan CTRL F agar cepat ketemu.
  2. Tulisan yang saya berwarna merah, bisa kita ganti sesuai keinginan .
  3. angka 6 adalah jumlah posting yang tampil tiap halaman.
  4.  sedangkan yang 5 adalah tombol navigasi yang tampil.  
  5. Next adalah text untuk ke halaman selanjutnya, 
  6. sebalikanya Previous untuk kembali kehalaman sebelumnya.

  • Kemudian Coba di preview dulu dan kalo tampilannya sudah oke klik Simpan template.
Demikian cara membuat Navigasi Nomer Halaman Blogspot ini, selamat mencoba dan semoga bermanfaat...:) 

1 comment:

  1. Saya coba terpakan gan, trims ya...di tunggu kunjungan baliknya.

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...