19 Membuat Menu Drop Down di Blog

Membuat menu drop down untuk mempercantik tampilan blog memang harus dilakukan. Mengapa tidak, Banyak blog pada saat ini seakan-akan mewajibkan fitur menu drop down ini ada di blog mereka. Terasa sangat kurang jika seorang blogger tidak menambahkan atau membuat menu drop down seperti ini. Salah satu manfaat membuat menu drop down adalah agar para pengunjung bisa dengan mudah menemukan artikel-artikel lain dalam blog tersebut. Membuat menu drop down di blog juga dapat meringkas tempat untuk memberikan informasi-informasi lebih kepada para pengunjung.

Membuat menu drop down sebenarnya sangat mudah untuk dilakukan. Cara ini bisa dipakai untuk blog yang belum ada fitur menu drop downnya atau untuk blog yang memang sudah ada. Ada dua cara yang bisa anda pakai untuk menempatkan menu drop down ini. Pertama bisa anda tempatkan di header, kedua bisa anda tempatkan di sidebar blog. Contoh tampilannya nanti akan terlihat seperti gambar di bawah ini.




Oke langsung saja, langkah-langkah untuk membuat menu drop down.

1. Masuk ke akun blogger.
2. Pilih Template > Edit HTML
3. Centang "Expand Template Widget"
4. Cari kode </head>. Anda bisa memakai Ctrl + F
3. Letakan kode di bawah ini tepat di atas kode </head> tadi

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

Keterangan :
Kode yang berwarna biru adalah kode lebar menu, anda sesuaikan sendiri dengan blog anda nanti.
Kode yang berwarna merah adalah warna background menu.
Kode yang berwarna ungu adalah warna background sub menu. Silakan ganti sesuai selera anda.

4. Simpan Template
5. Berikut ini adalah kode HTML Menu Drop Down nya.

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

6. Ganti tanda pagar di atas dengan URL yang ingin anda tuju.
7. Sekarang untuk memasang menu drop downnya, Anda bisa memiih 2 cara berikut ini, atau pakai kedua-duanya juga tidak apa-apa.
(Copy HTML Menu Drop Down nomor 5 tadi ke 2 cara di bawah ini. Pilih salah satunya)

Cara 1 : Add Gadget > HTML/Java Script >Paste 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 seperti 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 -->
KODE NOMOR 5 NYA LETAKAN DISINI DI BAWAH KODE AKHIR HEADER

Kalau template saya kodenya saya tempatkan setelah kode

<b:section class='header' id='kepala-kanan' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blogg Uji Coba (Header)' type='Header'>
<b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>

Membuat Menu Drop Down di blog gampang bukan? Oke itu aja pelajaran kali ini. semoga bisa mempraktekannya. cara ini sudah saya uji dan berhasil.

Baca Juga Artikel Lainnya :

• Membuat Menu Horizontal di Blog