Selasa, 02 Oktober 2012

Cara Membuat Green Horizontal Drop Down Menu Di Blog


By on 20.31

jQuery - Menu horizontal drop down kali ini saya beri nama Green, karena menu ini berwarna hijau. Menu 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.


1. Login ke blog kamu.
2. Pilih Template > Edit HTML > cari kode </head>
3. Setelah ketemu letakan kode di bawah ini tepat di atas kode </head>
<style>
#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;
}
</style>
    <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>  
5. Simpan Template.
6.Ini adalah HTML Code menunya.
<ul id="blazerMenu">
    <li><a href="http://blazerracing.blogspot.com">Home</a></li>
    <li>
    <a class='arrow' href="http://blazerracing.blogspot.com/search/label/tips%20kesehatan">Health</a>
    <ul class="blazerblog">
        <li><a href="#">Diet</a></li>
        <li><a href="#">Fitnes</a></li>
        <li><a href="#">Health Food</a></li>
    </ul>
</li>
    <li>
    <a class='arrow' href="http://blazerracing.blogspot.com/">Blogger</a>
    <ul class="blazerblog">
        <li><a href="#">jQuery</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">Widget</a></li>
    </ul>
</li>
<li>
    <a class='arrow' href="http://blazerracing.blogspot.com/search/label/Resep">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://blazerracing.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://blazerracing.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> 
Ganti yang berwarna biru dan tanda pagar dengan URL yang dituju.

Untuk membuat menunya:
Cari kode bagian akhir header blog kamu. Untuk memudahkan kamu cari kode header-wrapper atau </header>, Biasanya kodenya kayak gini
 <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 -->
NANTI KODE NOMOR 6 NYA LETAKAN DISINI DI BAWAH KODE AKHIR HEADER

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

7 komentar:

  1. Salam kenal dari sy yang sdng bljr nge-blog nih. sy udh coba mengikuti langkah di atas sampai disave. tapi kenapa ya kok menu nya gk berfungsi, sub-menu nya tidak muncul. mohon masukannya ya. terimkasih ats info dan ilmunya.

    BalasHapus
  2. Ok, untuk membuktikannya, sobat boleh coba.
    Masuk ke halaman ini Editor HTML
    Setelah masuk ganti kata ADD CSS HERE dengan kode nomor 3 di atas.
    Letakan kode nomor 4 tepat di atas kode style
    Ganti kata ADD HTML HERE dengan kode nomor 6, lalu klik PRIVIEW

    BalasHapus
  3. kode nomor 4 kayak a gk da lah gan,,,,

    BalasHapus
  4. ijin sedot ya gan http://idegemilang.blogspot.com/

    BalasHapus