Membuat Kotak Pencarian di Blog

Widget kotak pencarian adalah sebuah kotak dimana anda dapat mengetikkan teks yang akan dicari di dalamnya. Gunanya untuk memudahkan pengunjung mencari artikel. Nah, informasi yang anda ketik akan dikirimkan ke server untuk memproses teks yang anda cari untuk menemukan hasilnya. Cara memasangnya gampang, masuk ke blogger >>> tambah halaman >>> copy scriptnya >>> kemudian simpan. Nah...dibawah ini ada 5 macam jenis kotak untuk pencarian....sobat bisa pilih yg mana suka. Selamat mencoba...

Contoh 1 :

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" size="25" type="text"/><input id="search-btn" value="Search" type="submit"/></form><a href="http://bit.ly/27wzO7">.</a>

hasilnya :

.

Bagian yang berwarna merah dengan tulisan "search-box" adalah tempat dimana nantinya akan diketikkan teks yang mau dicari. Sementara pada tulisan "search-btn" adalah tombol yang akan ditekan untuk menyampaikan perintah pencarian ke server.

contoh 2 :

<form action="/search" id="searchthis" method="get" style="display: inline;"><input id="search-box" name="q" size="25" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(129, 247, 129) none repeat scroll 0% 0%; border: 1px solid rgb(8, 138, 8);" type="text" /><input id="search-btn" type="submit" value="Search" /></form><a href="http://bit.ly/27wzO7">.</a>

hasilnya :

.

contoh 3 :

<form action="/search" id="searchthis" method="get" style="display: inline;">
<input id="search-box" name="q" size="25" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(129, 247, 129) none repeat scroll 0% 0%; border: 1px solid rgb(8, 138, 8);" type="text" /><input id="search-btn" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(11, 97, 11) none repeat scroll 0% 0%; border: 1px outset rgb(223, 1, 1); color: white; font-weight: bold;" type="submit" value="Search" /></form><a href="http://bit.ly/27wzO7">.</a>

hasilnya :

.

contoh 4 :

<form action="/search" id="searchthis" method="get" style="display: inline;"><input id="search-box" name="q" size="25" type="text" value="cari di blog ini..." /><input id="search-btn" type="submit" value="Search" /></form><a href="http://bit.ly/27wzO7">.</a>

hasilnya :

.

contoh 5 :

<form action="/search" id="searchthis" method="get" style="display: inline;"><input id="search-box" name="q" size="25" type="text" value="Cari artikel disini..." /><input id="search-btn" src="http://i38.tinypic.com/5dw6c2.jpg" style="margin: 3px 0pt 0pt 5px;" type="image" value="Search" /></form><a href="http://bit.ly/27wzO7">.</a>

Terima Kasih...Semoga bermanfa'at.