Senin, 01 Oktober 2012

Cara Membuat Menu Horizontal Drop Down Animasi Untuk Blog


By on 21.46

JQuery - Bagi kamu yang ingin memiliki menu drop down yang keren, kamu bisa membuat menu horizontal drop down dengan animasi ini, ketika drop down nya muncul akan memberikan efek animasi yang keren. Cara membuatnya juga gampang dan simpel, tidak ribet bahkan kamu bisa utak atik desain tampilannya.


1. Login ke blog kamu
2. Pilih Template > Edit HTML > Cari kode </head>
3. Letakan kode di bawah ini tepat di atas kode </head>
<style>
#coolMenu,
#coolMenu ul {
    list-style: none;
}
#coolMenu {
width:980px;
    float: left;
}
#coolMenu > li {
    float:left;
}
#coolMenu li a {
display: block;
   
    padding: 5px 10px 5px 10px;
    text-decoration: none;
}
#coolMenu ul {
    position: absolute;
    display: none;
        z-index: 999;
}
#coolMenu ul li a {
    width: 30px;
 float:left;
padding: 5px 10px 5px 10px;
}
#coolMenu li:hover ul {   
}
/* Main menu
------------------------------------------*/
#coolMenu {
    font-family: Arial;
    font-size: 12px;
    background: #2f8be8;
margin:0 auto;padding:0 auto;  
background: #02b0cf;
padding-left:3px;
border-bottom:1px solid #ccc;border-top:2px solid #ccc;
}
#coolMenu > li > a {
    color: #fff;
    font-weight: bold;
padding:8px 10px 8px 10px; 
}
#coolMenu > li:hover > a {
    background: #f09d28;
    color: #000;

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

}

/* Submenu
------------------------------------------*/
#coolMenu ul {
    background: #f09d28;
padding:3px 5px 3px 5px;
}
#coolMenu ul li a {
    color: #000;
width:100px;
}
#coolMenu ul li:hover a {
    background: #ffc97c;
    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(function(){
    $('#coolMenu').find('> li').hover(function(){
        $(this).find('ul')
        .removeClass('noJS')
        .stop(true, true).slideToggle('fast');
    });
});
</script>
Kode yang berwarna biru adalah kode lebar menu nya, jadi sesuaikan dengan blog kamu.
Kode yang berwarna merah adalah warna background menu nya.
Kode yang berwarna ungu adalah warna background sub menu nya.

4. Simpan Template
5. Ini adalah kode HTML Menu Drop Down Animasi.
<ul id="coolMenu">
    <li><a href="http://blazerracing.blogspot.com">Home</a></li>
    <li><a href="#">Health</a></li>
    <li>
    <a href="#">Blogger</a>
    <ul class="noJS">
        <li><a href="#">jQuery</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">Widget</a></li>
    </ul>
</li>
<li>
    <a href="#">Resep</a>
    <ul class="noJS">
        <li><a href="#">Dessert</a></li>
        <li><a href="#">Chicken</a></li>
        <li><a href="#">Drink</a></li>
<li><a href="#">Cake</a></li>
<li><a href="#">Breakfast</a></li>
<li><a href="#">Soup</a></li>
<li><a href="#">Pasta</a></li>
<li><a href="#">Seafood</a></li>
    </ul>
</li>
    <li><a href="#">Naruto Episode</a></li>
  <li>
    <a href="#">More</a>
    <ul class="noJS">
        <li><a href="#">Kode Warna</a></li>
        <li><a href="#">Get This Menu</a></li>
       
    </ul>
</li>
</ul>
Ganti tanda pagar dengan URL yang dituju.
6. Sekarang untuk memasang menu nya, kamu bisa gunakan salah satu cara di bawah ini.
(Copy kode nomor 5 ke 2 cara di bawah ini, pilih salah satu saja, dan ikuti instruksinya.)

Cara 1 : Add Gadget > HTML/Java Script > Copy kode nomor 5.
Cara 2 : Template > Edit HTML, Kamu cari kode bagian header blog kamu, untuk lebih mudah cari kode ini <div id='header-wrapper'>  biasanya, kodenya kaya di bawah ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blazer Blog (Header)' type='Header'/>
</b:section>
</div><!-- end header-wrapper -->
NANTI KODE NOMOR 5 NYA LETAKAN DISINI DI BAWAH KODE AKHIR HEADER
Copy kode nomor 5 ke 2 cara di atas, ke HTML/JavaScript atau cara ke-2 letakan ganti kata-kata berwarna merah dengan kode nomor 5.

Notice:
Jika cara 1 gagal, berarti kamu harus gunakan cara ke 2 pasti berhasil.
Jika menggunakan cara ke-2 sebaiknya klik dulu PERTINJAUAN untuk menentukan berhasil tidaknya. Setelah berhasil bari SIMPAN TEMPLATE.

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

40 komentar:

  1. gan klo bikin menu dropdown kayak punya agan itu gimana ya menu yang tidak bergerak/tetap nempel diatas biarpun mouse digeser ke bwah,,,,bagi2 dung ilmunya,,alnya saya cari kesana kemari kagak nemu2 dri kemaren,,,thnks n salam persahabatan selalu d tunggu ya tutorialnya,,,

    BalasHapus
  2. Ya pasti ga ada mas karena itu belum ada di Indonesia kecuali blog ane hehehe,tapi entar ane bikinin agak beda dengan punya saya.

    BalasHapus
  3. nice info gan.
    akan aku coba gan ke blog ane.
    ni gan blog ane.
    www.myfos.net.tc

    BalasHapus
  4. keren boy info artikelnya....

    ditunggu kunjungan baliknya yaaaaaaa

    http://88-revolutionaryrebellion.blogspot.com/

    BalasHapus
  5. Mantap gan ...berhasil nice info
    gw baru belajar buat blog langsung bs diterapkan
    penjelasannya ga membingungkan!

    http://chindokoeberbagi.blogspot.com

    BalasHapus
  6. kok dah jadi tapi gak bisa diedit tabnya tadi????? gimana carannyaaaa?

    BalasHapus
  7. gan biar sub menu nya pas disorot muncul ke bawah gmana,,,? kan tutor punya agan ke samping,,,
    makasih gan atas info nya...

    http://www.belajar-it.cc.cc/

    BalasHapus
  8. Kan itu submenunya munculnya ke bawah kan. Sebenarnya maksud agan gimana.

    BalasHapus
  9. susah sob...gagal terus saya...bingung juga. @-@

    BalasHapus
  10. saya "<*div id='header-wrapper'>" gk ada,
    ada solusi gak ?
    beles ke blackhaseo1@yahoo.co.id

    BalasHapus
  11. jika tidak ada ini solusinya:
    Cari judul header anda, misal: Blazer Blog, anda cari dengan cara klik CTRL+F lalu ketik judul blog.
    Biasanya kayak gini mas
    Blazer Blog (Header)

    BalasHapus
  12. keren gan infonya....

    http://himitsukaze.blogspot.com/

    BalasHapus
  13. mantap sob makasih , jangan lupa add blog saya, sepi lum ad teman heheh

    BalasHapus
  14. sub menu nya kan disitu desert, biar pas di klik ada isinya gmana?

    maksud saya, gmana cara masukin postingan kita ke kategori dessert itu...

    BalasHapus
  15. saya suka blok anda tentang cara membuat menu horizontal drop down, saya berharap untuk melihat lebih banyak dari anda. apakah anda menjalankan situs lain????

    BalasHapus
  16. http://sukeypanggilanku.blogspot.com

    saya mau postingan saya no.1 di mesin pencari google !!!

    Gimana caranya gan ???

    BalasHapus
  17. sub menunya tadinya malah horizontal,, dan setelah diedit malah tidak kelihatan...
    agar dia kelihata sejarajr kebawah,, caranya gimna ya...

    tintaislami.com

    BalasHapus
  18. ini yang dicari-cari. makasih banyak gan sudah share tutorialnya.

    BalasHapus
  19. kok dropdownnya horizontal? vertikal bisa?

    BalasHapus
  20. saya udah ikutin tutor di atas, tapi koq submenunya jadi berjejer ke samping (horizontal) ge muncel vertikal ke bawah??

    BalasHapus
  21. ohh bgitu toh gan
    Nanti ane praktekinn dehh :D
    Thanks

    BalasHapus
  22. Utk link home nya berhasil, tp untuk link yang selanjutnya kenapa g bisa y ? coba di cek di www.faktaunik-ds.blogspot.com dan klik menu facebook kemudian lihat urlnya , ko jd double alias tumpang tindih urlnya sih ?
    mohon bantuan

    BalasHapus
  23. Saya coba dulu yah di blog sya yg lain, makasih

    BalasHapus
  24. keren menu horizontalnya gan, ijin mempraktekkan ya...

    BalasHapus
  25. gan ane cpas scriptnya dan smoga berhasil, dan thanks ya gan,,moga manfaat.?

    BalasHapus
  26. makasih infonya kunjungan balik ya http://realeffingdeal-ind.blogspot.com/

    BalasHapus
  27. gan minta scriptnya ya....makasih

    BalasHapus
  28. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  29. mantap gan
    terima kasih infonya
    http://gphone.16mb.com/

    BalasHapus
  30. gan, udah ane coba hasilnya menu drop down nya kok kesamping / horisontal kok bukan ke bawah / vertikal, ditunggu jawabannya gan, hehe

    http://bisniskitaoke.blogspot.com/

    BalasHapus
  31. follow blog saya ..

    http://afifatu-fachrudin.blogspot.com/

    BalasHapus
  32. Keren Gan,,Jangan Lupa Kunjungi Blog Ane http://tersembunyi-007.blogspot.com/

    BalasHapus
  33. Thank's tutorial drop down menunya gan langsung dicoba diblog yg blm dipublikasi,tapi sub menunya kenapa ga bisa "down" gan ?Tetapi nyamping 2 baris.
    Kunjungi blogku ya http://nectura-formula-dahsyat-4u.blogspot.com

    BalasHapus
  34. Satu problem lagi gan,tuh sub menu kan mesti diisi materi gimana tuh cara ngisinya ? Dah kucoba tidak bisa.
    Tanda # diganti URL yg dituju maksudnya gimana? Sorry maklum super gaptek nih,ditunggu infonya.

    salam sukses

    BalasHapus
  35. terimakasih banyak gan atas infonya, mudah-mudahan bermanfat bagi kita semua, amien

    BalasHapus
  36. mantap bener artikelnya,,, kapan-kapan ane berkunjung lagi gan..

    BalasHapus
  37. Selamat malamgan, maksih dah share tentang cara atau tutorial di atas, langsung bisa ane praktekin di blog ane gan, www.rangga-atmajaya.com dan ternyata berhasil. makasih banyak, dan ane udah follow blog ente gan, jangan lupa di follow back, kita sebagai blogger indonesia yang peduli terhadap sesama, makasih sekali lagi. Salam Blogger Indonesia

    BalasHapus
  38. tq gan work
    mampir juga ya di bisniskrisna.co.vu

    BalasHapus
  39. thanks info'x gan, sangat bermanfaat sekali bagi saya ..

    BalasHapus
  40. Kok saya malah hilang siih blog.a ?

    BalasHapus