Membuat Tab Menu Dropdown

Langsung saja gak usah basa basi ngahahah, dibawah ini adalah langkah langkahnya sebagai berikut :

Seperti biasa Login ke Blogger
Pada Dasbor, pilih Rancangan/Layout, kemudian klik Edit HTML
Sebelum mengutak-atik template, sebaiknya Download Template Lengkap terlebih dahulu untuk mengantisipasi adanya kesalahan Editing template.

Cari kode </head> , untuk mempermudah pencarian tekan tombol Ctrl+F atau menggunakan tombol F3
Setelah menemukan kode </head> , copy dan paste script berikut diatas kode tersebut, kemudian Simpan Template

<style type='text/css'>
#catmenucontainer{
height:29px;
background:url(http://i1156.photobucket.com/albums/p578/berdbord/ICON%20WEB/catmenu.jpg) repeat-x;
display:block;
padding:0px 0 0px 0px;
font: 14px &quot;Century gothic&quot;,verdana, Arial, sans-serif;
font-weight:normal;
border-top:1px solid #686D6F;
}

#catmenu ,#catmenu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}

#catmenu  a {
color: #999;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}

#catmenu  a:hover {
background:url(http://i1156.photobucket.com/albums/p578/berdbord/ICON%20WEB/catmenuhov.jpg) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}

#catmenu  li {
float: left;
margin: 0px;
padding: 0px;
}

#catmenu  li li {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 130px;
}

#catmenu  li li a, #catmenu  li li a:link, #catmenu  li li a:visited {
background:url(http://i1156.photobucket.com/albums/p578/berdbord/ICON%20WEB/catmenu.jpg) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#E8EBEE;
border-bottom:1px solid #2C3133;
}

#catmenu  li li a:hover, #catmenu  li li a:active {
background:url(http://i1156.photobucket.com/albums/p578/berdbord/ICON%20WEB/catmenuhov.jpg) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
border-bottom:1px solid #2C3133;
}

#catmenu  li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}

#catmenu  li:hover ul {
left: auto;
display: block;
}

#catmenu  li:hover ul, #catmenu li.sfhover ul {
left: auto;
}
</style>

Anda bisa mengubah script diatas seperti width (lebar), color solid (warna), border (garis tepi) dsb. jika kode warna anda bisa mendapat di corel draw, macromedia flash player atau yg lain, tapi jika anda tidak mempunyai aplikasi tersebut disini anda bisa mendapatkannya di Kode Warna

3. Sekarang buka menu Elemen Laman dekat Edit HTML, kemudian klik Tambah Gadget.
4. Lalu copy dan paste kode HTML dibawah ini

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

Keterangan :

URL Anda : silahkan ganti dengan alamat link/ URL yang anda inginkan. Biasanya terdapat pada address bar browser.
pesan / tooltips : adalah pesan saat menu disentuh, bisa dihapus jika anda tidak memerlukannya. Contohnya menghapus di home, caranya hapus bagian title="beranda"
Menu # : Judul Menu yang diinginkan misalnya : home atau info dsb.

Pahami script demi scriptnya, sehingga anda bisa menambah atau mengurangi menunya. Sebaiknya copy terlebih dahulu di Microsoft Word agar lebih mudah mengeditnya, jangan sampai ada scipt yang hilang karena bisa berakibat fatal, mungkin kalau spasi ke samping atau bawah(Enter) masih tdk apa2.

8. Jika sudah klik simpan, dan lihat hasilnya...

Selamat mencoba.....

Authorized : Robert Aman

Kamu Telah Membaca Artikel Tentang Membuat Tab Menu Dropdown. Kamu Boleh Mengcopy-Paste Atau Menyebarluaskan Artikel Ini, Tapi Jangan Lupa Untuk Meletakkan Link Dibawah Ini Sebagai Sumbernya :

<a href="https://berdbord.blogspot.com/2012/04/membuat-tab-menu-dropdown.html" target="_blank">Membuat Tab Menu Dropdown</a>