1. Login ke account blogger Anda
2. Untuk dasbor blogger baru
Klik template > Edit HTML > Klik Lanjutkan > Beri ceklis/centang pada kotak kecil Expan template widget
Untuk dasbor blogger lama
Klik rancangan > Edit HTML > Beri ceklis/centang pada kotak kecil Expand template widget
3. Cari kode ]]></b:skin> (gunakan ctrl + f atau F3 untuk mempermudah pencarian)
4. Jika sudah dapat masukkan kode berikut ini tepat diatas ]]></b:skin>
/* Menu Horizontal Dropdown
----------------------------------------------- */ #menuwrapperpic{background:
url(http://2.bp.blogspot.com/-eVufkC686Cw/TwGo8YAlWwI/AAAAAAAAAYM/tWP7l3ENpjY/s1600/menubar.png)
repeat-x;width:960px;margin:0 auto;padding:0 auto}
#menuwrapper{width:960px;height:35px;margin:0 auto}
.menusearch{width:300px;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;margin:0;padding:0} #menubar
a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px
solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSRRyNAcy-rbgZhuega-l7Sj5Z-yyaKttZv7aqrIk-nW1GtbTEG07Xt3F4cTyVGe-vym3AHEvItmEi5VafBvwB08gSQ1QXpQns0A92ZomjWuLjbi6eX5J0FG0PS0rjLIdm4WHnDtHv1ss/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:#222;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:#222;color:#E98C0A} #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:0;line-height:0;margin:4px 0} #menubar
ul
a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
5. Save Template
6 cari kode </header> ( ctrl + F / f5 ) dan masukkan kode di bawah ini:
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6W2lFYoZO0zBUjQ1EQfeZNeQ0JTkZyhEXR_EiSAafq7XvbzJoOEGAcS1ooIBsneKqA4OgwurmBIQ3UZVjnUMUoKozvYq2An-QHkfK-lUyeZv_5O63jJDWiJT2m68aLvw7zsrtIjYIXIc/s1600/home_white.png'
style='padding:0px;'/> Home</a></li>
<li><a
href='https://plus.google.com/100046316396522407616#100046316396522407616/about'
target='new'>About me</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://twitter.com/Rully4nt'
target='new'>Contact on Twitter</a></li>
<li class='hr'/>
<li><a
href='http://www.facebook.com/rullyant.keepSpirit' target='new'>Contact on
Facebook</a></li>
<li class='hr'/>
</ul>
</li>
<li><a
href='http://rullyzii.blogspot.com/search/label/shades%20of%20islam'
target='new'>shades of islam</a></li>
<li><a class='trigger'>Info</a>
<ul>
<li><a
href='http://rullyzii.blogspot.com/search/label/Bola'>Bola</a></li>
<li class='hr'/>
<li><a href='http://rullyzii.blogspot.com/search/label/News'>News</a></li>
<li class='hr'/>
<li><a
href='http://rullyzii.blogspot.com/search/label/Music%2F%20Celebrity'>Music
dan Celebrity</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>category</a>
<ul>
<li><a
href='http://rullyzii.blogspot.com/search/label/Artikel%20n%20Inspirasi'>Artikel
dan Inspirasi</a></li>
<li class='hr'/>
<li><a
href='http://rullyzii.blogspot.com/search/label/Humor'>Humor</a></li>
<li class='hr'/>
<li><a href='http://rullyzii.blogspot.com/search/label/Unik_Aneh'>Unik_Aneh</a></li>
<li class='hr'/>
<li><a
href='http://rullyzii.blogspot.com/search/label/Tips_Trik%20Tutorial'>Tips_Trick
dan Tutorial</a></li>
<li class='hr'/>
<li><a
href='http://rullyzii.blogspot.com/search/label/Oh%20Ternyata'>Oh
Ternyata</a></li>
<li class='hr'/>
</ul>
</li>
<li><a
href='http://rullyzii.blogspot.com/search//TV'>TV
ONLINE</a></li>
<li><a class='trigger'>Have Fun</a>
<ul>
<li><a href=''>Download
Film</a></li>
<li class='hr'/>
<li><a href=''>Game
Online</a></li>
<li class='hr'/>
<li><a
href=''>Film Anime</a></li>
<li class='hr'/>
<li><a href='http://www.youtube.com/'>Video
Youtube</a></li>
<li class='hr'/>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://zuazz.blogspot.com/search'
method='get' target=''>
<input name='sitesearch' style='display:none;'
value='http://zuazz.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;'
onfocus='if(this.value==this.defaultValue)this.value='';'
style='width:170px;border:none;padding:4px 10px; font:italic 12px
Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8aPvkWLmRH3Nr-0OZo458az8T-JOE29J_utXXOhbLaimTwiVV-DZL5CqAH6DXqWiXRF-v9NsQWkBgrnZN85-KDgWfmwuU8R51WvVnBeFOo0n93MJ_wnWnQCb7Hy4Csrlh1sm9u2pZU-k/s1600/field-bg.gif)
no-repeat;' type='text' value='search'/><input align='top'
id='search-btn'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuUz4HZLcSPHTmkTnL-Uf8FPKll_Rtj2ctCwEYwWwSWc-bWD-kMCwJV8xJnlPO3IkS4XXeJk2sfyiTGsw6XaHP1CQ5KBX8-Qq1nLTsJ5K6PoozqQnliNsCSi77r5VuCfPgIyCnFqbQMu4/s1600/bg_search.gif'
type='image' value='Search'/>
</form></div></div><br
class='clearit'/></div><div style='clear:both;'/></div>
catatan : anda dapat mengubah judul menu Drop Down sesuka hati Anda, ubah saja pada tulisan yang bercetak Tebal..
semoga bisa di pahami......... by : rully (^_^)
0 komentar:
Post a Comment