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 != "item"'>
<script type='text/javascript'>
var pageCount=4;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</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 !!!
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 != "item"'>
<script type='text/javascript'>
var pageCount=4;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</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 !!!
5komentar:
Makasih gan infonya. Sangat membantu. :)
wow...ini yg ku cari...moga tidak error
salam
abaddigital
Saya coba terpakan gan, trims ya...di tunggu kunjungan baliknya.
gak berhasill gan
Terima kasih Bang, izin menerapkan... hehe
Berbagi Informasi Lowongan Kerja Terbaru ni :
http://expocpnsbumn.blogspot.com
Posting Komentar