Tutorial Membuat Menu Horizontal Dropdown + Search engine M.1

 

Tutorial Membuat Menu Horizontal Dropdown + Search engine M.1 - Kali ini saya akan membahas bagaimana Cara membuat menu horizontal dropdown plus search engine (kotak pencarian) M.1. 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 M.1, 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.

<!--more-->

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/AVvXsEhxS6DJgiQyeQ3KxB3x5HMwHAPiLv10JJfXoViZI4hpFNX-2moIHDgiZKXG-5NBrxD5SJYT8acqpm-lsz9LU18r2ksWEzvf9IUvVSk1_C1N0hQKSpuqhn1FpOC_E-TZNjimRmhO_i4c5hU/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/AVvXsEgyJg7rrQFQLb1QnmjPHg8QySTs6YQkbyKDSr5gnCXtDN34nxTOShk98O0bQMgX_WNZdqluRposLB5lHYLskJldlhpLEagJE_C860yiU1dgfWn1VaBCWoIHkmrAJEyaci_OfJdpDjyS2Fg/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://tutorial-blogz.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/AVvXsEhwLpeN1EzmPO_rmpcSxIv1VP_jaBjjPFIEREVIK8YNcJEyCxrLcgEPQEcYqM6l6zYs-6VTh0_S3IvlAyxPbQbczQpkrVIADxWFWGGIY-6zmd_NhxaMQrhOzpZudDX7Gd9HEzINgvWvnOc/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/AVvXsEitIKso9zlr0VRimwp8wVV3S-OxCJCRtmJzrK_pPNDIQuVraW7gjDbHgHN8vG_kqMPqfeQRSH5G2xLVb-sFQpjFz_ISJFRz78aYHpmaWKKtGH5dA2YyhZgjeJsCBijkMYqO0-FYyxnmdMc/s1600/bg_search.gif' type='image' value='Search'/>
</form>
</div>
</div>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>

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

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.

Semoga bermanfaat :D