| Tweet |
Salam blogger, pada kesempatan ini saya akan sedikit berbagi ilmu blogger yaitu Cara
Membuat Menu Drop Down Dengan Animasi. Apakah kamu mau mempunyai Menu
Drop Down yang cantik, jika kamu tidak memakai menu drop down, saya akan
memberitahu anda bagaimana Cara Membuat Menu Horizontal. Drop Down Dengan Animasi, dengan bantuan CSS dan jQuery kita bisa membuat menu drop down animasi.
Untuk
membuka menu drop down nya klik tanda panah yang ada disebelah kata
TOP, Atau Lifestyle maka menu nya akan langsung terbuka. Baiklah
langsung saja cara membuat nya.
Berikut langkah-langkah membuat menu Drop Down Animasi :
1. Login ke account blogger sobat
2. klik menu template
3. kemudian pilih Edit Html
4. pilih lanjutkan untuk masuk ke html
5. setelah masuk ke bagian Edit html jangan lupa centang kotak kecil di pojok
kiri yang bertuliskan "expand template widget"
6. kemudian cari kode ]]></b:skin> ,agar pencarian lebih mudah sobat tekan
tombol ctrl+f lalu ketik kode tersebut
7. lalu copy kode dibawah ini dan letakan diatas kode tadi
#menu {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMehC0Zf8d7rUyM02a2PstzmidGjS5P45qjSREO5Ay9jHZ_1bRODQ9YlITUqB1hPPBgJqI5t0l52WZ6eh2_X8HdABzFH0wxLRSa46Od0gSGBklkF7ZPmNNfobcvSGwDiopBIbAqAVYaXee/s1600/menu_bg.gif);
font:normal 18px/36px Arial, Helvetica, sans-serif;
float:left;
width:980px;
padding:0;
}
#menu li {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMehC0Zf8d7rUyM02a2PstzmidGjS5P45qjSREO5Ay9jHZ_1bRODQ9YlITUqB1hPPBgJqI5t0l52WZ6eh2_X8HdABzFH0wxLRSa46Od0gSGBklkF7ZPmNNfobcvSGwDiopBIbAqAVYaXee/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/AVvXsEgMehC0Zf8d7rUyM02a2PstzmidGjS5P45qjSREO5Ay9jHZ_1bRODQ9YlITUqB1hPPBgJqI5t0l52WZ6eh2_X8HdABzFH0wxLRSa46Od0gSGBklkF7ZPmNNfobcvSGwDiopBIbAqAVYaXee/s1600/menu_bg.gif);
display:block;
float:left;
}
#menu li span{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVVtBzTTmNz-08P_Wh0OpzQ0nF9ypsvLpOzCyd_ftfMvKiposc9WvL8dRgIsTLz8ZtAspCa5Dh_y9io6kvIzEXJApy1wIFVvtAP9-tthPpRcvkPma_6mj3hH0WWPDRNHLvrKJq60ZHt0Zk/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/AVvXsEizfYV8vlTlTvQc3rdrZFqzsULJxSSYV5zHiLH77pW0Ay1CVJ71zdhr6VPaKIjGFCa12WX4O-I8-ps_pcnbpIpMmV7UsN3T1Vl_kgmzrNnq0BFgdXub9IqTZgi4MgJDlh2Z8C2HbRaf268T/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/AVvXsEipL2eplSSF2aGOT3W3rCxT8QnPBFQlsRY8gv9sAzGVdrp0MAxHPO5voTBhL3_Pfej763IyCGIamX9QIUSdsK7Lu587ecotbOQ74qN6bAQ1sBc3c9JHX4-u5ER2h0lSqoQzDiJV0cz_5vj_/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.
8. Etz jangan disimpan dulu, sobat cari lagi kode </head> dan copy kode
dibawah ini lalu letakan diatas kode </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>9. Nah sekarang Simpan Template
<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>
10. Selanjutnya sobat cari kode yang mirip dengan kode di bawah ini
<div id='header-wrapper'>Kode datas merepukan kode bagian Header, takut setiap blog berbeda, coba cari saja yang ada kata (Header) setelah ketemu letakan kode di bawah ini tepat di bawah kode diatas yang nomor 10. Intinya cari kode bagian header anda supaya lebih mudah, apa nama judul blog anda yang di header misal judul nya Tips dan Trik, Cari saja kata Tips dan Trik.
<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><!-- end header-wrapper -->
<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>
Keterangan :
Ganti kata-kata yang dicetak tebal dengan kata-kata lainnya.Ganti tanda # dengan URL yang dituju.
Simpan dan lihat hasilnya.
Jika ada masalah atau unek-unek sobat comment saja dibawah ini.
Selamat mencoba dan semoga bermanfaat
0 Comments
