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

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

Keterangan: