Cara Membuat Navigasi Bar DiBawah Postingan Blog

 

 

 

 

 

 

 

 

 

 

 

 

 

Kali ini akan saya share cara membuat navigasi bar pada blog, sebelumnya navigasi bar adalah baris yang digunakan utnuk memilih page/halaman pada blog utnuk mencari postingan yang diinginkan, untuk contoh lihat pada gambar, utnuk membuatnya ikuti langkah-langkah berikut :

1. Log In ke Blogger.
2. Pilih Rancangan, selanjutnya Edit Html, dan centang Expand Template Widget.
3.Cari kode script ]]></b:skin> , dan letakan script berikut tepat diatas kode tersebut.

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:bold;
border: 0px solid #cccccc;
margin:0 3px;
padding:10px;
}
.showpageNum a:hover {
border: 0px solid #ffffff;
background-color:#transparent;
}
.showpagePoint {
color:#00ff0c;
text-decoration:bold;
border: 0px solid #cccccc;
background: #transparent;
margin:0 3px;
padding:12px;
}
.showpageOf {
text-decoration:bold;
color:#ff7e00;
padding:10px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:bold;
border: 0px solid #cccccc;
padding:10px;
}
.showpage a:hover {
text-decoration:bold;
}
.showpageNum a:link,.showpage a:link {
text-decoration:bold;
color:#ff7e00;
}

4. Selanjutnya cari kode script </body>, dan letakkan script berikut di atas kode </body>.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=4;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://nthoeng.googlecode.com/files/navigasi.js' type='text/javascript'/>
</b:if>

5. Teks berwarna hijau merupakan jumlah posting yang akan ditampilkan setiap page/halaman.
6. Simpan Template, Untuk melakukan perubahan warna, ubah pada kode warna pada script yang diletakkan di atas ]]></b:skin>.

Semoga Berhasil !!!

Posted in: Tips n Trik