Selamat Datang di http://nthoeng.blogspot.com, Terima Kasih Sudah Berkunjung, Jangan Lupa Tinggalkan komentar. | Selamat Datang di http://nthoeng.blogspot.com, Terima Kasih Sudah Berkunjung, Jangan Lupa Tinggalkan komentar. |

Jumat, 17 Februari 2012

Membuat Navigasi Bar Pada 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 !!!

5komentar:

SASTRA REMAJA 11mengatakan...

Makasih gan infonya. Sangat membantu. :)

baramengatakan...

wow...ini yg ku cari...moga tidak error
salam
abaddigital

Uem Cutersmengatakan...

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

Perikanan Kalibermengatakan...

gak berhasill gan

EXPO CPNS BUMNmengatakan...

Terima kasih Bang, izin menerapkan... hehe

Berbagi Informasi Lowongan Kerja Terbaru ni :
http://expocpnsbumn.blogspot.com

Posting Komentar

TwitterDeliciousFacebookDiggStumbleuponFavoritesMore