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>
NANTI KODE NOMOR 6 NYA LETAKAN DISINI DI BAWAH KODE AKHIR HEADER

Ilmu Sosial Dasar: Individu, Keluarga, dan Masyarakat #3

Individu berasal dari kata latin ‘individuum’ artinya yang tak terbagi atau satu kesatuan yang paling kecil dan terbatas. Individu bukan berarti manusia sebagai suatu keseluruhan yang tak dapat dibagi, melainkan sebagai kesatuan yang terbatas, yaitu sebagai manusia perseorangan. Makna manusia menjadi Individu apabila pola tingkah lakunya hampir identik dengan tingkah laku massa yang bersangkutan. Proses Individualisasi atau aktualisasi diri merupakan proses peningkatan ciri-ciri individualitas pada seseorang sampai pada dirinya sendiri. Keluarga diambil dari bahasa Sanskerta “kulawarga”; “ras” dan “warga” yang berarti “anggota” yaitu lingkungan yang terdapat beberapa orang yang masih memiliki hubungan darah. Keluarga adalah unit satuan masyarakat yang terkecil yang merupakan suatu komponen kecil dalam masyarakat. Kelompok inilah yang menghasilkan individu dengan berbagai macam bentuk kepribadiannya dalam masyarakat. Keluarga sebagai kelompok pertama yang dikenal individu sangat

irhamsyarif

Search This Blog