Membuat Menu Header

Membuat Menu Header

Thursday, February 2, 2012
oke sekarang kita lanjut ke tahap selanjut nya
berikut ini adalah trik cara membuat menu header pulldown
lihat garis merah di gambar bawah ini itu lah yang saya maksud menu header pulldown



oke ya langsung saja ini lah tahap-tahap nya
1.rancangan
2.edit html
3.centang expand widget
4.tekan ctrl+f

5.lalu masukan kode ini ke kolom yang anda tekan ctrl+/*Tabs
6.copy paste skrip ini persis di atas /*Tabs

/* Menu Horizontal Dropdown
*/
#menuwrapperpic {background:#DC143C url(http://1.bp.blogspot.com/-MdLy4GriXhQ/TaG5oLwhnhI/AAAAAAAAAjQ/RZphOd2y7fM/s1600/bg_menu.png) no-repeat center left;width:1000px;margin:0 auto;padding:0 auto;}
#menuwrapper {width:970px;margin:0 auto;height:32px;}
.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
#menubar {width:100%;}
#menubar, #menubar ul {padding: 0;margin: 0;list-style: none;font-family:'Arial', serif;}
#menubar a {display: block;text-decoration: none;padding: 9px 10px 8px 10px;font-size:12px;font-weight:normal;text-transform:none;color: #0000FF;border-right:1px solid #F7D528}
#menubar a.trigger {background-image: url(http://2.bp.blogspot.com/-Sg6Z-_-rejc/TZM8Fxg-y_I/AAAAAAAAAUE/ogW4RcNxx2M/s1600/arrow_white.gif);background-repeat: no-repeat;padding: 9px 24px 8px 10px;background-position: right center;}
#menubar li {float: left;position: relative;}
/* hide from IE mac \*/
#menubar li {position: static; width: auto;}
/* end hiding from IE5 mac */
#menubar li ul, #menubar ul li {width:170px;}
#menubar ul li a {text-align:left;color: #fff;padding: 5px 10px;font-size: 12px;font-weight:normal;text-transform:none;font-family:Arial;border:none;}
#menubar li ul {z-index:100;position: absolute;display: none;background:#222;padding-bottom:5px;}
#menubar li ul {-moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -webkit-border-bottom-left-radius:5px; -webkit-border-bottom-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;}
#menubar li ul {-moz-box-shadow:0 2px 2px rgba(0, 0, 0, 0.6); -webkit-box-shadow:0 2px 2px rgba(0, 0, 0, 0.6);}
#menubar li:hover a, #menubar a:active, #menubar a:focus, #menubar li.hvr a{background-color:#222;color: #fff;text-decoration:underline;}
#menubar li:hover ul, #menubar li.hvr ul {display: block;}
#menubar li:hover ul a, #menubar li.hvr ul a {color: #edfdfd;background-color:transparent;text-decoration:none;}
#menubar li ul li.hr {border-bottom:1px solid #444; border-top:1px solid #000; display:block; font-size: 1px; height: 0px; line-height: 0px; margin:4px 0; }
#menubar ul a:hover {background-color: #555!important;color: #fff !important;text-decoration:none;}
#menubar li.selected a, #menubar li.selected a:visited {border-right:1px solid #222}
#menubar li.selected a:hover {background:none;color:#F7D528;}


7.eits jangan senang dlo ada skrip kedua nih biar link nya bisa berjalan penuh
.lalu masukan
di dalam kolom ctrl+f yang anda tekan
.masukan kode berikut persis di bawah nya


<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li class='selected'><a href='/'><img border='0' src='http://1.bp.blogspot.com/-7Eveg1Sruok/TZE6GFV_OHI/AAAAAAAABZo/jRHomtpFbd0/s1600/home_white.png' style='padding:0px;'/></a></li>
<li class='selected'><a href='#'>HOME</a></li>

<li><a class='trigger' href='#'>INDO MP3</a>
<ul>
<li><a href='#'>NEW HITS</a></li>
<li><a href='#'>SINGLE HITS</a></li>
<li><a href='#'>INDIE</a></li>
<li class='hr'/>
<li><a href='#'>POP</a></li>
<li><a href='#'>BOYSBANDS</a></li>
<li class='hr'/>
<li><a href='#'>GIRLBANDS</a></li>
<li class='hr'/>
<li><a href='#'>DANGDUT</a></li>
</ul>
<li><a class='trigger' href='#'>BARAT MP3</a>
<ul>
<li><a href='#'>NEW HITS</a></li>
<li><a href='#'>SINGLE HITS</a></li>
<li><a href='#'>BAND</a></li>
<li class='hr'/>
<li><a href='#'>POP</a></li>
<li><a href='#'>BOYSBANDS</a></li>
<li class='hr'/>
<li><a href='#'>GIRLBANDS</a></li>
</ul>
</li>
<li class='selected'><a href='#'>PUSAT JUAL-BELI LAPTOP</a></li>

<li class='selected'><a href='#'>ASIAN SEXY MODEL</a></li>
<li><a class='trigger' href='#'>BERITA TERBARU</a>
<ul>

<li><a href='#'>IT NEWS</a></li>
<li><a href='#'>GOSIP</a></li>
<li class='hr'/>
</ul>
</li>

<li><a class='trigger' href='#'>RADIO ONLINE</a>
<ul>

<li><a href='#'>GEN FM</a></li>
<li><a href='#'>BENS RADIO</a></li>
<li class='hr'/>
<li><a href='#'/>I-RADIO</a></li>
<li><a href='#'>JOGYA RADIO</a></li>
<li><a href='#'>PEKANBARU RADIO</a></li>
</ul>
</li>

<li class='selected'><a href='#'>SOFTWARE</a></li>

</li>
</ul>
</div>
<br class='clearit'/>
</div>http://www.blogger.com/img/blank.gif
<div style='clear:both;'/>
</div>


7.ganti tanda # dengan link url anda istilah nya mau dialihkan kemana

seperti biasa anda cek dulu dengan menekan pratinjau bila berhasil tinggal klik
save tempalte....bila gagal ulangi lagi dari awal
ikuti trik selanjut nya ya