Cara Membuat Menu Horizontal Drop Down Animasi Untuk Blog

Selasa, 13 November 2012

Cara Membuat Menu Horizontal Drop Down Animasi Untuk Blog

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>
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.

Mungkin yang anda cari :

blog