home
Gambaran mengenai menu pull down nya seperti ini :
contoh menu tersebut saya ambil dari blog saya areamodifikasi.blogspot.com
/* Menu Horizontal Dropdown -----------------------------------------------
*/ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidB9ghtRh8rdJimST4PA3OZqE1LCT8b6kX7RvOpg-Mw_6B6HcAbiVk3Z726P2nrGJVm_bE6_2RYYGcVtjjHPxfzLaSaJQXliAuDz8v98jdNmNsV5RjRL671By3VwJtp1D_SrZLH0DkKw5l/s1600/navi.png)
repeat-x;width:980px;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/AVvXsEgZmU7dx4Tm22duir4LoVVPT8xkcIr1uPTr5PS10YAps3i9v3d_ggDXj_p6lMuhdwjalAZYdy9mEI9g6ftLDUU7kGHEVlkNF7qXfMyaR511bvWg9tP4z1vQmyZBpi5AS5-dIZvzQGsvNQg/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}
- <header> : untuk menempatkan menu di atas nama blog
- </header> : untuk menempatkan menu di bawah nama blog
Copy kode di bawah ini kemudian letakkan tepat di atas kode <header> atau di bawah kode </header>
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN9Lq7RpespA8R-CXwHnwkYw7vT8EqFba4Hjf-cl1zORPMeBht1i0Fwo96u-tENUVO6XDA5ZIL1zwKztHoyIrxXKE_IMIl11t4TYTBUVpwbM5W-BDw0x3R-3ZMAk9A6IBK1ZLW4UV0u7o/s1600/home_white.png'
style='padding:0px;'/></a></li>
<li><a class='trigger'>Hubungi</a>
<ul>
<li><a
href='https://plus.google.com/100104762391323344027' target='new'>Goggle
+</a></li>
<li class='hr'/>
<li><a href='https://twitter.com/Sachiriya'
target='new'>Follow Twitter</a></li>
<li><a href='https://www.facebook.com/sachi.gete'
target='new'>Add Facebook</a></li>
</ul>
</li>
<li><a class='trigger'>Motor</a>
<ul>
<li><a href='http://.............'>Honda
Beat</a></li>
<li class='hr'/>
<li><a
href='http://.............'>Honda
Revo</a></li>
<li class='hr'/>
<li><a href='http://.............'>Honda
Supra</a></li>
<li class='hr'/>
<li><a
href='http://.............'>Suzuki
Shogun</a></li>
<li class='hr'/>
<li><a href='http://.............'>Yamaha
Jupiter</a></li>
<li class='hr'/>
<li><a
href='http://.............'>Yamaha
Mio</a></li>
<li class='hr'/>
<li><a
href='http://.............'>Yamaha
Nouvo</a></li>
<li class='hr'/>
<li><a
href='http://.............'>Yamaha
RX King</a></li>
<li class='hr'/>
<li><a
href='http://.............'>Vespa</a></li>
</ul>
</li>
<li><a class='trigger'>Kategori</a>
<ul>
<li><a
href='http://.............'>Pemula</a></li>
<li class='hr'/>
<li><a
href='http://.............'>Funky</a></li>
<li class='hr'/>
<li><a
href='http://.............'>Transferbody</a></li>
<li class='hr'/>
<li><a
href='http://.............'>Racing
Look</a></li>
<li class='hr'/>
<li><a href='http://.............'>Airbrush</a></li>
<li class='hr'/>
<li><a
href='http://.............'>Pengalamanku</a></li>
</ul>
</li>
<li><a
href='http://.............'>Builder</a></li>
<li><a
href='http://.............'>Tips</a></li>
<li><a
href='http://.............'>Jadwal
Kontes</a></li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://areamodifikasi.blogspot.com/search'
method='get' target=''>
<input name='sitesearch' style='display:none;'
value='http://areamodifikasi.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/AVvXsEh4gRyg9j2nEoVbLQYIZNQr3SQYNmTn0GusFosO7lKj0eky1t4T99YVP3kLMHU2qlIf147VMOFQsOISOMPmVKUMwJOCjuK8gRPe7FN72LAF9PZUwknnJT-p6uSvbZnXY8NyCNk7CebiICM/s1600/field-bg.gif)
no-repeat;' type='text' value='mencari..'/><input align='top'
id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiatQQwflWclggVepJJs6d9MAw2KUTo5UA5u1k4NAMotlbVz1uzAbWnSKZHwTRSfin1RNSKjPCcdL5gPrG1kB-OHkSMDqgPharBYGx0oGr3yIe0V9cAS84bEC9g2LuQjWBy_70wc1fQQrw/s1600/bg_search.gif'
type='image' value='Search'/>
</form></div></div><br
class='clearit'/></div><div style='clear:both;'/></div>
-- selamat mencoba --
Home
Post a Comment