Cara Membuat Menu Dropdown Horizontal

Pada kesempatan ini saya akan share tutorial tentang bagaimana cara membuat menu dropdown horizontal pada blogger. Mungkin kalau dicari di google, pasti sudah banyak yang tau, tapi berhubung saya juga masih amatir, saling berbagi saya rasa juga tidak masalah. :D

Oke sebelum masuk ke tutorialnya, silakan diliat-liat dulu screenshotnya. cekidot :D

Bagaimana?? anda tertarik??
Bagi anda yang tertarik, anda bisa menerapkannya pada blog anda. Caranya mudah, ikuti langkah-langkah berikut:

1. Silakan login dulu ke blogger anda.
2. Masuk ke menu Template.
3. Saya sarankan untuk mem-backup template anda terlebih dahulu (untuk berjaga-jaga saja).
4. Kemudian pilih Edit HTML dan jangan ragu-ragu untuk tekan 'Lanjutkan' :D

5. Cari kode ]]></b:skin>
6. Letakkan kode berikut ini dibawah kode no. 5 tadi

<style type='text/css'>

ul#topnav {margin: 0; padding: 0;float: left;width: 960px;list-style: none;position: relative;font-size: 1.2em;background: #383838;}ul#topnav li {float: left;margin: 0; padding: 0;border-right: 1px solid #fff;}ul#topnav li a {padding: 7px 15px;display: block;color: #f0f0f0;text-decoration: none;}ul#topnav li:hover { background: #1376c9 url() repeat-x; }ul#topnav li span {float: left;padding: 5px 15px 0;position: absolute;left: 0; top:30px;display: none;width: 100%;background: #1376c9;color: #fff;-moz-border-radius-bottomright: 5px;-khtml-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px;-moz-border-radius-bottomleft: 5px;-khtml-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;}ul#topnav li:hover span { display: block; }ul#topnav li span a { display: inline; }ul#topnav li span a:hover {text-decoration: underline;}</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>$(document).ready(function() {

$("ul#topnav li").hover(function() { //Hover over event on list item$(this).css({ 'background' : '#1376c9 url() repeat-x'}); //Add background color + image on hovered list item$(this).find("span").show(); //Show the subnav} , function() { //on hover out...$(this).css({ 'background' : 'none'}); //Ditch the background$(this).find("span").hide(); //Hide the subnav});

});</script>

7. Kemudian simpan perubahan HTML anda dan masuk ke "Tata Letak"
8. Tambah Gadget >> HTML/JavaScript

9. Masukkan kode berikut

<ul id="topnav">
<li><a expr:href='http://best-inspire.blogspot.com'>Home</a></li>
<li><a href='http://best-inspire.blogspot.com/search/label/Komputer'>Komputer</a>
<span>
<a href='http://best-inspire.blogspot.com/search/label/Game'>Game</a> |
<a href='http://best-inspire.blogspot.com/search/label/Software'>Software</a> |
<a href='http://best-inspire.blogspot.com/search/label/Tips%20Komputer'>Tips Komputer</a> |
</span>
</li>
<li><a href='http://best-inspire.blogspot.com/search/label/Islamic'>Islam</a></li>
<li><a href='http://best-inspire.blogspot.com/search/label/Tutorial%20Blogger'>Tutorial Blogger</a></li>
<li><a href='#'>Pengetahuan</a>
<span>
<a href='http://best-inspire.blogspot.com/search/label/Budaya'>Budaya</a> |
<a href='http://best-inspire.blogspot.com/search/label/Cosmology'>Cosmology</a> |
<a href='http://best-inspire.blogspot.com/search/label/Dunia'>Dunia</a> |
<a href='http://best-inspire.blogspot.com/search/label/Kesehatan'>Kesehatan</a> |
</span>
</li>
<li><a href='http://best-inspire.blogspot.com/search/label/Aplikasi%20HP'>Aplikasi HP</a></li>
<li><a href='#'>Tips</a>
<span>
<a href='http://best-inspire.blogspot.com/search/label/Life%20Style'>Life Style</a> |
<a href='http://best-inspire.blogspot.com/search/label/Sosial'>Sosial</a> |
</span></li>
<li><a href='#'>Uncategorized</a>
<span>
<a href='http://best-inspire.blogspot.com/search/label/ceritaku'>Ceritaku</a> |
<a href='http://best-inspire.blogspot.com/search/label/Puisi'>Puisi</a> |
<a href='http://best-inspire.blogspot.com/search/label/SMS%20Unik'>SMS Unik</a> |
</span></li>
<li><a href='#'>Link Exchange</a>
<span>
<a href='http://best-inspire.blogspot.com/2010/09/friends-links.html'>Banner Links</a> |
<a href='http://best-inspire.blogspot.com/2010/09/text-links.html'>Text Links</a> |
</span></li>
</ul>

10. Ganti alamat link dan nama menu sesuai yang anda inginkan dan simpan

Apakah berhasil??? semoga iya :D