Membuat Menu Horizontal Dropdown

Ahmad Fawzan Rohman Selasa, Juni 19, 2012

Bagaimana membuat menu horizontal dropdown seperti menu diatas, dan caranya pun cukup mudah tinggal ikuti langkah langkah berikut :

1. Login ke Blog kamu.

2. Pilih Rancangan > Pilih EDIT HTML.

3. Cari kode ]]></b:skin> setelah ketemu letakan kode dibawah ini tepat di atas kode ]]></b:skin>

#menu {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAGzQRMglRY1V-Z5At5HH2yaJEkO-FnW_cYwkSWdY7ScOOET_6yrP5AqliytYEoy3QJRiC9kWeMhtMv9qymgc5XuP7-a4r4V6kBWLuhUKkBD_N2VuKKlWNr9MgF7n1HEK22slxwzrsamGt/s1600/menu_bg.gif);
font:normal 18px/36px Arial, Helvetica, sans-serif;
float:left;
width:987px;
padding:0;
}
#menu li {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAGzQRMglRY1V-Z5At5HH2yaJEkO-FnW_cYwkSWdY7ScOOET_6yrP5AqliytYEoy3QJRiC9kWeMhtMv9qymgc5XuP7-a4r4V6kBWLuhUKkBD_N2VuKKlWNr9MgF7n1HEK22slxwzrsamGt/s1600/menu_bg.gif);
list-style:none;
padding:0;
margin:0;
float:left;
position:relative;
}
#menu li a{
color:#bfbfbf;
text-decoration:none;
padding-left:15px;
padding-right:10px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAGzQRMglRY1V-Z5At5HH2yaJEkO-FnW_cYwkSWdY7ScOOET_6yrP5AqliytYEoy3QJRiC9kWeMhtMv9qymgc5XuP7-a4r4V6kBWLuhUKkBD_N2VuKKlWNr9MgF7n1HEK22slxwzrsamGt/s1600/menu_bg.gif);
display:block;
float:left;
}
#menu li span{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFTi9S_KthnFjDddpqfIKknxklNmr37SJxrk5p5YQVM775cBuDg3JXLhl_sQVDixn3Z13faj1ThqEqSzZOOUEMopLWFwdGHAR5sE3DojNj-yWOwMtRu-zQRgvAniLyQv-FJRdcbplxKelm/s1600/arrow.png) no-repeat 0 12px ;
width:20px;
height:35px;
/*display:inline-block;*/
float:left;
/*top:-35px;*/
/*position:relative;*/
cursor:pointer;
}
#menu li ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSQn71ND8jgzDKLUAXcczuKnG05PRNoGCD2lXEikRNpzJDSnORj8_R-s-x9E91o0qr_6y_IHXY7kL699jGRcP1O5im8jH11hEmOHo__gGOCy5bMGpgRU8yedEXcyBfmg-vWqM951v73AaS/s1600/submenu_bg.gif) no-repeat right bottom;
padding:0;
font-size:15px;
display:none;
width:250px;
z-index:5;
position:absolute;
margin:0;
float:left;
left:0;
top:36px;
}
#menu li ul li{
background:none;
width:250px;
overflow:hidden;
line-height:25px;
}
#menu li ul a{
background-image:none;
border-bottom:1px solid #171717;
border-top:1px solid #545454;
border-left:1px solid #171717;
width:237px;
}
#menu li:hover ul{
}
a:active, a:visited {
outline:none;
}
.overRed {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYHAABOaixruUxNWuu8g8hnEGaxV5OGIfVab4mCbhT7EHTs905ZzQDIj6uXitQuvQx2we_h6fN1oS6BZFEvo7XuQjKjH8A09FuU2OF4Xpsnwis9Cgc2PA2TRurd6eGs3AYA5StNnXv5AiR/s1600/over_red.png) no-repeat left top !important;
color:#FFFFFF !important;
border-left:none !important;
border-right:none !important;
}

Jika lebar nya tidak sesuai dengan Blog anda, anda boleh ubah kode yang berwarna biru dari 980px menjadi 1000px atau jika terlalu besar anda boleh memperkecil lebar nya. Terserah anda saja.

4. Selanjutnya Cari kode </head> setelah ketemu letakan kode dibawah ini tepat di atas kode </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("ul.submenu").parent().append("<span></span>");
$("ul#menu li a, ul#menu li span").click(function(){
$(this).parent().find("ul.submenu").animate({height: 'show', opacity: 'show'}, 'slow');
})
$("ul#menu li").not("ul#menu li ul li").hover(function(){
}, function(){
$(".submenu").animate({height: 'hide', opacity: 'hide'}, 'slow');
})
$(".submenu li a").hover(function(){
$(this).animate({paddingLeft: "30px"}, 'fast') ;
$(this).addClass("overRed") ;
},
function(){
$(this).animate({paddingLeft: "15px"}, 'fast') ;
$(this).removeClass("overRed") ;
}
)
})
</script>

5. Simpan Template nya.
6. Cari kode yang mirip dengan dibawah ini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Demo Blazer Blog (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>
<div style='clear:both;'/>
</div>

Kode datas merupakan kode bagian Header, dan mungkin ada yag berbeda coba cari saja yang ada kata (Header) setelah ketemu letakan kode di bawah ini tepat di bawah kode diatas yang nomor 6.

<ul id='menu'>
<li><a href='alamat blog kamu'>Home</a></li>
<li><a href='#'>Top</a>
<ul class='submenu'>
<li><a href='#'>Design</a></li>
<li><a href='#'>Development</a></li>
<li><a href='#'>Freebies</a></li>
<li><a href='#'>Inspiration</a></li>
<li><a href='#'>Resources</a></li>
<li><a href='#'>Tutorials</a></li>
<li><a href='#'>Wordpress</a></li>
</ul>
</li>
<li><a href='#'>Lifestyle</a>
<ul class='submenu'>
<li><a href='#'>Food</a></li>
<li><a href='#'>Health</a></li>
<li><a href='#'>Travelling</a></li>
</ul>
</li>
<li><a href='#'>Entertainment</a>
<ul class='submenu'>
<li><a href='#'>Celebs</a></li>
<li><a href='#'>Music</a></li>
<li><a href='#'>Movie</a></li>
</ul>
</li>
<li><a href='#'>News</a>
<ul class='submenu'>
<li><a href='#'>Nasional</a></li>
<li><a href='#'>Internasional</a></li>
<li><a href='#'>Indonesiaku</a></li>
</ul>
</li>
<li><a href='#'>Sports</a>
<ul class='submenu'>
<li><a href='#'>Sepakbola</a></li>
<li><a href='#'>Basket</a></li>
<li><a href='#'>MotoGP</a></li>
</ul>
</li>
<li><a href='#'>Download</a>
<ul class='submenu'>
<li><a href='#'>Mp3</a></li>
<li><a href='#'>Video</a></li>
<li><a href='#'>Movie</a></li>
</ul>
</li>
<li><a href='#'>Technology</a>
<ul class='submenu'>
<li><a href='#'>Gadget</a></li>
<li><a href='#'>Software</a></li>
<li><a href='#'>Computer</a></li>
<li><a href='#'>Handphone</a></li>
</ul>
</li>
<li><a href='#'>Blogger</a>
<ul class='submenu'>
<li><a href='#'>Tips Blog</a></li>
<li><a href='#'>Tutorial Blog</a></li>
<li><a href='#'>CSS</a></li>
<li><a href='#'>jQuery</a></li>
</ul>
</li>
</ul>