mesin telusur di blog Search Form

bagaimanakah cara membuat mesin telusur / kotak pencarian blog ( search form ) . . ?

mesin telusur / pencarian adalah sebagian komponen blog dimana user / pengunjung blog akan jadi mudah menelusuri isi halaman blog tersebut . maka hal ini bisa di katakan bahwa membuat mesin telusur blog ( search form ) adalah bidang wajib dalam membangun sebuah website / blog .
Baiklah .. tips kita kali ini yaitu membahas bagaimana cara membuat mesin telusur atau mesin pencarian blog biasanya kita sebut Search Form . untuk membuat mesin telusur blog ini kita menggunakan HTML TAG yaitu <form> .. </form>
yups .. berikut ini langkah - langkah nya . kita akan membuat mesin telusur menggunakan url http://id-mastony.blogspot.com

<form action="http://id-mastony.blogspot.com/search" method="get"><input type="text" name="q"></form>

NOTE : ganti url dengan url blog anda masing - masing . di atas hanya memasukkan text dan tekan ENTER tambahkan submit agar lebih menarik .. seperti berikut ini :

<form action="http://id-mastony.blogspot.com/search" method="get"><input type="text" name="q"><input type="submit" value="SEARCH"></form>

lalu bagaimana cara menambahkan tulisan / text kedalam kotak telusur ??

Anda juga dapat menambahkan beberapa text kedalam kotak search yaitu onblur berikut ini contohnya dan tulisannya adalah pencarian anda dapat merubahnya sesuai dengan keinginan  :

<form action="http://id-mastony.blogspot.com/search" method="get"><input type="text" name="q"  onblur="if(this.value==&quot;&quot;){this.value=&quot;Pencarian&quot;}" onfocus="if(this.value==&quot;Pencarian&quot;){this.value=&quot;&quot;}" value="Pencarian" /><input type="submit" value="SEARCH"></form>

Note : tulisan tersebut dapat menghilang ketika di klik .

modifikasi / mendesain mesin telusur blog

anda juga dapat merubah penampilan mesin telusur blog ini menggunakan css id ( # ) dan kita atur seperti ini <form id="#"><input id="#"/> <input id="#"/></form>

hasil di atas seperti ini kode css nya beserta HTML FORM id . .

<style>#searchform{height:30px;width:200px;padding:2px 2px 2px 29px;margin:0;display:block;position:relative;background:#444444 url(https://06080c19-a-62cb3a1a-s-sites.googlegroups.com/site/mas4nton/icon-blog/search%20left.png) no-repeat;background-position:2px 4px;background-size:22px 22px;-moz-background-size:22px 22px;-webkit-background-size:22px 22px;-o-background-size:22px 22px;border-radius:6px 6px;-moz-border-radius:6px 6px;-webkit-border-radius:6px 6px;-o-border-radius:6px 6px; border:1px groove #6B7B58; }
#searchinput{height:22px;text-align:left;width:120px;float:left:display:block;margin-top:2px;padding:0;}
#searchsubmit{margin-top:2px;height:24px;background:#fff;font-weight:bold;text-shadow:0 1px 2px#444444;border-radius:6px 6px;-moz-border-radius:6px 6px;-webkit-border-radius:6px 6px;-o-border-radius:6px 6px; border:1px groove #6B7B58;float:right;
border:1px groove #6B7B58;cursor:pointer;}#searchsubmit:hover{background:#000;color:#fff;}
</style>
<form id="searchform" action="http://id-mastony.blogspot.com/search" method="get">
<input id="searchinput" name="q" type="text" /><input id="searchsubmit" type="submit" value="SEARCH" /></form>

note : anda juga dapat merubah besar / tinggi sesuka sobat aturan css #searchform , #searchform atau mengganti warna background , warna text ketika kunjungi pointer mouse pada #searchsubmit .
saya rasa cukup sekian pembahasan mengenai mesin telusur blog ini .
satu lagi untuk border - radius selengkapnya anda bisa baca disini mengenai css border-radius sedangkan untuk resize background selengkapnya anda bisa baca disini mengenai background - size atau otak - atik mengenai background menggunakan gambar silahkan baca disini background - image property dan saya ucapkan semoga berhasil ..