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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgprbWJMHRuk9f3yvQQ9UmP7oN4iTFROjZND_wkvYq44LsRXxZlEs6hbxhxjg8Mw6Y38QwiPV3dH4qFtiI69Ziy0RdTWXpMKtalp-bL2rsf1p-1CNSCfxrmFf_RH9WQm1cUbArxCe8hvZs/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

2.Pilih HTML/Javascript

dan masukkan kod diatas didalamnya dan klik butang save.

update 9/5/2013