Cara Membuat Menu Drop Down Di Blog

Cara Membuat Menu Drop Down Di Blog - Kali ini saya share Cara Membuat Menu Drop Down Di Blog. Menu drop down ini sangat cocok untuk web/blog yang bertema kesehatan dan lain-lain. Fitur-fitur yang ada dalam meni ini antara lain, efek animasi ketika drop down nya muncul, warna hijau yang mengkilau. Berikut ini adalah tampilan menu drop down di blog :
http://1.bp.blogspot.com/-rA645fiTscs/UGrqwGjX-AI/AAAAAAAAF6I/_2R8Fq1Guvk/s1600/Green+Drop+Down+Menu.png
Berikut Cara Membuat Menu Drop Down Di Blog :
1. Login ke akun blogger kamu.
2. Klik template >> Edit HTML.
3. Tekan CTRL + F.
4. Letakkan kode berikut ini tepat DIATAS kode ]]></b:skin>
#blazerMenu,
#blazerMenu ul {
    list-style: none;
}
#blazerMenu {
width:980px;
    float: left;
}
#blazerMenu > li {
    float:left;
}
#blazerMenu li a {
display: block;
 
    padding:8px 16px 8px 16px;
    text-decoration: none;
}
#blazerMenu ul {
    position: absolute;
    display: none;
        z-index: 999;
}
#blazerMenu ul li a {
    width: 30px;
 float:left;
}
#blazerMenu li:hover ul { 
}
/* Main menu
------------------------------------------*/
#blazerMenu {
    font-family: Arial;
    font-size: 12px;
    background: #2f8be8;
margin:0 auto;padding:0 auto;
background: transparent;
padding-left:3px;
border-bottom:5px solid #008E00;
}
#blazerMenu > li > a {
    color: #333;
    font-weight: bold;
    font-size: 16px;
padding:8px 16px 8px 16px;
}
#blazerMenu li:hover {
    color: #333;
}
#blazerMenu a.arrow{background-image:url(https://lh5.googleusercontent.com/-WSS4CScLl3U/UGrIYZZZ4kI/AAAAAAAAF5k/ypr0GXc2CWI/s16/Actions-arrow-down-icon.png);background-repeat:no-repeat;background-position:right center;padding:8px 24px 8px 16px;}

/* Submenu
------------------------------------------*/
#blazerMenu ul {
    background: #00CC00;
padding:3px 0px 0px 0px;
}
#blazerMenu ul li a {
    color: #fff;
    font-weight: bold;
    font-size: 12px;
width:110px;
padding:6px 0px 6px 6px;
}
#blazerMenu ul  li:hover a {
    background: #80FE80;
}
5. Letakkan kode berikut ini tepat diATAS kode </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(function(){
    $('#blazerMenu').find('> li').hover(function(){
        $(this).find('ul')
        .removeClass('blazerblog')
        .stop(true, true).slideToggle('height');
    });
});
</script>
6. Klik "Simpan Template".
7. Masuk ke Tata letak >> Tambah Widget >> Html/JavaScript dan copy kode berikut ini pada kolom konten!.
<ul id="blazerMenu">
    <li><a href="http://putupunyablog.blogspot.com/">HOME</a></li>
    <li>
    <a class='arrow' href="http://putupunyablog.blogspot.com/search/label/blog">TUTORIAL</a>
    <ul class="blazerblog">
        <li><a href="#LINK DISINI">UBAH</a></li>
        <li><a href="#LINK DISINI1">UBAH1</a></li>
        <li><a href="#LINK DISINI2">UBAH2</a></li>
    </ul>
</li>
    <li>
    <a class='arrow' href="http://putupunyablog.blogspot.com/">Blogger</a>
    <ul class="blazerblog">
        <li><a href="#LINK DISINI">UBAH</a></li>
        <li><a href="#LINK DISINI1">UBAH1</a></li>
        <li><a href="#LINK DISINI2">UBAH2</a></li>
    </ul>
</li>
<li>
    <a class='arrow' href="http://putupunyablog.blogspot.com/search/label/tutorial">Resep</a>
    <ul class="blazerblog">
        <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 class='arrow' href="http://putupunyablog.blogspot.com/search/label/Beauty">Women</a>
    <ul class="blazerblog">
        <li><a href="#">Beauty</a></li>
        <li><a href="#">Make Up</a></li>
        <li><a href="#">Fashion</a></li>
    </ul>
</li>
<li>
<a class='arrow' href="http://putupunyablog.blogspot.com/search/label/naruto%20shippuden">More</a>
<ul class="blazerblog">
<li><a href="#">Kode Warna</a></li>
<li><a href="#">Get This Menu</a></li>
</ul>
</li>
</ul>
8. Klik "Save" dan sesuaikan dengan keinginan anda.

Baca Juga Artikel Dibawah Ini!



24 komentar:

  1. kira2 untuk wordprees bisa gak ya oppa ? saia pengen mencobanya dulu

    BalasHapus
  2. maksih agan atas infonya...langsung ane coba

    BalasHapus
  3. @bocah kampoenk Sama-sama gan :). silahkan dicoba gan. semoga berhasil :).

    BalasHapus
  4. gan, ane dah nyoba dan berhasil. tapi di menu dropdownnya ada tulisan UL ID="BLAZERMENU".
    ane dah cari codenya tapi g ada
    mohon bantuannya gan

    BalasHapus
  5. gan tnya soal berubah warna tulisan seperti home, health, blogger dimana ya?

    BalasHapus
  6. gan cara nge link kan y g mna mhon bantuan nya sobb

    BalasHapus
  7. kalo menu yang ada gambar kecil ad gak y?

    BalasHapus
  8. @bayu alexandria Yang saya kasih link url saya gan, itu ganti dengan url kategori blog agan :)

    BalasHapus
  9. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  10. postingan ini sangat menarik serta enak di baca tentang cara membuat menu drop down di blog.... saya berharap bisa berkunjung lagi

    BalasHapus
  11. cobain ah, soalnya saya gampang bosen dengan tampilan menu :D

    BalasHapus
  12. gan cara perpendek garis hijaunya tuh gmna gan..?
    tolong beritahu saya di https://www.facebook.com/junjungxiteorus.xliemsdii

    BalasHapus
    Balasan
    1. Cari kode ini width:980px;
      pada 980 itu ukuran panjang garis hijaunya..

      Hapus
  13. Template Blognya bagus,Bisa di share ga templatenya

    BalasHapus
  14. oke gan, terima kasih sudah berkomentar di blog ini.
    langsung ke TKP gan.. :)

    BalasHapus
  15. gan, postingan anda sangat keren dan mantabbbb. udah saya coba, tapi maap lum aku edit masih aslinya, tapi sangat membantu, moga agan masuk surga....terus sebagai ucapan terima kasih...blog agan aku tempel di blog punyaku...http://sugito78.wordpress.com

    BalasHapus

Silahkan Berkomentar. Dilarang Live Link. Tidak Memakai Verifikasi Kata. Berkomentarlah Dengan Sopan!.

Entri Populer

 
Copyright © 2012 - 2013 Putupunyablog | Powered by Blogger