Cara Memasang Kotak Menu Horizontal + Fungsi Search

Untuk Memasang Menu Horizontal Dan Fungsi Search Menggunakan Image sbg Background
Sepeti gambar dibawah ini :

Caranya :

1. Login dulu ke blog sobat
2. Klik Design
3. Klik Add Gadget/Tambah Gadget
4. pilih HTML/JavaScript
5. Copy kode dibawah ini dan paste kan kedalam kotak konten HTML/JavaScript
namun sebelumnya sobat ubahsuaikan dulu kode ini,mengikut keterangan dibawah

<center><table width="800" height="50" cellspacing="1" cellpadding="1">
<tr>

<td width="161" background ="http://1.bp.blogspot.com/-Y5I9Weee-PA/T6O0ZfPMFeI/AAAAAAAAAUw/wTmWQmTw4rw/s1600/ReoAW.jpg"><a href="http://reo-adamw.blogspot.com/"><font size="4" color="white"><center><b>HOME</b></center></font></a></td>

<td width="161" background ="http://1.bp.blogspot.com/-Y5I9Weee-PA/T6O0ZfPMFeI/AAAAAAAAAUw/wTmWQmTw4rw/s1600/ReoAW.jpg"><a href="http://reo-adamw.blogspot.com/p/about-me.html"><font size="4" color="white"><center><b>About Me</b></center></font></a></td>

<td width="161" background ="http://1.bp.blogspot.com/-Y5I9Weee-PA/T6O0ZfPMFeI/AAAAAAAAAUw/wTmWQmTw4rw/s1600/ReoAW.jpg"><div align="center"><span class="style2"><a href="http://reo-adamw.blogspot.com/p/color-code.html
"target="_blank"><font size="4" color="white"><center><b>Color Code</b></center></font></a></span></div></td>

<td width="200" background ="http://1.bp.blogspot.com/-Y5I9Weee-PA/T6O0ZfPMFeI/AAAAAAAAAUw/wTmWQmTw4rw/s1600/ReoAW.jpg"><center>
<form id="searchform" action="http://reo-adamw.blogspot.com/search" name="searchform" method="get">
<input id="s" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = ""}" type="text" value="Cari Artikel...." /> <input id="searchsubmit" value="GO" type="submit" style="background: #66CCFF; color: #ffffff; font-weight: bold;" /></form></center></td>
</tr>
</table></center>

Tinggi Dan Lebar Menu :

<center><table width="800" height="40" cellspacing="1" cellpadding="1">

height : Ubah pada tinggi menu yang sobat inginkan
width : Ubah pada saiz mengikut lebar template

Gantikan URL Image Menu Dan Link Pada :

<td width="161" background ="http://1.bp.blogspot.com/-Y5I9Weee-PA/T6O0ZfPMFeI/AAAAAAAAAUw/wTmWQmTw4rw/s1600/ReoAW.jpg"><a href="http://reo-adamw.blogspot.com/"><font size="2" color="white"><center><b>HOME</b></center></font></a></td>

Text Merah masukkan URL image untuk menu sobat
Text Hijau adalah alamat link untuk halaman yang sobat masukkan,Ubahkan pada link halaman sobat
Dan text Pink pula masukan nama menu pada link

Diatas saya beri contoh gambar dg 3 kode yang dimasukkan
untuk membuat menu pada halaman seperti contoh pada gambar diatas.
Jika sobat memiliki lebih dari 3 kode halaman yg ingin dimasukan
tinggal tambahkan saja kode lagi dan ubah mengikut cara seperti yang saya terangkan diatas

Bahagian search :

<td width="200" background ="http://1.bp.blogspot.com/-Y5I9Weee-PA/T6O0ZfPMFeI/AAAAAAAAAUw/wTmWQmTw4rw/s1600/ReoAW.jpg"><center>
<form id="searchform" action="http://reo-adamw.blogspot.com/search" name="searchform" method="get">
<input id="s" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = ""}" type="text" value="Cari Artikel...." /> <input id="searchsubmit" value="SEARCH" type="submit" style="background: #66CCFF; color: #ffffff; font-weight: bold;" /></form></center></td>
</tr>

text Merah masukkan link imej sama seperti bahagian menu yang lain.
text Hijau ganti pada alamat blog sobat
dan bagian text Pink ubah lah warna yang sesuai dengan image/warna yang dimasukkan pada menu.
text Cari Artikel... boleh diubah pada kalimat yang lain,yg sobat inginkan
ubah saiz pada witdh agar dapat ruangan yang sesuai jika ruanganya terlalu luas.

6. Jika Kode sudah selesai diubah suaikan,klik Save/Simpan dan lihat hasilnya

selamat mencoba, semoga berhasil
terimakasih anda sudah membaca posting saya Cara Memasang Kotak Menu Horizontal + Fungsi Search
semoga bermanfaat

SALAM BLOGER