Cara Membuat Menu Horizontal Dropdown + Search Engine

Cara Membuat Menu Horizontal Dropdown + Search Engine - Halo !! sobat PPK perkenalkan saya Admin  PH, saya admin baru di bloog ini dan ini adalah artikel pertama saya di blog ini yaitu Cara Membuat Menu Horizontal Dropdown + Search Engine Menu dropdown ini biasanya sering digunakan untuk membantu para pengunjung blog kita untuk mencari sesuatu yang mereka butuhkan, dan menu dropdown ini juga mempercantik blog kita. Dan seperti yang kalian lihat, di blog ini saya juga memasang menu horizontal dropdown + search engine. menurut saya sendiri menu ini juga sangat bagus dan menarik, dengan tambahan search engine maka pengunjung akan lebih mudah mencari artikel-artikel di blog kita.

Berikut Tutorialnya :

1. Seperti biasa, pertama-tama kita harus login ke account Blogger terlebih dahulu

2. Masuk ke Dashboard, Template

3. Pilih Edit HTML, lalu ceklis "Expand Template Widget"

4. Cari kode ]]></b:skin> (tekan ctrl+f untuk mempermudah pencarian)

5. bila sudah, letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz4a-wgK048hTm-byXdVV99FkRw7Orcw2GP4_PlI0F5F3XBKi9PeqftGP4bNdH3ccCUwHw-_e8rmBjU9htw6kCwF10WFsM7SJin96NjO7sS5qjkfAo-PQoeMDRacpeeKnS87lqIMBa-Kg/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/AVvXsEhXxnbdRA3sxI9RQJcvpkbQ9o56aLwoP4hwJPZHii6b6PUzHJfhAoyxoxktziTKxS45Q_4Lnop8JpfhckMBvAJxJZPViPk7UFwp9M0Th119ES3o3-XXRkBEf1iJTgTre__ic53f_VsytVI/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}

Silahkan sesuaikan lebar menunya dengan mengganti kode yang berwarna merah

6. Cari kode <header>, kode tersebut biasanya terdapat dua, kamu cari kode yang kedua
7. bila sudah ketemu, letakkan kode berikut tepat dibawah 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://poetra-pakumis.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:12px Arial;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy-bCElMLvMlvWLxajB2e2mBT1JC7eHMcDRE7drP7YYAjnkDVDvzfGj2d_VENPcQUcQ7zhQSWokoXbET2eVAvVRlb3wgF5tk8_rM5HFE_WU4YJnSmuwyFklokNaIzt6Pyftktg_AF7uC4/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/AVvXsEgbT6KQCPLJltFQI-3QhhiNNaBIhHi4rjmjdrIL6qu2gcfOv1SRPFjlsDib0VssmD2R4zIpIgpA-I-lZrYbt1KOvcFpIkx8bjXC8iWCiHMWO7rTZIck-a6A9080bIYMVZ90JSwLVqlrEro/s1600/bg_search.gif' type='image' value='Search'/>
</form>
</div>
</div>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>

Keterangan :
Yang warna biru adalah judul dari Menu dropdownnya
Yang warna merah, ganti dengan url blog kamu
Yang warna kuning adalah link yang akan di tuju

8. Sebelum menyimpan template, sebaiknya klik pratinjau/preview terlebih dahulu, supaya bisa melihat apakah widgetnya sudah benar atau tidak
9. bila sudah, klik Simpan template.

By : Admin PH

Jika anda menyukai artikel Cara Membuat Menu Horizontal Dropdown + Search Engine dan ingin memosting artikel ini.

Bila Anda menjumpai BROKEN LINK atau LINK YANG RUSAK, silahkan berkomentar di bawah postingan pada kotak komentar yang disediakan.