Cara Membuat Menu Horizontal Part 2 ~ Bithoo

Nah pada postingan kali ini kita akan membuat Menu Horizontal Part 2 Simple Balck Tabbed Horizontal Menu. Yuk kita langsung saja.

Menu horizontal sering dijumpai di banyak blog/website sebagai navigasi/menu utama. Di blog Blogger/Blogspot kita pun dapat dengan mudah membuatnya, bahkan hanya dengan CSS dan HTML.

Pada posting perdana CSS Horizontal Menu untuk Blogger/Blogspot kali ini, saya persembahkan kepada sobat Blogger semua "Simple Black Tabbed Horizontal Menu for Blogger Blog"

Cara memasang widget menu horizontal menu di Blogger/Blogspot:
1. Masuk ke dashboard > Design/Rancangan > edit HTML
2. Masukkan kode CSS tepat di ATAS ]]></b:skin> (gunakan Ctrl + F untuk mencari)

Kode CSS:

ul#menu {width: 100%;height: 43px;background: #FFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhZOu5g105XDPcYuAS98X9YSnZwrwjGwyDCiGkwtu6m1uL-vz6Vdga_jThIQA7UASyMsDB9U_U5DGqFcvsdGrkEbMOqfAeBJNxF1Rg7nyYDk3aoTiftem5jKy9bQLNelxtlbgcYKgDbWA/s1600/menu-bg.gif") top left repeat-x;font-size: 0.8em;font-family: "Lucida Grande", Verdana, sans-serif;font-weight: bold;list-style-type: none;margin: 0;padding: 0;}

ul#menu li {display: block;float: left;margin: 0 0 0 5px;}

ul#menu li a {height: 43px;color: #777;text-decoration: none;display: block;float: left;line-height: 200%;padding: 8px 15px 0;}ul#menu li a:hover {color: #333;}

ul#menu li a.current {color: #FFF;background: #FFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2PhlyWsxuX80IMSoAxn5sQoTrAfgI20QPYRSlmLz010eLvSpQJ1zb60yHcTglGHcFexAfpCT9XrPHODb2lMWzwofasFoaOeELzMsn52LQD3gVcDXwJMgXIRt-imtczDzED-Rm0Vy_WDo/s1600/current-bg.gif") top left repeat-x;padding: 5px 15px 0;}

3. Save template.
4. Copy Kode HTML, ganti #(url homepage anda) dengan url homepage blog, dan # dengan url-url lain yang ingin dipasang di menu. Ganti kata-kata Home, Daftar Isi Blog, dan lain-lain dengan anchor text yang diinginkan.

Kode HTML:

    <ul id="menu">
    <li><a class="current" href="#(url homepage anda)">Home</a></li>
    <li><a href="#">Daftar Isi Blog</a></li>
    <li><a href="#">Contact Me</a></li>
    <li><a href="#">Advertise</a></li>
    <li><a href="#">SMS Gratis!</a></li>
    </ul>

Contoh:

    <li><a class="current" href="http://bithoo.blogspot.com">Home</a></li>

Jika ingin menambah atau mengurangi link menu, tambah atau hapus baris:

    <li><a href="#">anchor text</a></li> sebelum </ul>.

5. Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget
6. Setelah pop up window muncul, pilih opsi HTML/Javascript
7. Kemudian masukkan Kode HTML yang telah diedit ke kolom configure HTML/Javascript.
8. Klik save.

9. Drag/geser widget menu horizontal tersebut ke bawah/atas header.

10. Save lagi.
11. Done!