Menu horizontal dengan fungsi search

Menu yang akan saya terangkan dalam tutorial ini telah pun saya masukkan pada posting dengan tajuk  menu bar tanpa hack template.Tetapi menu ini cuma menggunakan warna sebagai latar belakang.Menu horizontal kali ini lebih menarik sedikit kerana menggunakan imej sebagai background dan juga mempunyai fungsi search .

menu horizontal


Untuk membuatnya:

Masuk ke dashboard---Layout---Add a gadget



-HTML/javascript


masukkan kod ini pada bahagian bawah header blog.

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

<td width="161"  background ="http://2.bp.blogspot.com/-CORBsp8kFVU/TVPY7kgBJVI/AAAAAAAABVk/Bs9bzGEKN3k/s1600/menu.JPG"><a href="http://teknikbuatblog.blogspot.com/"><font size="2" color="white"><center><b>HOME</b></center></font></a></td>

<td width="161"  background ="http://2.bp.blogspot.com/-CORBsp8kFVU/TVPY7kgBJVI/AAAAAAAABVk/Bs9bzGEKN3k/s1600/menu.JPG"><a href="http://teknikbuatblog.blogspot.com/p/site-map.html"><font size="2" color="white"><center><b>SITE MAP</b></center></font></a></td>

<td width="161"  background ="http://2.bp.blogspot.com/-CORBsp8kFVU/TVPY7kgBJVI/AAAAAAAABVk/Bs9bzGEKN3k/s1600/menu.JPG"><div align="center"><span class="style2"><a href="http://teknikbuatblog.blogspot.com/p/link-exchange.html
"target="_blank"><font size="2" color="white"><center><b>LINK EXCHANGE</b></center></font></a></span></div></td>

<td width="249"  background ="http://2.bp.blogspot.com/-CORBsp8kFVU/TVPY7kgBJVI/AAAAAAAABVk/Bs9bzGEKN3k/s1600/menu.JPG"><center>
<form id="searchform" action="http://teknikbuatblog.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="Cari Artikel...." /> <input id="searchsubmit" value="GO" type="submit" style="background: #66CCFF; color: #ffffff; font-weight: bold;" /></form></center></td>
</tr>
</table></center>

Ubahsuai pada kod diatas:

Kelebaran dan ketinggian menu:
<center><table width="800" height="40" cellspacing="1" cellpadding="1">
width: ubah pada saiz mengikut kelebaran template
height:ketinggian menu yang dikehendakki

Masukkan link dan imej pada menu:

<td width="161"  background ="http://2.bp.blogspot.com/-CORBsp8kFVU/TVPY7kgBJVI/AAAAAAAABVk/Bs9bzGEKN3k/s1600/menu.JPG"><a href="http://teknikbuatblog.blogspot.com/"><font size="2" color="white"><center><b>HOME</b></center></font></a></td>

teks berwarna merah masukkan link imej bagi menu
warna hijau pula ialah link untuk halaman yang nak dimasukkan.Ubahkan pada link halaman anda
Manakala teks berwarna oren pula masukkan nama menu pada link

diatas saya tunjukkan tiga contoh kod yang dimasukkan untuk membuat menu pada halaman sepert contoh pada gambar diatas..Jika ada lebih cuma tambahkan saja kod lagi dan ubah mengikut kesesuaian seperti yang saya terangkan diatas.

Bahagian search:

<td width="249"  background ="http://2.bp.blogspot.com/-CORBsp8kFVU/TVPY7kgBJVI/AAAAAAAABVk/Bs9bzGEKN3k/s1600/menu.JPG"><center>
<form id="searchform" action="http://teknikbuatblog.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="Cari Artikel...." /> <input id="searchsubmit" value="SEARCH" type="submit" style="background: #66CCFF; color: #ffffff; font-weight: bold;" /></form></center></td>
</tr>

teks merah masukkan link imej sama seperti bahagian menu yang lain.
teks hijau tukar kepada alamat blog anda
dan bahagian teks oren ubah lah warna yang sesuai dengan imej/warna yang dimasukkan pada menu.
teks  biru boleh diubah pada perkataan yang lain.
 ubahkan saiz pada witdh agar dapat ruangan yang bersesuaian jika ruangannya terlalu luas.
dah selesai masukkan jangan lupa save terlebih dahulu..kemudian lihat hasilnya.

update 10/5/2013

Catat Ulasan

10 Comments:

Angga Pradipta berkata...
Teknik Buat Blog

thanks infonya kunjungan balik ya
www.gecokk.blogspot.com

suffer8zine berkata...
Teknik Buat Blog

wahhh nk try la

Terkini : Ular Albino Berkepala Dua

zulkbo berkata...
Teknik Buat Blog

salam..
cantik bro..saya ambil letak di blog saya..
saya edit sikit...terima kasih

CIK TOM berkata...
Teknik Buat Blog

cik tom mai copy code utk search n apply kat cik tom punye menu...thanks ye ^_^

ukifahlevy berkata...
Teknik Buat Blog

cek tnya sikit boleh?/ klau kite org nak buat link kt tlisan SITE MAP & LINK EXCHANGE mcm mne? sebab lpas d save code2 tu ada 3 menu kn? iaitu: Home, Site map n Link Exchange, jd sya org nak bila d klik SITE MAP/LINK EXCHANGE itu terbawa k menu lain, mcm mne nak buat nya ye?? klau boleh cek send email k sya: (ukicoker@gmail.com) thx ye??

aravv aman berkata...
Teknik Buat Blog

Terimakasih... toturial ni bagus, cume kenapa ye hasil nye terlalu ke kiri dan terhad untuk 4kolum jer? bila saya try tambah menu dy akan berpindah ke bawah.. why ha? thank 4 answer me..

yahaya berkata...
Teknik Buat Blog

@aravv amankena ubah pada ukuran td width="161" kecilkan ukuran.Boleh tambah lagi tak semestinya empat sahaja juga.ukuran pada table width="800" juga perlu diubah supaya sama panjang dengan header...

Cik Ida berkata...
Teknik Buat Blog

sALAM, APA MAKSUD LINK IMEJ MENU..BLH SETIAO MENU TU SAYA MASUKKAN BAHAN SAYA SENDIRI. CAM MANER NAK MASUKKAN RESEPI DALAM MENU RESEPI SAYA...

Wan Marniza berkata...
Teknik Buat Blog

SALAM.Saya dah berjaya buat menu tu tapi macam mane saya nak buat bahan2 dalam menu tu?tolong saya.

Fokus Impian berkata...
Teknik Buat Blog

@Wan Marnizauntuk masukkan bahan pada menu tu kena buat page statik cuba pada link ini http://teknikbuatblog.blogspot.com/2010/03/membuat-halaman-statik-pada-blog-log-in.html