Cara Membuat Menu DropDown Keren Dengan Kotak Search Blog

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 Tahu khan... menu dropdown itu? menu nya akan terlihat seperti gmbar di atas di menu nya ada sub menu lagi jika cursor di arahkan ke salah sau menunya. langsung praktek yuk..

Cara Membuat Menu Dropdown Keren
 

• LOGIN Ke Blogger
• Klik EDIT TEMPLATE
• Cari Kode ]]></b:skin> atau tekan  Ctrl+F untuk merpermudah mencari kodenya
• Jika sudah copy kode di bwah iini dan pastekan tepat d atas kode ]]></b:skin>

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIcQjYk8uFpdLUwEAIFvN5JHJOiDcwaVfA8ffJAfi13-Q-3MsDgLG2-0OE4Vxq71i3U-YuA38yE5YTrWEvuQnGZxt1Qj_7vcLhSTtOnvk4A1W4MsdJ7XvqhVjXp4JnMfhTkEjph_AdnAw/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/AVvXsEgJ0Ih8gxpr-cBN4LTbpt7RKU7c5A-T8r4HbaGzFroMPeCPjMXrKYGk289d_sq2JvBDZKzDlw_vOTZ9c-o3rnqvN8NkLPjzSijIOk2b69BO3QdapIsztbo9_EpF5O4kyrE1ibYT6vi16W0/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}

Keterangan: kode warna rubah dan sesuaikanlah dengan ukuran blog anda

• Cari kode <header> atau gunakan Ctrl+Funtuk mencari
• Lalu copas lagi kode di bawah ini dan pasang tepat di bawah atau di atas 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/AVvXsEh9QjkeD8R_vn0Fx-GyNDMlSikajsedzGy5TrFHnZnkn-raFdjjJueWp-zI6DpTqkWqS5tkQGoWzbL90KMhpIWiKs9CQ0MM8CQ5N4R9COTrglvf_l_0hKSRVAJqrzpYHyK7JRlefl1pMMU/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='http://www.blogger.com/profile/15533774223854549774' target='new'>Tentang Saya</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://plus.google.com/u/0/+IshakAlamSmc/posts' target='new'>Goggle +</a></li>
<li class='hr'/>
<li><a href='http://www.facebook.com/smc.ishack' target='new'>Facebook</a></li>
<li class='hr'/>
<li><a href='https://twitter.com/IshakAlamm' target='new'>Twitter</a></li>
</ul>
</li>
<li><a class='trigger'>Kategori</a>
<ul>
<li><a href='http://ishakalam.blogspot.com/search/label/Tutorial'>Tutorial</a></li>
<li class='hr'/>
<li><a href='http://ishakalam.blogspot.com/search/label/Cerita%20Rakyat'>Cerita Rakyat</a></li>
<li class='hr'/>
<li><a href='http://ishakalam.blogspot.com/search/label/Kata%20-%20kata%20Bijak'>Kata Bijak</a></li>
<li class='hr'/>
<li><a href='http://ishakalam.blogspot.com/search/label/Motivasi'>Mutivasi</a></li>
<li class='hr'/>
<li><a href='http://mangacanblog.com/'>Lainnya</a></li>
</ul>
</li>
<li><a href='http://www.blogger.com/home' target='new'>Dasbor</a></li>
</ul> <div class='menusearch'>
<div style='float:right;padding:6px 8px 0 0;'>
<form action='http://ishakalam.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://ishakalam.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6gMCVimOMIaWrdlqtLftF3cbkvquHJyKnzMFlYYzqHFMr5ivvuv6ZOE1-H30w9aKTWDO4mJO8agqQRuI70gUzNpp-70TKiVk_PvVULHdnVV8rDYQ7nhXRs6kZ-NnBhWJ29qvu2Zob3yo/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghBxA-u3WRm7Y0A0vVOiPBOGZD3MWMIwbjQXQ-ad4dCLODuztbXISwqudm0c2c7m7Mq7GbT3PihT8rBlsnjUbXKj7r9Su2ELKTC58krLXBEH8BinckMtOhPnu6C-1ooB2tlkaUJpY7UN4/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

Keterangan: warna merah gantilah dengan URL blog anda 

semoga artikel Ini Cara Membuat Menu DropDown Keren Dengan Kotak Search Blog bermanfaat untuk anda semua

 Tingglkan komentar anda