Wednesday, August 18, 2010

Cara Membuat Navigasi Horizontal Menu di Blogger atau Blogspot (III)

Cara Membuat Navigasi Horizontal Menu di Blogger atau Blogspot (III) - Horizontal menu tak hanya mempercantik tampilan blog. Tapi juga menjadi guidance bagi visitor untuk menjelajahi content-content yang ada.

Pada postingan terdahulu sudah saya beberkan cara membuat tombol navigasi horizontal menu. Namun, yang itu bisa dikatakan berbasis blogroll, karena berisi teks yang nge-link ke blog-blog lain.

Sedangkan kode untuk memasukkan URL seperti ini:
<li><a href='URL blog anda'>Home</a></li>
<li><a href='URL blog anda'>Teks</a></li>
<li><a href='URL blog anda'>Teks</a></li>
<li><a href='URL blog anda'>Teks</a></li>

Nah, sekarang bagaimana cara membuat navigasi horizontal menu berbasis label (seperti di bagian header blog ini)?

Image and video hosting by TinyPic

Silahkan lihat script-nya di sini, dan ganti kode

<li><a href='URL blog anda'>Home</a></li>
<li><a href='URL blog anda'>Teks</a></li>
<li><a href='URL blog anda'>Teks</a></li>
<li><a href='URL blog anda'>Teks</a></li>

dengan

<li><a href='http://www.wawanwae.blogspot.com'>HOME</a></li>
<li><a href='http://www.wawanwae.blogspot.com/search/label/Blogging'>BLOGGING</a></li>
<li><a href='http://www.wawanwae.blogspot.com/search/label/SEO'>SEO</a></li>
<li><a href='http://www.wawanwae.blogspot.com/search/label/tutorial'>TUTORIAL</a></li>

Note:
1. Ganti URL dan label sesuai blog anda.
2. Untuk mengubah panjang dan lebar navigasi, cari kode:

#bg_nav {
background: #000000;
width: 1200px;
height: 29px;

Ganti angka width dan height sesuai kebutuhan.

Selamat mencoba.
____________________

No comments:

Post a Comment