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 :

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://sevencovich.blogspot.com/">HOME</a></li>
    <li>
    <a class='arrow' href="http://sevencovich.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://sevencovich.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://sevencovich.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://sevencovich.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://sevencovich.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>

SELESAI....

Categories: Tutorial