Menu dropdown sederhana untuk blog anda

Secara bawaan blogger tidak menyertakan menu dropdown, tetapi anda dapat membuatnya sendiri dengan menggunakan Gadget HTML/Javascript. Selain mempercantik blogger anda, gadget ini juga menghemat space jika kita memiliki banyak link pada navigasi kita. Untuk membuat menu dropdown yang sederhana, kita hanya membutuhkan style CSS untuk mengubah tampilan HTML UnOrder List menjadi tampilan dropdown.
Jadi mari kita coba membuatnya:

• Masuk ke blogger anda, kemudian pilih blog yang ingin anda pasangkan menu dropdown.
• Pilih Tata Letak dan klik tambahkan Gadget (letaknya sebaiknya ditempatkan di bawah header anda)
• Pada pilihan Gadget, pilihlah gadget bertype HTML/Javasscript
• Unutuk Judul dikosongkan saja, sedangkan untuk Konten nya isikan dengan kode berikut:

<style type="text/css">
.menu { border: none; border: 0px; margin: 0px; padding: 0px; font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; font-size: 14px; font-weight: bold;
}
.menu ul { background: #333333; height: 35px; list-style: none; margin: 0; padding: 0;
}
.menu li { float: left; padding: 0px;
}
.menu li a { background: #333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFd7yzNZUN08UHMdyIblF8mLltS7z6tBL_imHdnAEPsXPYGZpy_CCR4AULe7xi9ZqrWf7wX3UaTlI_oW8xOAV6WODMRICuSVwkerUMH3023i9CKrmw_2Bgo98YSXxTOpMzRRJ58QcdATo/") bottom right no-repeat; color: #cccccc; display: block; font-weight: normal; line-height: 35px; margin: 0px; padding: 0px 25px; text-align: center; text-decoration: none;
}
.menu li a:hover, .menu ul li:hover a { background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJGD6TNmnplvKHkUV21KFZOFPQccokD1rTcmHkCIHNZV93LC7s2gF4vM0Y0OshvJquL4b3Vg7zc1yJK6ODKS0XFoubbPzniT9n-u8iXazelM-fWB8UqyFHO3ILXMUMJTVl8Aj73GqCLCw/") bottom center no-repeat; color: #FFFFFF; text-decoration: none;
}
.menu li ul { background: #333333; display: none; height: auto; padding: 0px; margin: 0px; border: 0px; position: absolute; width: 225px; z-index: 200;
}
.menu li:hover ul { display: block;
}
.menu li li { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrg2yabhucoqGJswK8YMa9Samttk8GS6-hfxsZESHfV4V43aTRJK6Ih6aTR-lorNF2Yv03VrH3PZ-MST3CUVK17p-q_u-wyDTxvzMYaVHoOQyEBzhGEzQiE0_-GhIxtL0HmPrKzcECZqw/') bottom left no-repeat; display: block; float: none; margin: 0px; padding: 0px; width: 225px;
}
.menu li:hover li a { background: none;
}
.menu li ul a { display: block; height: 35px; font-size: 12px; font-style: normal; margin: 0px; padding: 0px 10px 0px 15px; text-align: left;
}
.menu li ul a:hover, .menu li ul li:hover a { background: #2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc4XVTmPscZQc5Zz29R5xw1XAO9yKFsaKr0yFBAkoI-oSTVLimlZ0NpNSt27DQjlEIWURIJR48TKyxvC4C0gnd3ZNPBI4M1wdcj3USNBwPX4heMUvNcI2i09Ager8UCLwCwL7decmwj_0/') center left no-repeat; border: 0px; color: #ffffff; text-decoration: none;
}
.menu p { clear: left;
}
</style>
<div class="menu">  <ul>    <li><a href="#" >Home</a></li>    <li><a href="#" id="current">Products</a>      <ul>        <li><a href="#">Sub Menu 1</a></li>        <li><a href="#">Sub Menu 1</a></li>        <li><a href="#">Sub Menu 1</a></li>        <li><a href="#">Sub Menu 1</a></li>      </ul>    </li>    <li><a href="/faq.php">FAQ</a>      <ul>        <li><a href="#">Sub Menu 2</a></li>        <li><a href="#">Sub Menu 2</a></li>        <li><a href="#">Sub Menu 2</a></li>        <li><a href="#">Sub Menu 2</a></li>      </ul>    </li>    <li><a href="#">Contact</a></li>  </ul>
</div>

Bagaimana? lumayan mudah kan membuatnya, di lain kesempatan akan kita buat lagi menu dropdown dengan tampilan yang lebih menarik tentunya.