membuat kotak pencarian di blogspot

kode widget kotak pencarian sederhana untuk blogger yang biasa anda temui adalah seperti ini :

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

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. Secara default, kode widget kotak pencarian di atas akan menjadi seperti ini :

Top of Form

Bottom of Form

Namun dengan beberapa sentuhan teknik sederhana, kita dapat membuat tampilan kotak pencarian menjadi lebih cantik.

Menggunakan kode CSS untuk kustomisasi kotak pencarian
Sebagai contoh, katakanlah kita menginginkan kotak pencarian dengan menambahkan warna latar belakang. Oke, saya pilih latar belakang warna hijau muda dan warna hijau gelap sebagai garis batas. Untuk membuatnya, maka gunakan kode CSS di bawah ini :

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #81F781; border: 1px solid #088A08"/>
<input id="search-btn" value="Search" type="submit"/>
</form>

Kode di atas akan menghasilkan kotak pencarian seperti di bawah ini :

Top of Form

Bottom of Form

Nah, kotak pencarian di atas akan kita modifikasi lagi dengan menambahkan warna latar belakang, garis tepi tombol dan warna teks pada tombol. Oke, saya pilih latar belakang warna hijau tua, garis tepi warna merah dan teks ditebalkan berwarna putih :

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #81F781; border: 1px solid #088A08"/>
<input id="search-btn" value="Search" type="submit" style="background: #0B610B; border: 1px outset #DF0101; color: #ffffff; font-weight: bold;"/>
</form>

Saya sengaja membuat garis tepi dengan perintah "solid" agar kotak pencarian terlihat timbul dan bukannya datar atau flat button. Tujuannya agar orang tahu bahwa itu adalah sebuah tombol yang dpat di klik. Nilai ketebalan 1px masih dapat anda ubah lagi. Namun ada banayk blog yang memilih untuk membuat kotak pencarian tombol flat, terserah saja mau pilih yang bagaimana. Hasil kode kotak pencarian di atas seperti ini :

Top of Form

Bottom of Form

Sesuaikan kode-kode di atas dengan selera dan template anda. Misalnya anda ingin mengganti warna dan tebal garis tepi agar terlihat unik dan menarik. Untuk merubah warna, silahkan lihat kode warna saya.

Kustomisasi teks pada widget kotak pencarian
Anda bisa menambahkan beberapa teks dalam kotak pencarian sebagai panduan bagi pembaca . Misalnya anda ingin memasukkan tulisan "cari di blog ini!" atau "ketik untuk mencari". Untuk membuatnya, kita perlu menambahkan kode CSS pada menjadi seperti kode di bawah ini :

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

Maka hasilnya akan seperti di bawah ini :

Top of Form

Bottom of Form

Teks pada tombol pencarian juga dapat diganti dengan teks pilihan anda. Pada contoh di atas teks nya adalah "Search". Nah, anda tinggal mengganti teks tersebut pada bagian kode ini :

<input id="search-btn" value="Search" type="submit"/>

Misalnya anda ingin menggantinya dengan teks "Go!" maka kodenya akan menjadi seperti ini :

<input id="search-btn" value="Go!" type="submit"/>

Menggunakan gambar sebagai tombol kotak pencarian
Seperti pengantar di atas, tombol widget dapat anda hilangkan dan menggantinya dengan gambar atau icon tertentu. Ga sulit-sulit amat koq, biasa saja. Untuk membuatnya, kita hanya perlu mengubah jenis input dari "Submit" diarahkan ke "Image" dan menentukan URL untuk gambar atau icon tersebut. Artinya anda harus menyiapkan gambar yang sudah dihosting pada tempat hosting gambar eksternal anda. Sebaiknya gunakan gambar atau ikon kecil dengan ukuran 16x16 pixel atau sedikit lebih besar dari ukuran tersebut agar pas untuk ukuran kotak pencarian. Ada banyak ikon pencarian gratis yang tersedia di internet. Misalnya saya menggunakan icon dari Iconlettempat mencari icon gratis dengan banyak pilihan menarik. Contohnya seperti gambar icon di bawah ini :
Untuk menggunakan icon tersebut sebagai pengganti tombol kotak pencarian, maka kode yang digunakan adalah seperti di bawah ini :

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

Pada kode di atas, saya telah mengubah jenis input "submit" ke "image" serta menambahkan URL dari icon yang sudah saya hosting pada baris setelah "image". Agar icon tepat di samping kotak pencarian, maka saya menmbahkan margin-left dan nilai jarak 5 pixel. Hasilnya adalah seperti di bawah ini:

Top of Form

Bottom of Form

Nah, anda dapat menggunakan icon milik saya atau dengan icon milik anda. Yang jelas, pastikan URL icon untuk kotak pencarian anda sudah benar. Anda juga masih dapat menyesuaikan ukuran gambar serta margin yang ada pada kode di atas agar sesuai dengan template blog anda.