Cara membuat Menu DropDown Keren dengan kotak search blog, biasanya menu dropdown ini teletak di atas blog dan di bawah/di atasnya header rasanya ada yang kurang jika di blog itu belum ada menu dropdown nya tahukan... menu dropdown itu? menu nya akan terlihat seperti gambar di atas di menunya ada sub menu lagi jika cursor di arahkan ke salah satu menunya. jika ingin bukti mari kita liat di tkp pasti mudah kok .....
cara membuat menu dropdown keren antara lain :1. login ke blogger
2. klik edit template
3. cari kode ]]></b:skin> atau tekan ctrl+f untuk merpermudah mencari kodenya
4. jika sudah copy kode di bawah ini dan pastekan tepat d atas kode ]]></b:skin>
/* menu horizontal dropdown ----------------------------------------------- */
#menuwrapperpic{background:url(http://3.bp.blogspot.com/-au85ve8p-am/tecy5hd27ji/aaaaaaaaawq/fjxm0qysq1q/s1600/nav.png) repeat-x;width:980px;margin:0 auto;padding:0 auto}
#menuwrapper{width:980px;height:30px;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;text-shadow: 0px 1px 1px #000;color:#f2f1f1;border-right:1px solid #666;padding:9px 10px 8px}
#menubar a.trigger{background-image:url(http://3.bp.blogspot.com/-lzmptnyr6po/twetzufjsti/aaaaaaaaato/oishmxujmsy/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:9px 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. sampai di atas ini aja copas nya
6. kode warna dapat dirubah dan disesuaikan dengan ukuran blog anda
7. langkah berikutnya adalah :
8. cari kode </head> atau gunakan ctrl+funtuk mencari
9. lalu copas lagi kode di bawah ini dan pasang tepat di bawah atau di atas kode </head>
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='your link'>home</a></li>
<li><a class='trigger' href='#'>menu1</a>
<ul>
<li><a href='edit link'>sub menu1</a></li>
<li class='hr'/>
<li><a href='edit link'>sub menu2</a></li>
<li class='hr'/>
<li><a href='edit link'>sub menu3</a></li>
<li class='hr'/>
<li><a href='edit link'>sub menu4</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>menu2</a>
<ul>
<li><a href='edit link'>sub menu1</a></li>
<li class='hr'/>
<li><a href='edit link'>sub menu2</a></li>
<li class='hr'/>
<li><a href='edit link'>sub menu3</a></li>
<li class='hr'/>
<li><a href='edit link'>sub menu4</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>menu3</a>
<ul>
<li><a href='edit link'>sub menu1</a></li>
<li class='hr'/>
<li><a href='edit link'>sub menu2</a></li>
<li class='hr'/>
<li><a href='edit link'>sub menu3</a></li>
<li class='hr'/>
<li><a href='edit link'>sub menu4</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>menu4</a>
<ul>
<li><a href='edit link'>sub menu1</a></li>
<li class='hr'/>
<li><a href='edit link'>sub menu2</a></li>
<li class='hr'/>
<li><a href='edit link'>sub menu3</a></li>
<li class='hr'/>
<li><a href='edit link'>sub menu4</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>menu5</a>
<ul>
<li><a href='edit link'>sub menu1</a></li>
<li class='hr'/>
<li><a href='edit link'>sub menu2</a></li>
<li class='hr'/>
<li><a href='edit link'>sub menu3</a></li>
<li class='hr'/>
<li><a href='edit link'>sub menu4</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>menu6</a>
<ul>
<li><a href='edit link'>sub menu1</a></li>
<li class='hr'/>
<li><a href='edit link'>sub menu2</a></li>
<li class='hr'/>
<li><a href='edit link'>sub menu3</a></li>
<li class='hr'/>
<li><a href='edit link'>sub menu4</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>menu7</a>
<ul>
<li><a href='edit link'>sub menu1</a></li>
<li class='hr'/>
<li><a href='edit link'>sub menu2</a></li>
<li class='hr'/>
<li><a href='edit link'>sub menu3</a></li>
<li class='hr'/>
<li><a href='edit link'>sub menu4</a></li>
</ul>
</li>
</ul>
<div class='menusearch'>
<div style='float:right;padding:4px 8px 0 0;'>
<form action='http://www.google.com/search' method='get' target='_blank'>
<input name='sitesearch' style='display:none;' value='http://cara2dalamblog.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:12px arial;color:#666;
background:url(http://1.bp.blogspot.com/-kmhya2yu7je/tv9jvye66xi/aaaaaaaaap8/s0zeuq910ow/s1600/field-bg.gif)
no-repeat;' type='text' value='cari aja di sini...'/><input align='top' id='search-btn'
src='http://4.bp.blogspot.com/-b9ftjjxabp4/tweo-yiwe-i/aaaaaaaaau4/du-vmpe9hpe/s1600/bg_search.gif' type='image' value='search'/>
</form>
</div>
</div>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
11. sampai di situ aja copasnya
12. warna merah gantilah dengan url blog anda
Demikian, semoga artikel cara membuat Menu DropDown Keren dengan kotak search blog dapat bermanfaat untuk anda semua....amin
0 Response to "Menu DropDown Keren"
Posting Komentar