Tukar bentuk paparan search pada blog

Bila kita memasang fungsi search pada blog,butang search adalah berwarna kelabu.dan papaparan ruang carian adalah puteh.Bagi memberi sedikit kelainan dan membuatkan nya lebih menarik cuma memerlukan sedikit perubahan pada kod css.Kebaikan Pemasangan fungsi search ini penting adalah bagi kemudahan pengunjung mencari artikel diblog .
contohnya seperti dibawah ini:




Kod nya adalah seperti dibawah:


<form id="searchform" action="http://teknikbuatblog.blogspot.com/search" name="searchform" method="get">
<input id="search-box" name="q" size="20" type="text" style="background: #CA226B; border: 4px ridge #000066"/>
<input id="search-btn" value="Search" type="submit" style="background: #F433FF; border: 2px outset #ff0000; color: #ffffff; font-weight: bold;"/>
</form>
warna hijau adalah kod background ruang carian dan oren background bagi button.Kod warna boleh didapati disini .Tukarkan alamat blog pada teks berwarna biru dengan alamat blog anda.




Menggunakan imej sebagai button:

<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="image" src="https://lh5.googleusercontent.com/--mhpW67zfxQ/TW5ndYxhZqI/AAAAAAAABeQ/D2gZrp6QK_o/s1600/green-button.png" align="top"/></form>

*boleh gantikan imej yang sesuai sebagai button pada teks berwarna merah.Tukarkan alamat blog pada teks berwarna biru dengan alamat blog anda.

Cara memasangnya adalah seperti berikut:
1.Masuk ke design dan pilih Layout---add gadget

edit blog


2.Pilih HTML/Javascript

dan masukkan kod diatas didalamnya dan klik butang save.

update 9/5/2013

Catat Ulasan

10 Comments:

kutoOobambOo / ericoanaci berkata...
Teknik Buat Blog

tutorial yg bagus.. tp tak nk lah ..next time.. tq

Bangjal Dua Tiga berkata...
Teknik Buat Blog

wah keren ne,, thank gan

ane mau buat ne..

salam kenal ja kwan

Warna Tulisan berkata...
Teknik Buat Blog

tip yang menarik, thx

Eera Shera berkata...
Teknik Buat Blog

thx for the info

budakampung berkata...
Teknik Buat Blog

wahh..nk cuba lah..thanx :D

War berkata...
Teknik Buat Blog

@kutoOobambOo / ericoanaci Ya Allah mau komentar aja kok ribet banget sie? maaf, heheheheheh emang gaptek kok

Mbah Lalar berkata...
Teknik Buat Blog

Waduh cari kotak komentarnya lama banget

yahaya berkata...
Teknik Buat Blog

@Mbah Lalarharap maaf saya dah ubah setting semula....agar kotak kembali tampil

BlogS of Hariyanto berkata...
Teknik Buat Blog

informasi yang menarik kawan :) terimakasih sudah berbagi

rasta berkata...
Teknik Buat Blog

nice sharing