MENU HEADER WITH CSS

variasi header kadar perlu
mau ga yang seperti ini...??

baca cara petunjuknya disini...

script ini jujur aku ambil adi sobat blogger seniorku kang amatulah 83
Langsung pada tutorial


1. Setelah sig in pada account blogger sobat>>> pada dasbor
>>> Klik Tata Letak
>>> Edit HTML

2. Tambahkan kode CSS berikut diatas tag

]]></b:skin>:

inget yang paste atau taruh diatas kode ]]></b:skin>:

#pad {height:100px;}
#menuPositioner {width:100%; position:relative; float:left; top:-40px; margin-bottom:-40px; }

#menuHolder {position:relative; float:left; left:50%;}

#menu,
#menu ul {padding:0; margin:0; list-style:none; font: 12px arial, verdana, sans-serif; background:url(http://sites.google.com/site/amatullah83/background/trans.gif); position:relative; z-index:100;}
#menu {height:40px; float:left; padding:0; background:#4b4d3f; position:relative; right:50%;}
#menu ul {position:absolute; left:-9999px; top:-9999px;}

#menu table {border-collapse:collapse; margin:-1px; padding:0; width:0; height:0;}
#menu li {float:left;}

#menu li a {display:block; float:left; color:#fff; height:40px; padding:0 20px 0 0; line-height:38px; text-decoration:none; background:url(http://sites.google.com/site/amatullah83/background/button1a.gif) no-repeat right top;}
#menu li a.sub {background:url(http://sites.google.com/site/amatullah83/background/button3a.gif) no-repeat right top;}
#menu li a b {display:block; float:left; height:40px; background:url(http://sites.google.com/site/amatullah83/background/button1.gif) left top; padding:0 0 0 20px; cursor:pointer;}

#menu li:hover {position:relative; z-index:100;}
#menu a:hover {position:relative; z-index:100; color:#fc0;}
#menu a.sub:hover {background:url(http://sites.google.com/site/amatullah83/background/button3a.gif) no-repeat right top;}

#menu li:hover > a {color:#fc0;}
#menu li:hover > a.sub {background:url(http://sites.google.com/site/amatullah83/background/button3.gif) no-repeat right top;}

#menu :hover ul {left:0; top:40px; z-index:300; width:130px; padding-top:4px; background:url(http://sites.google.com/site/amatullah83/background/trans.gif);}
#menu :hover ul li a {height:25px; width:120px; padding:0 0 0 10px; line-height:25px; background:#546775; color:#fff; border-bottom:1px solid #a3b6c4; font-size:11px;}
#menu :hover ul li a.fly {background:#546775 url(http://sites.google.com/site/amatullah83/background/fly.gif) no-repeat right center;}

#menu :hover ul li a:hover {color:#fc0;}
#menu :hover ul li a:hover.fly {background:#546775 url(http://sites.google.com/site/amatullah83/background/fly-over.gif) no-repeat right center;}
#menu :hover ul li:hover > a {color:#fc0;}
#menu :hover ul li:hover > a.fly {background:#546775 url(http://sites.google.com/site/amatullah83/background/fly-over.gif) no-repeat right center;}

#menu :hover ul ul {position:absolute; left:-9999px; top:-9999px;}

#menu :hover ul :hover ul {left:117px; top:0; padding:0;}
#menu :hover ul :hover ul li a {background:#a3b6c4; color:#000; border-bottom:1px solid #546775; font-size:11px;}
#menu :hover ul :hover ul li a:hover {color:#fff;}

next cari kode ini <div id='header-wrapper'>
atau bisa jadikan kode dibawah ini sebagai widget di add gadget,java script dan paste kode dibawah ini kedalam gadget tersebut.
andai tetep gagal cobalah paste kode dibawah ini diatas <div id='header-wrapper'>

berikut kode yang harus anda copy

<div id="menuPositioner">
<div id="menuHolder">
<ul id="menu">
<li><a href="index.html"><b>Home</b></a></li>
<li><a href="single.html"><b>Single Level</b></a></li>
<li class="current"><a class="sub" href="dropdown.html"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub1">
<li><a class="fly" href="#url">Dropdown one<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="fly1">
<li><a href="#url">Dropdown 1.1</a></li>
<li><a href="#url">Dropdown 1.2</a></li>
<li><a href="#url">Dropdown 1.3</a></li>
<li><a href="#url">Dropdown 1.4</a></li>
<li><a href="#url">Dropdown 1.5</a></li>
<li><a href="#url">Dropdown 1.6</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="currentsub"><a class="fly" href="#url">Dropdown two<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="fly2">
<li><a href="#url">Dropdown 2.1</a></li>
<li><a href="#url">Dropdown 2.2</a></li>
<li class="currentfly"><a href="#url">Dropdown 2.3</a></li>
<li><a href="#url">Dropdown 2.4</a></li>
<li><a href="#url">Dropdown 2.5</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#url">Dropdown three</a></li>
<li><a href="#url">Dropdown four</a></li>
<li><a class="fly" href="#url">Dropdown five<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="fly3">
<li><a href="#url">Dropdown 5.1</a></li>
<li><a href="#url">Dropdown 2.2</a></li>
<li><a href=http://amatullah83.blogspot.com>Dropdown 3.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="sub" href="dropline.html"><b>Dropline</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub2">
<li><a href=http://amatullah83.blogspot.com>Dropline one</a></li>
<li><a href="#url">Dropline two</a></li>
<li><a href="#url">Dropline three</a></li>
<li><a href="#url">Dropline four</a></li>
<li><a href="#url">Dropline five</a></li>
<li><a href="#url">Dropline six</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="sub" href="flyout.html"><b>Flyout</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub3">
<li><a href="#url">Flyout one</a></li>
<li><a href="#url">Flyout two</a></li>
<li><a href="#url">Flyout three</a></li>
<li><a href="#url">Flyout four</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="support"><a href="support.html"><b>Support</b></a></li>
<li id="contact"><a href="contact.html"><b>Contact</b></a></li>
</ul>
</div>
</div>

terakhir simpan template

tapi dengan catatan yah...
sebelum nyoba ngedit template anda
terlebih dahulu backup template anda takut terjadi eror aja...xixixixixi

Baca Yang ini Juga Ya... :

MENU HEADER

• Membuat Menu Header Unik
• TAB MENU HEADER SEDERHANA
• CSS MENU HEADER
• MEMBUAT CATMENU HEADER