Pengikut

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://lh3.googleusercontent.com/-gFAQMKL4pgM/TwRCDsvg6VI/AAAAAAAAUWQ/9d5MpcUv5LI/s1600/menu_bg.gif);
font:normal 18px/36px Arial, Helvetica, sans-serif;
float:left;
width:980px;
padding:0;
}
#menu li {
background:url(https://lh3.googleusercontent.com/-gFAQMKL4pgM/TwRCDsvg6VI/AAAAAAAAUWQ/9d5MpcUv5LI/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://lh3.googleusercontent.com/-gFAQMKL4pgM/TwRCDsvg6VI/AAAAAAAAUWQ/9d5MpcUv5LI/s1600/menu_bg.gif);
display:block;
float:left;
}
#menu li span{
background:url(https://lh6.googleusercontent.com/-z4RWmllD834/TwRCBkfDDxI/AAAAAAAAUV4/x7Zb2x3khas/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://lh6.googleusercontent.com/-YlKLpa3YYjQ/TwRCGYl8QYI/AAAAAAAAUWk/BXxZS25kbqs/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://lh6.googleusercontent.com/-0ZqyXhOjKwU/TwRCEUrEpUI/AAAAAAAAUWg/4Su-OLYXnQI/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>
<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>
9. Nah sekarang Simpan Template
10. Selanjutnya sobat cari kode yang mirip dengan kode di bawah 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><!-- end 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.
<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

Posting Komentar

  1. Boleh di Coba nih.... Nice Shared Sobat... :D

    BalasHapus
  2. iya silahkan dicoba gan, terimakasih atas kunjungan nya sobat!
    moga sehat selalu

    BalasHapus
  3. Balasan
    1. terima kasih udah mampir ke blog saya, jangan bosen-bosen deh OK

      Hapus
  4. Balasan
    1. yes, thanks for the compliment, do not be bored to stop by my blog friend.

      Hapus
    2. bang sayah kga ngerti nih ??/

      Hapus
    3. maksudnya kagak ngerti apanya ?
      gak ngerti sama trik nya atau sama komen saya, kalo kome saya yang atas artinya "ya, terimaksih atas komentarnya, jangan bosen-bosen berkunjung ke blog saya, sobat" gitu !!!

      Hapus
  5. tandai dulu gan...ntar siap praktekin... :)

    BalasHapus
  6. aih pusingnya bagi pemula kayak saya ini gan

    BalasHapus
    Balasan
    1. gak usah diambil pusing gan kan ada tutor nya, maju terus gan

      Hapus
  7. mau nanya neh gan?kan menu drop down udah ane buat, nah terus gimana caranya supaya waktu saya klik yang menu game bisa link ke post2 yang udah saya buat yang berlabel games (lebih dari 1 post) kalo cuman 1 kan ane tinggal ganti # dengan URL yang dituju kalau banyak gimana?

    BalasHapus
    Balasan
    1. ya tinggal ganti url nya dengan url label game tersebut, makasih

      Hapus
  8. Balasan
    1. sama sama gan, makasih juga buat kometarnya..!

      Hapus
  9. Klik disini gan http://goo.gl/Rcfd2 tema premium terbaru update 2013 gratis keren2 gan

    BalasHapus
  10. keren gan, ini yang gue cari selama ini. Tapi cara pemasanganya cukup rumit juga sih.
    Thanks gan, visit blog gue Just-MyLifeStory.blogspot.com

    Info blog agan keren abis dh.. maju terus boytricks

    BalasHapus
    Balasan
    1. sama sama gan, makasih buat kunjingan+komen+pujiannya, salam blogger

      Hapus
  11. makasih gan.. shrenya membantu saya dah.. saya tunggu artikel barunya.

    BalasHapus
    Balasan
    1. siip gan ane bahagia kalo bisa membantu,, pahala juga kan
      buat ane

      Hapus
  12. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  13. Asslm, menunya sdh keluar Mas, tapi sub menunya kok gak bisa ya?

    BalasHapus
    Balasan
    1. ada error kali mas di kodenya,, coba cek lagi dan bandingkan dengan tutor yang lain.. makasih...

      Hapus
  14. izin copas di blog saya mas bro, berguna banget nih buatku...

    BalasHapus
    Balasan
    1. silahkan, tapi kalo gak keberatan serakan link sumber blog nya

      Hapus
  15. benar-benar membantu agan...super sekali....
    ane coba yach....

    salam maniak kopi....
    www.greencoffeeaslee.blogspot.com

    BalasHapus
  16. makasih banget ni mas rifky sebelumnya..
    tapi kok sub menu setelah hover, langsung tertutup lagi ya??
    apa ada settingan lagi??
    makasih..

    BalasHapus
  17. Pada saat menyentuh tag A nya apa melakukan paddingLeft dengan animate ?

    BalasHapus

Silahkan berkomentar, komentar sobat adalah inspirasi saya !!