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: Pertentangan Sosial dan Integrasi Masyarakat #8

Integrasi Sosial Integrasi sosial adalah jika yang dikendalikan, disatukan, atau dikaitkan satu sama lain itu adalah unsur-unsur sosial atau kemasyarakatan. Suatu integrasi sosial di perlukan agar masyarakat tidak bubar meskipun menghadapi berbagai tantangan, baik merupa tantangan fisik maupun konflik  yang terjadi secara sosial budaya.  Menurut pandangan para penganut fungsionalisme struktur sistem sosial senantiasa terintegrasi di atas dua landasan berikut : Suatu masyarakat senantiasa terintegrasi di atas tumbuhnya konsensus  (kesepakatan) diantara sebagian besar anggota  masyarakat tentang nilai-nilai kemasyarakatan yang bersifat fundamental. Masyarakat terintegrasi karena berbagai anggota masyarakat sekaligus menjadi anggota dari berbagai kesatuan sosial ( cross-cutting affiliation ). Setiap konflik yang terjadi di antara kesatuan sosial dengan kesatuan sosial lainnya akan segera dinetralkan oleh adanya loyalitas ganda ( cross-cutting loyalities ) d...
Post a Comment
Read More >>

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: Ilmu Pengetahuan Teknologi dan Kemiskinan #9

1.  Pengertian Ilmu dan Ilmu Pengetahuan Batas kajian ilmu adalah fakta sedangkan batas kajian filsafat adalah logika atau daya pikir manusia. Ilmu menjawab pertanyaan “why” dan “how” sedangkan filsafat menjawab pertanyaan “why, why, dan why” dan seterusnya sampai jawaban paling akhir yang dapat diberikan oleh pikiran atau budi manusia (mungkin juga pertanyaan-pertanyaannya terus dilakukan sampai never ending) oleh Heidegger, setiap telaah filosofis terdapat unsur metafisik. Ilmu adalah pengetahuan yang bersifat umum dan sistematis, pengetahuan dari mana dapat disimpulkan dalil-dalil tertentu menurut kaidah-kaidah umum. (Nazir, 1988) Konsepsi ilmu pada dasarnya mencakup tiga hal, yaitu adanya rasionalitas, dapat digeneralisasi dan dapat disistematisasi (Shapere, 1974) Pengertian ilmu mencakup logika, adanya interpretasi subjektif dan konsistensi dengan realitas sosial (Schulz, 1962) Ilmu tidak hanya merupakan satu pengetahuan yang terhimpun secara sistematis, tetapi juga ...
Post a Comment
Read More >>