Cara Membuat Menu Terbaru Green Transparant In HEADER

jQuery - Menu horizontal drop down kali ini saya beri nama Green, karena menu ini berwarna hijau. Menu ini sangat cocok untuk web/blog yang ...

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(http://programisjs.googlecode.com/files/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. Dan Letakkan Code Dibawah Ini Tepat nya Di atas Header-Wrapper

Untuk menyempurnakan Menu Floating Yang saya Berikan Ini.

<ul id="PalmMenu">
<li><a href="http://Palmahutabarat69.blogspot.com">Home</a></li>
<li>
<a class='arrow' href="/">Health</a>
<ul class="blazerblog">
<li><a href="Your Link Here">Diet</a></li>
<li><a href="Your Link Here">Fitnes</a></li>
<li><a href="Your Link Here">Health Food</a></li>
</ul>
</li>
<li>
<a class='arrow' href="/">Blogger</a>
<ul class="blazerblog">
<li><a href="Your Link Here">jQuery</a></li>
<li><a href="Your Link Here">CSS</a></li>
<li><a href="Your Link Here">Widget</a></li>
</ul>
</li>
<li>
<a class='arrow' href="/">Resep</a>
<ul class="blazerblog">
<li><a href="Your Link Here">Dessert</a></li>
<li><a href="Your Link Here">Chicken</a></li>
<li><a href="Your Link Here">Drink</a></li>
<li><a href="Your Link Here">Cake</a></li>
<li><a href="Your Link Here">Breakfast</a></li>
<li><a href="Your Link Here">Soup</a></li>
<li><a href="Your Link Here">Pasta</a></li>
<li><a href="Your Link Here">Seafood</a></li>
</ul>
</li>
<li>
<a class='arrow' href="/">Women</a>
<ul class="blazerblog">
<li><a href="Your Link Here">Beauty</a></li>
<li><a href="Your Link Here">Make Up</a></li>
<li><a href="Your Link Here">Fashion</a></li>
</ul>
</li>
<li>
<a class='arrow' href="/">More</a>
<ul class="blazerblog">
<li><a href="Your Link Here">Kode Warna</a></li>
<li><a href="Your Link Here">Get This Menu</a></li>

</ul>
</li>

</ul>

Biasa nya Code Nya Diletakkan Pada Bagian Contoh Dibawah Ini

<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