Membuat Kotak Pencarian Di Blogger

Kotak pencarian sangat perlu ditambahkan pada blog. Kotak pencarian atau search box akan memudahkan pengunjung untuk menemukan artikel pada blog seperti artikel yang sudah lama diposting. Seperti layaknya kotak cari pada google, yahoo dan search engine lainnya, maka anda pun bisa membuatnya sendiri pada blog anda. Blogger sudah menyediakan fitur kotak cari atau kotak penelusuran ini. Untuk menambahkan gadget kotak penelusuran ke blog anda, caranya dengan masuk ke bagian elemen halaman dan tambah gadget kemudian pada menu selanjutnya pilih kotak penelusuran dan letakkan pada bagian mana saja anda inginkan. Nah, yang saya tawarkan adalah, bagaimana membuat kotak penelusuran yang lebih cantik dan bisa anda atur sendiri sesuai template blog anda. Pada umumnya tombol default kotak cari ini berwarna abu-abu seperti yang sering anda temui. Nah, anda bisa merubahnya dengan warna lain serta modifikasi kotak pencarian lainnya.

Memodifikasi kotak pencarian tidaklah begitu sulit, hanya membutuhkan sedikit kesabaran untuk mengutak-atik widget ini. Kreatifitas pada kode CSS tentu diperlukan. Selain merubah warna anda pun bisa menghilangkan tombol pencarian dan menggantinya dengan gambar atau icon tertentu. Pilihan kustomisasi lainnya adalah dengan menambahkan beberapa informasi teks di dalam kotak pencarian. Dalam posting ini, anda akan melihat beberapa pilihan dan cara kustomisasi kotak pencarian, sehingga anda dapat memilih metode yang paling cocok dengan selera anda serta menyesuaikannya dengan template blog anda.

Widget kotak pencarian adalah sebuah kotak dimana anda dapat mengetikkan teks yang akan dicari di dalamnya. Nah, informasi yang anda ketik akan dikirimkan ke server untuk memproses teks yang anda cari untuk menemukan hasilnya.

Nah, 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 :

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 :

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 :

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 :

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 Iconlet tempat 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:

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.

Sekarang anda sudah bisa membuat kotak pencarian dengan beberapa pilihan di atas. Nah, untuk menmpatkannya di blog blogger saya rasa semuanya sudah bisa kan. Sudah saya tulis koq di paragraf paling atas pada kalimat yang berwarna hijau. Oke deh, selamat berkreasi dengan kotak pencarian. Bagi blogger yang sudah mahir dan punya modifikasi kotak penelusuran yang lain, jika tidak keberatan, dapat berbagi ilmu di sini. Terimakasih semoga bermanfaat.

Related Post:

Widgets

• Pasang Widget Top Commenters Di Blogger
• Pasang Widget Top Posts Di Blogger
• Pasang Widget Kode Warna Pada Blogger
• User Online Widget Whos Amung Us
• Related Posts With Thumbnails Dari Aneesh
• Related Posts With Thumbnail Dari LinkWithin
• Membuat Related Posts Fungsi Scrolling
• Pasang Widget Recent Comments Blogger
• Pasang Widget Recent Post Blogger
• Membuat Tab View Widget Blogger
• Mengganti Read More Dengan Banner
• Label Cloud Fitur Terbaru Blogger
• Membuat Label Cloud Blogumus Blogger
• Membuat Form Berlangganan FeedBurner
• Read More Dengan Judul Posting
• Cara Membuat Read More Blog
• Membuat Related Post Blogger

or or