Steps.
- Pegi ke Dashboard > Template > Edit template
- search code nih ]]></b:skin>
- Dah jumpa ? Then copy code bawah nih ek
/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Gq6GW4Jpbthh1P9gVooKtS7j6u7uG7_DWkL2eX5oMVYXpvZDtlYrT0fPcLXZGYTwRk2nwrtlCBDAHeenDA6C2tP5H67W-uLbEaydcXBJUx4q7EhxUKvyPHfI4zgwQineNjUaM9ak3rQ/s1600/menubar.png) repeat-x;width:980px;border:1px solid #eee;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:240px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-family:Arial;font-size:12px;font-weight:700;text-transform:uppercase;color:#000;border-right:0px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEQOcf7hm79MQOOWtD_wtB8g0arCNfAzG-2B_8eRjTszBtWXblyp9PFelIVw-eJ8XYrFvHs-udxQfpiDIVFruqXj-Gxs931SoWGgGsN_wmd7OyEDVMxkbBbIsdsgSxu6DqX1GSsEmWiKg/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#BDE3EE;padding-bottom:5px;-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:#FCD4DC;color:#000} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#000;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #eee;border-top:1px solid #eee;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#FBFAA9!important;color:#000!important;text-decoration:none}
4. Paste code atas nih atas code ]]></b:skin>
5. Cari code </header> , untuk pengguna denim template <div id='crosscol-wrapper'>
6 . Dah ? Sekarang copy code bawah nih pulak ye.
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBFLRsgM46vQrM_8o8iseuaW0v6_EbI1m9DKnnVg4hGcVi82CF4giKVG6X-Om1J4ByzhN_zB3hHSGjXIzm19Fg-qtpnGZ6MS2SKSGnpp3SVpaaFoSDl0y-L5ozeJKBbtt7au5bfnp8bow/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='http://www.blogger.com/profile/masukkan ID' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://plus.google.com/u/0/masukkan ID' target='new'>Goggle +</a></li>
<li class='hr'/>
<li><a href='http://twitter.com/masukkan ID' target='new'>Contact on Twitter</a></li>
<li><a href='http://www.myspace.com/masukkan ID' target='new'>Contact on Myspace</a></li>
<li><a href='http://www.facebook.com/masukkan ID' target='new'>Contact on Facebook</a></li>
</ul>
</li>
<li><a href='Link Anda' target='new'>Owner Creator</a></li>
<li><a class='trigger'>Tips dan Trik</a>
<ul>
<li><a href='Link Anda'>Komputer</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Blogspot</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Facebook</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Kategori</a>
<ul>
<li><a href='Link Anda'>TV Online</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Komputer</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Desain Grafis</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Game</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Microsoft</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Software APP</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Software Program</a></li>
</ul>
</li>
</ul> <br class='clearit'/></div><div style='clear:both;'/></div>
7. Code yang atas nih korang paste bawah code </header> , untuk pengguna denim template <div id='crosscol-wrapper'>
8 . Dah siap >.< Huu . Preview dlu tau :)
Nota kaki tangan
kaler nih : untuk tukar background bergambar or biasa
*paste dlu kode tuh kat Notepad untuk elakkan kesalahan . Sebab dah try sebelum nih :)
kaler nih : Title untuk link besau >.< (link Utama)
Kaler nih : Title untuk link kecik >.< (anak2 dia)
kaler nih ; Link korang ler :)
kaler nih : Untuk tukar part lain2 . Kaler yang korang suka even width ikot kesesuaian blog :)
Diharap tutorial nih membantu . Selamat mencuba :)
Credit to : kak shida
Comments
Post a Comment
Hey ! Jangan Lupa Tinggalkan Komen Tau ♥