Cara Membuat Tab Menu Bervariasi

Tab menu bercabang (drop down) seperti yang tampak di Blog saya ini, selain untuk mempercantik tampilan, juga berfungsi untuk menghemat tempat, uniknya tab menu drop down ini adalah setiap kali crusor mouse kita melewati diatasnya maka akan muncul menu menu tersembunyi yang terkait dengan judul tab itu sendiri...menarik bukan?  Seperti contoh gambar ini :

Menu horizontal di atas dibuat dengan menggunakan html script dan css.
Untuk membuatnya bisa lakukan langkah berikut:

Login ke account blogger anda

• Pilih Dashboard -> Tataletak -> Edit HTML

• Cari kode berikut : 

]]></b:skin>

•  Di bagian atas kode tersebut masukkan kode berikut :

/* Navbar */
#menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(http://i36.tinypic.com/28lgntl.jpg) repeat-x;
opacity: 0.99; filter: alpha(opacity: 98);}
#menu-cari{float:right; display:inline; padding:3px 5px 0 0;}
#menu ul{padding:0; margin:0;}
#menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}
#menu ul li a{float:left; padding-left:15px; display:block; color:#ffffff; text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; background:url(http://i36.tinypic.com/28lgntl.jpg) 0px -30px no-repeat; line-height:30px; padding-right:15px;}
#menu ul li a:hover{background-position:0px -60px; color:#ffffff;}
#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#ffffff;}
#menu ul li ul {display:none;}
#menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;
display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}
#menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}
#menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:1px dotted #fff; background:black; width:175px;}
#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#7C01A4;}
.status-msg-wrap{
display:none;
}

•  Klik tombol "Simpan Template"

•  Buka halaman "Tata Letak -> Elemen Halaman"

•  Pada Elemen header , klik " Tambah Gadget"

•  Setelah mengklik tombol "tambah gadget" pilih HTML/Javascript

•   Pada kotak dialog html/javascrpit masukkan kode html berikut :

<div id='menu'>
<ul>
<li><a class='active' href='/'> Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a>
<ul>
<li><a href='#'>Menu 2.1</a></li>
<li><a href='#'>Menu 2.2</a></li>
</ul></li>
<li><a href='#'>Menu 3</a>
<ul>
<li><a href='#'>Menu 3.1</a></li>
<li><a href='#'>Menu 3.2</a></li>
<li><a href='#'>Menu 3.3</a></li>
<li><a href='#'>Menu 3.4</a></li>
</ul></li>
<li><a href='#'>Menu 4</a></li>
<ul>
</ul>
</ul></div>

Catatan:

Pada bagian : href="#" , tanda # anda ganti dengan url tujuan anda
misalnya:
http://satriaji-andianto.blogspot.com
atau
http://satriaji-andianto.blogspot.com/2010/03/kota-hantu-terlihat-di-google-maps.html
http://satriaji-andianto.blogspot.com/2010/03/badai-matahari-di-tahun-2012-2015.html
teks setelah tanda # seperti Home, Menu 1, dst bisa anda ganti dengan teks sesuai dengan keinginan anda.

•  Simpan perubahan yang anda buat,

Oke saya kasih contoh ya, lihat tab blog ini yang judulnya 'Fenomena' (sebelah kanan 'Home') nah begini cara bikinnya :

scriptnya
<li><a href='#'>Menu 2</a>
<ul>
<li><a href='#'>Menu 2.1</a></li>
<li><a href='#'>Menu 2.2</a></li>
</ul></li>

step pertama :


<li><a href='#'>Menu 2</a>;
ganti '#' dengan url label (disini a gunakan http://satriaji-andianto.blogspot.com/search/label/Fenomena) selanjutnya ganti kata Menu 2 dengan judul label (Fenomena)

step kedua :
untuk menu dropdownnya

<li><a href='#'>Menu 2.1</a></li>

ganti '#' dengan url label (disini a gunakan http://satriaji-andianto.blogspot.com/search/label/UFO) kemudian ganti kata Menu 2.1 dengan judul label 'UFO'

step ketiga

<li><a href='#'>Menu 2.2</a></li>
ganti '#' dengan url label (disini a gunakan http://satriaji-andianto.blogspot.com/search/label/Alam) kemudian ganti kata Menu 2.1 dengan judul label 'Alam'

siip....! perlu diperhatikan kode script yang menjadi kunci,
disetiap kita akan ganti judul menu jangan lupa sertakan </ul></li>
contoh :
<li><a href='#'>Menu 2.2</a></li>
</ul></li> (nah ini kode kuncinya)
<li><a href='#'>Menu 3</a>

disetiap kita akan membuat menu dropdown dibawah judul utama tab jangan lupa sertakan kode  <ul>

contoh :

<li><a href='#'>Menu 2</a>
<ul> (ini kode kuncinya)
<li><a href='#'>Menu 2.1</a></li>

mudah2an jelas ya....

Happy Blogging sobat.............