Hallo para bloger , kali ini saya ingin ngshare tentang
trick membuat menu drop down + search engine. Kemudahan dari menu drop down ini
adalah , terdapatnya search engine di samping menu bar yang dapat memudahkan
para visitor mencari informasi di blog anda .
Contoh menu drop downnya bisa kalian lihat di menu bar blog saya ..
Berikut adalah tutorial cara membuat menu drop down + search
engine ...
- Login ke account blog anda
- Masuk ke dasbor à
template
- Cari menu HTML, lalu centang “Expand Template
Widget”
- Cari kode ]]></b:skin>, untuk
mempermudah pencariannya pakailah Ctrl+f
- Lalu , letakan kode dibawah ini tepat diatas
kode ]]></b:skin>
/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2k-QFO15bAaM3_X7QDAo1dxXXvwptaNFX5aPv8dh_Z369uaG48KKV9EtKWYgmL2QS-k4m6Sm2zKkqSm1aZ9ZxHsCPYd55JL3dBbIX8lxVL0xzH7_VDR-VdmpxopzpRxvjV1EjNGmnzA0/s1600/nav.png) repeat-x;width:960px;margin:0 auto;padding:0 auto}
#menuwrapper{width:960px;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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhicSjTg9-FJNEtDKD8rVIh-EFIQma6Y8mZS9S8crAm80lvo37cXN8TvWStJ_5pIhUIhbZW6lr02pGsjAuv7RblTUBZoI77iO7dyVCWQUC-O9XATu9J5iyGZiDISaIHsESlt1OYwP9qrKs/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}
- Lalu cari kode </Header>
- Bila sudah ketemu , edit kode tersebut lalu
letakan di tepat di bawah kode </header>
<div
id='menuwrapperpic'>
<div
id='menuwrapper'>
<ul id='menubar'>
<li><a
href='#'>Home</a></li>
<li><a
href='#'>About Us</a></li>
<li><a
class='trigger' href='#'>Contact Us</a>
<ul>
<li><a
href='#'>Goggle +</a></li>
<li class='hr'/>
<li><a
href='#'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a
href='#'>Contact on Twitter</a></li>
</ul>
</li>
<li><a
href='#'>Sport</a></li>
<li><a
href='#'>Culture</a></li>
<li><a
class='trigger' href='#'>Entertainment</a>
<ul>
<li><a
href='#'>Music</a></li>
<li class='hr'/>
<li><a
href='#'>Movie</a></li>
<li class='hr'/>
<li><a
href='#'>Television</a></li>
</ul>
</li>
<li><a
href='#'>Health</a></li>
<li><a
class='trigger' href='#'>More</a>
<ul>
<li><a
href='#'>Themes</a></li>
<li class='hr'/>
<li><a
href='#'>Tutorial</a></li>
<li class='hr'/>
<li><a
href='#'>Resource</a></li>
<li class='hr'/>
<li><a
href='#'>Advertise</a></li>
<li class='hr'/>
<li><a
href='#'>Javascript</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://pramantara21-bayu.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVMNW9RKUm77AQcOK3tk8-y8aARUi-qPct7-Ce6hQKP4opGA92D5Lbjvo2g12SaFSzMZnSxsOwn6y3aoagDYRA-BmWGvUGLUBPfUEi7PlqaHvciF8vmwDuWCe4cCjji709f6tSgthP70M/s1600/field-bg.gif)
no-repeat;' type='text' value='Search on this site...'/><input
align='top' id='search-btn'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaEhz2_raq23LvaDlMVN1Z2hY1sZ5mzq4kl2NR2Qx-mQ7LX1AGTKEHtoYwP8h6MW36YLQpBlEzBDFpXhXH88shG74C9hBGgpOgr07axKhl4SE2NGce1_iebIvx2VS1CIBMXfom2yxOPSw/s1600/bg_search.gif'
type='image' value='Search'/>
</form>
</div>
</div>
<br
class='clearit'/>
</div>
<div
style='clear:both;'/>
</div>
Catatan
Yang berwarna merah
adalah link yang akan dituju
Yang berwarna Biru adalah judul menu dropdown anda
Yang berwana ungu,
ganti dengan URL menu dropdown anda
- Klik pratinjau/preview terlebih dahulu untuk melihat apakah widgetnya sudah benar atau belum
- Jika Sudah Klik Simpan /save
Selamat Mencoba ...
