Skip to main content

Cara Membuat Green Horizontal Drop Down Menu Di Blog

Ditulis Oleh Fajar Lesmana | Selasa, 02 Oktober 2012 | 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
Labels:

Popular posts from this blog

Ilmu Sosial Dasar: Warga Negara dan Negara #5

A. Pengertian Hukum Secara Umum : Hukum adalah keseluruhan norma yang oleh penguasa masyarakat yang berwenang menetapkan hukum, dinyatakan atau dianggap sebagai peraturan yang mengikat bagi sebagian atau seluruh anggota masyarakat tertentu, dengan tujuan untuk mengadakan suatu tata yang dikehendaki oleh penguasa tersebut. E. Pengertian Negara Negara berasal dari kata state (Inggris), staat (Belanda), dan etat (Prancis) yang sama-sama asalnya dari bahasa latin status atau statum yang berarti keadaan atau sesuatu yang bersifat yang tegak dan tetap.Berikut pendapat para tokoh mengenai definisi negara. Menurut John Locke (1632-1704) dan Rousseau (1712-1778), negara adalah suatubadan atau organisasi hasil dari pada perjanjian masyarakat. Menurut Max Weber, negara adalah suatu masyarakat yang mempunyai monopolidalam penggunaan kekerasan fisik secara sah dalam suatu wilayah Menurut Mac Iver, suatu negara harus mempunyai tiga unsur pokok, yaitu wilayah, rakyat dan pemerint...
Post a Comment
Read More >>

Ilmu Sosial Dasar: Pelapisan Sosial dan Kesamaan Derajat #6

PELAPISAN SOSIAL A   Pengertian pelapisan sosial       Pelapisan sosial dan kesamaan derajat mempunyai hubungan, kedua hal ini berkaitan satu sama lain. Pelapisan sosial berarti pembedaan antar kelas-kelas dalam masyarakat yaitu antara kelas tinggi dan kelas rendah, sedangkan Kesamaan derajat adalah suatu yang membuat bagaimana semua masyarakat ada dalam kelas yang sama tiada perbedaan kekuasaan dan memiliki hak yang sama sebagai warga negara, sehingga tidak ada dinding pembatas antara kalangan atas dan kalangan bawah. B    Proses terjadinya pelapisan sosial      Pelapisan sosial terjadi dengan dua cara, yaitu : Terjadi dengan sendirinya       Pada cara ini, pelapisan sosial terjadi secara alamiah atau tanpa kesengajaan. Hal ini akan membentuk pelapisan sosial yang bervariasi menurut tempat, waktu, dan kebudayaan. Kedudukan seseorang pada pelapisan sosial ini juga terjadi secara otomatis. Terjadi dengan s...
Post a Comment
Read More >>