Variasi Menu Drop Down

Kali ini saya akan membahas tentang pembuatan menu single drop down…..

Menu ini akan bisa mempercantik tampilan blog sobat semua…

Daripada saya banyak ngoceh mending langsung aja ke tahap pembuatannya….

Langkah pembuatannya:

• Pertama Login ke blog sobat
• Pilih Edit HTML.
• Cari kode ]]></b:skin>
• Copy script berikut dan letakkan di atas kode ]]></b:skin> .

.animatedtabs{border-bottom: 1px solid gray;overflow: hidden;width: 100%;font-size: 14px; /*font of menu text*/}.animatedtabs ul{list-style-type: none;margin: 0;margin-left: 10px; /*offset of first tab relative to page left edge*/padding: 0;}.animatedtabs li{float: left;margin: 0;padding: 0;}.animatedtabs a{float: left;position: relative;top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */background: url(http://i1256.photobucket.com/albums/ii499/imanuel5/tab_zps893519fb.gif) no-repeat left top;margin: 0;margin-right: 3px; /*Spacing between each tab*/padding: 0 0 0 9px;text-decoration: none;}.animatedtabs a span{float: left;position: relative;display: block;background: url(http://i1256.photobucket.com/albums/ii499/imanuel5/tab_zps893519fb.gif) no-repeat right top;padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */font-weight: bold;color: black;}
/* Commented Backslash Hack hides rule from IE5-Mac \*/.animatedtabs a span {float:none;}/* End IE5-Mac hack */
.animatedtabs .selected a{background-position: 0 -125px;top: 0;}.animatedtabs .selected a span{background-position: 100% -125px;color: black;padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */top: 0;}.animatedtabs a:hover{background-position: 0% -125px;top: 0;}.animatedtabs a:hover span{background-position: 100% -125px;padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */top: 0;}

Simpan dan lihat hasilnya.

Catatan: Atur kesesuaian warna dengan yang diinginkan, atur juga ukuran lebarnya….

Selanjutnya:

• Klik Page Element
• Klik Add Gadget
• Tambah  HTML/JavaScript. 
• Copy and paste kode dibawah ini

<div class="animatedtabs"><ul><li><a href="#" title="Home"><span>Home</span></a></li><li class="selected"><a href="#" title="Menu"><span>Menu</span></a></li><li><a href="#" title="Profil"><span>Profil</span></a></li><li><a href="#" title="Contact"><span>Contact</span></a></li><li><a href="#" title="Tools"><span>Tools</span></a></li> <li><a href="#" title="HTML"><span>HMTL</span></a></li></ul></div>

• Simpan dan lihat hasilnya.
• Ganti warna merah dengan link sobat semua, warna biru dengan nama menu yang diinginkan.