Jumat, 15 Februari 2013

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.


Membuat Menu Drop Down di Blog

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 :

17 komentar:

Trisna Sastradi mengatakan...

bagus sekali sob,,,,,, thx infonya...
jgn sungkan ke blog saya
www.mediafunia.blogspot.com

diki sulaeman mengatakan...

terimakasih informasinya saya akan coba pasang

Khaidir Rifani mengatakan...

Thanx infonya :) , Bagus buat saya yang pemula !

ulfa rahmah mengatakan...

terima kasih sob
udah saya pake keren

Adhitya mengatakan...

makasih bro infonya, tp memang tidak semua blog bisa support ini script.

Bahrul Ilmi mengatakan...

Thanks atas sharing ilmunya, saya mau coba pelajari scriptnya dulu. jika sobat berkenan silahkan visit back ke Softrickinfo.

Yoga Prasetya mengatakan...

Wah thx banget nih bro, sudah saya coba dan berhasil :)
Tapi yang saya bingung, setelah kita masuk suatu artikel menu dropdown tersebut hilang dan tidak muncul, jadi hanya ada di home. Tolong pencerahannya :)
Kalau mau belajar programming bisa kunjungi blog saya :)
Komen pake link Programming

Handy Mukti mengatakan...

kunjungin http://eichcorporation.blogspot.com/
rada berantakan > pengen komennya apa yg kurang dari segi viewer pengunjung

cara menghasilkan uang dari internet mengatakan...

kayaknya perlu dicoba ni....bookmark dulu gan

Ali Muhammad Hanafiyah mengatakan...

ini yg paling akurat,terima ksih sudah membantu . . .
visit my blog
http://electrozone94.blogspot.com/

dani ramdani mengatakan...

Muantab, makasih Nurul

Adieba Warda mengatakan...

klo <div id='header-wrapper' gak ada gmn ?

Acep Gafar mengatakan...

posisinya gak ngepas melulu...... gimana tuh

113761358949183443836 mengatakan...

thx gan buat ilmunya langsung praktek nih

dha fairydha mengatakan...

thanks ilmunya
cuma ini yang pas
tapi kalau background menunya pingin transparant gimana ya?

jilbab syar'i mengatakan...

yang membedakan apa yah gan menu drop down sama menu horizontal ?
grosir jilbab murah

aris wibowo mengatakan...

timakasih info ya sangat membantu

- kunjungi punyak ane
jagatsatrya.blogspot.co.id

Posting Komentar

◄ Newer Post Older Post ►