Membuat submenu horizontal dengan kotak pencarian

Membuat submenu horizontal dengan kotak pencarian

Menu horizontal serasa suatu bagian penting dari web/blog. karena dengan menggunakan menu horizontal, secara tidak langsung atau tanpa disadari oleh si pemilik blog yang telah mempermudah para pelancong websitenya dalam mencari artikel yang sedang dicari dalam websitenya. Nah untuk itu saya sedikit mempermudah lagi dengan menambahkan submenu dan kolom pencarian didalam menu horizontal ini. semoga tutorial kali ini bisa bermanfaat untuk web/blog sobat dan semakin banyak pengunjungnya.

Pertama masuk pada akun blogger sobat dan masuk pada menu templat

• Edit HTML lanjutkan dan
• Centang kotak Expand Template Widge
• cari kode ]]></b:skin>
• jika sudah ditemukan, masukkan kode dibawah ini di atas kode tersebut

1234567891011121314
#menutek {margin: 0px;padding: 0px;width:990px;background:#000;height:30px;}#menutek ul {float: left;margin: 0px;padding: 0px;}
#menutek li {float: left;list-style: none;margin: 0px;padding: 0px;}
#menutek li a {background:black;color:#fff;display: block;text-decoration:none;padding: 2px 10px 2px 10px;}
#menutek li a:hover {background:#000;color: red;}
#menutek li li a {color: yellow;font-weight: normal;float: none;margin: 0px;padding: 9px 10px 10px 10px;border-bottom: 1px solid #ccc;}
#menutek li li a:hover  {background:#000;color: #ff0000;}
#menutek li ul {position: absolute;width: 170px;height: auto;left: -999em;}
#menutek li ul a {width: 140px;}
#menutek li:hover ul,
#menutek li li:hover ul {left: auto;}
.menusearch{width:300px;float:right;margin:0 auto;padding:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}

Note :

1. Warna Merah adalah tinggi dari submenu
2. Warna Hijau adalah lebar dari submenu
3. Warna Biru adalah lebar dari menu kotak pencarian / search on blog
4. Sesuaikan lebar dan tinggi submenu ini dengan milik blog sobat
5. Untuk merubah kode warna yang di inginkan seperti #000000; DSB silahkan klik link hex color blogspot 

• Setelah selesai, lanjutkan untuk mencari kode <div id='main-wrapper'>
• Bila sudah ditemukan, yang harus sobat lakukan adalah mempastekan kode dibawah ini tepat di atas kode pada point yang di atas.

123456789101112131415161718192021222324
<div id='menutek'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#' title='Link-Title'>Bapak</a>
<ul>
<li><a href='#' title='Link-Title'>Anak angkat</a></li>
<li><a href='#' title='Optimasi seo'>Anak Tiri</a></li>
</ul>
</li>
<li><a href='#' title='Link-Title'>exchange</a></li>
<li><a href='#' title='Link-Title'>tamu</a></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='#'/>
<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/AVvXsEjOaosqUh9ZsBGYy2_r2MPfabBn8zIMz-AAJSXiEbQLSQui7t6ijIkoo0CWckkXFr9ef7bqCj3AdxZpCyl9RcQTzHuyKm2vDK7so2Ed8-89DiQMfUefjNEW-sHTRJ2fhEllR4UxigZ9dQY/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/AVvXsEjntgV_pNz7cAusqRrBtX_TCRnDchwGE6URvTTv_Dpln2YtCqv3zRAjkWlWzqFHmkGC-DslpYuoqnOBNbn1Vh099SSa4327K1d_xupl6TXA5KxLq_fZto_9tpzsIB87lHdSPnBtp0aWLcQ/s1600/bg_search.gif' type='image' value='Search'/>
</form>
</div>
</div>
</div>

Note :

1. Ubah warna merah dengan URL yang dituju
2. Ubah warna biru dengan keterangan URL
3. Bila sobat ingin menambahkan satu, dua bahkan lebih lagi menu. sobat dapat menambahkan kode dibawah ini setelah kode </ul> yang diberi warna hijau

<li><a href='http://URL-yang-dituju.blogspot.com/' title='Link-Title'>Home</a></li>

Atau untuk submenu

<li><a href='#' title='Link-Title'>Aku adalah</a>
<ul class='children'>
<li><a href='#' title='Link-Title'>Seorang kapiten</a></li>
<li><a href='#' title='Optimasi seo'>Seorang playgroup</a></li>
</ul>
</li>

• Untuk mengantisipasi gagal silahkan review
• Bila berhasil yang harus sobat lakukan adalah menyimpan / save pengeditan dan
• Good job