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 ..

Terima kasih Anda telah membaca Artikel mengenai mesin telusur di blog Search Form dan Kata kunci untuk Artikel ini yaitu mesin telusur di blog Search Form