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


#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.

<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/AVvXsEglTxP-m78JltlULmEv3rxAQnpqaOkzyLynBIHbbVMChNRerUUuFtFTqU8WGQLwXQpYXe3jAcb1wAJkBl3DbJA-JI1MnSH5R7D4c1TNbFp1Tw7uoKceAardhxj21xD-yF5lgIRD3Q3v7iM/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/AVvXsEiL_vNqUdeyCnhLtlIph_q6oF8mKtNTssz0Knu5xFDPGISKsRTkoAtaoevsNG8ZGVGuSJiHXirMJsXdb2IAFdaF47R24b_Qy4tTXNKMsXLF04m3ToySE1TJAW8XQFNTbkF7kjw5dDTsoi4/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

Terkait dengan ini

1 komentar:

Saya mohon maaf atas ketidak terurusnya blog ini, dan saya pun tidak tahu kapan ada waktu luang agar blog ini dapat membalas kritik dan pertanyaan, apalagi untuk melanjutkan postingan saya yang sempat tertunda pada akhir-akhir ini.
Kemungkinan besar blog ini tidak akan aktif selama paling sebentar 2-3bulan karena saya (admin) sibuk mencari nafkah di dunia nyata.
Saya mohon maaf yang sebesar-besarnya karena tidak bertanggung jawab dalam hal yang seperti ini.

Untuk menyisipkan kode <i rel="pre">KODE ANDA YANG TELAH DI PARSE...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>

Link hidup akan terhapus secara otomatis
Convert kode terlebih dahulu bila komentar anda mengandung kode HTML/JScript pada tombol di bawah ini

Parse HTML