Cara membuat menu Horizontal dengan Search

Sekarang kita akan membahas cara membuat menu Horizontal dengan search. Menu ini terdapat Background dan warna sehingga mempercantik tampilan menu diperpadu dengan Search yang membuat pengunjung mudah menemukan Mesin pencari artikel. Langsung saja kita pelajari caranya.

1. Login Blogmu.
2. Pilih Rancangan.
3. Pilih Elemen Laman
4. Pilih Tambah Gadget.
5. Pilih HTML/Javascript.
6. Copy Paste Code di bawah ini ke kotak kosong yang tersedia.
7. <center><table width="800" height="40" cellspacing="1" cellpadding="1">
   <tr>
   
   <td width="161"  background ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZmw1t8VviSllBuMiXv4A9O8rStWAonAKOdHboK6TUWAQOqybbfz5fBWoePeAZ_sL7yydyxEamVP3Z6gdO7HDPWgMPeNHoOfrdLYDVHVPUJeVKZsU1wcr6mPIsE5emSNNjGpTWtJomRhQ/s1600/menu.JPG"><a href="http://toturial-game.blogspot.com/"><font size="2" color="white"><center><b>Isi Judul menu kamu di sini</b></center></font></a></td>
   
   <td width="161"  background ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZmw1t8VviSllBuMiXv4A9O8rStWAonAKOdHboK6TUWAQOqybbfz5fBWoePeAZ_sL7yydyxEamVP3Z6gdO7HDPWgMPeNHoOfrdLYDVHVPUJeVKZsU1wcr6mPIsE5emSNNjGpTWtJomRhQ/s1600/menu.JPG"><a href="http://toturial-game.blogspot.com/p/site-map.html"><font size="2" color="white"><center><b>Isi Judul menu kamu di sini</b></center></font></a></td>
   
   <td width="161"  background ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZmw1t8VviSllBuMiXv4A9O8rStWAonAKOdHboK6TUWAQOqybbfz5fBWoePeAZ_sL7yydyxEamVP3Z6gdO7HDPWgMPeNHoOfrdLYDVHVPUJeVKZsU1wcr6mPIsE5emSNNjGpTWtJomRhQ/s1600/menu.JPG"><div align="center"><span class="style2"><a href="http://toturial-game.blogspot.com/p/link-exchange.html
   "target="_blank"><font size="2" color="white"><center><b>Isi Judul menu kamu Disini</b></center></font></a></span></div></td>
   
   <td width="249"  background ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZmw1t8VviSllBuMiXv4A9O8rStWAonAKOdHboK6TUWAQOqybbfz5fBWoePeAZ_sL7yydyxEamVP3Z6gdO7HDPWgMPeNHoOfrdLYDVHVPUJeVKZsU1wcr6mPIsE5emSNNjGpTWtJomRhQ/s1600/menu.JPG"><center>
   <form id="searchform" action="http://toturial-game.blogspot.com/search" name="searchform" method="get">
   <input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" type="text" value="" /> <input id="searchsubmit" value="Search Artikel" type="submit" style="background: #66CCFF; color: #ffffff; font-weight: bold;" /></form></center></td>
   </tr>
   </table></center>
8. Save.
9. Kemudian Pindah kan Kotak Widget tersebut Di Bawah Header.

 

Keterangan Bagian Menu.

• Text Berwarna Merah kamu ganti dengan Judul menu kamu.
• Text Berwarna Hijau kamu ganti dengan alamat URL yang dituju.
• Text berwarna Biru adalah BackGround Menu. kamu bisa mengganti Background menu dengan Bakcground lain dengan cara memasukkan Alamat URL Gambar tersebut. Backgground bisa kamu dapat dengan mengupload File gambar ke www.photobucket.com atau website lain, kemudian kita ambil Alamat URL Gambar tersebut.

Keterangan Bagian Search Engine.

<td width="249"  background ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZmw1t8VviSllBuMiXv4A9O8rStWAonAKOdHboK6TUWAQOqybbfz5fBWoePeAZ_sL7yydyxEamVP3Z6gdO7HDPWgMPeNHoOfrdLYDVHVPUJeVKZsU1wcr6mPIsE5emSNNjGpTWtJomRhQ/s1600/menu.JPG"><center>
<form id="searchform" action="http://toturial-game.blogspot.com/search" name="searchform" method="get">
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" type="text" value="" /> <input id="searchsubmit" value="Search Artikel" type="submit" style="background: #66CCFF; color: #ffffff; font-weight: bold;" /></form></center></td>
</tr>
</table></center>

• Text Berwarna Biru adalah background Menu Search Engine. kamu bisa mengganti Alamat URL Gambar Background dengan Alamat URL background lain.
• Text Berwarna merah Kamu ganti dengan Alamat URL blog kamu.
• Text berwarna Hijau adalah Judul Tombol Search Engine. kamu Bisa mengganti Judul tersebut dengan Judul yang lain Seperti Search, Cari, Mencari Artikel, Dll

Selamat Mencoba !!!