Rahasia Memodifikasi Kotak Pencari di Blog

Sudah banyak artikel yang membahas cara memodifikasi kotak pencari ini. Namun kebanyakan yang saya tau, kita hanya terima bersih saja. Tanpa tau, apa-apa saja maksud menggunakan perintah ini dan itu. Artikel ini merupakan pengalaman saya saat mengenal CSS pada dunia blogger. Kamu yang memasang kotak pencari seperti contoh gambar sebelum di modifikasi, mungkin ingin sekali merubah tampilan kotak pencari tersebut sesuai keinginan (gambar setelah di modifikasi). Sebenarnya tidak begitu sulit merubah tampilan kotak pencari seperti contoh gambar diatas. Coba simak langkah-langkah berikut untuk dipelajari.

Cara memasang kotak pencari di blog
Untuk memasang kotak pencari tidaklah begitu sulit. Yang perlu kamu lakukan adalah meng-copy code berikut dan meletakkannya sesuai keinginan. Apa itu di letakkan di gadget baru atau meletakkannya kedalam file template kamu seperti pada blog ini.

<form action='http://namablog.blogspot.com/search' method='get'>
<input class='text-area' name='q' size='30' type='text'>
<input id='cari' name='submit' type='submit' value='search'>
</form>

Catatan: Ganti tulisan yang bewarna hijau dengan alamat blog kamu. Sedangkan yang bewarna merah adalah hal akan kita gunakan sebagai perintah dalam memodifikasi kotak pencari tersebut. Untuk perintah pada value, kata search dapat kita ganti dengan kata Go! atau apapun yang kamu inginkan.

Memodifikasi kotak pencari di blog
Untuk melakukan modifikasi pada kotak pencari diatas, cukup kita tambahkan perintah CSS. Baik memberi warna, mengatur bentuk tulisan, dsbg-nya. Lihat langkah berikut:

.text-area { border: 1px solid #D8D8D8; width: 200px; padding: 4.5px; }
#cari { border: 1px solid #FE2E2E; background: #F78181; color: #fff; width: 60px; padding: 3px; }

Penjelasan: Pada bagian border, kita menggunakan ketebalan 1px dan solid merupakan efek garis pada area text (bingkai pada area text tersebut). Sedangkan kode yang bewarna kuning emas tersebut, itu merupakan kode warna yang digunakan. Dan kamu dapat menggantinya sesuai keinginan. Atur juga lebar (width) dan padding yang digunakan, sesuai dengan kondisi template kamu saat ini.

Untuk mengatur bentuk tulisan agar berbeda baik pada area teks pencari maupun pada submit pencari, cukup menambahkan perintah font pada css kotak pencari kamu. Sedangkan untuk memberikan efek berbeda pada saat sebelum dan setelah disentuh kotak pencari tersebut, sebenarnya rahasianya adalah memeberikan perintah lainnya yaitu perintah focus, hover and active. Kurang lebih seperti yang pernah saya jelaskan sebelumnya "cara mengubah model link di blog sesuai keinginan".

Update 16 Oktober 2013
Contoh penerapan focus, hover, and active pada kotak pencari:

.text-area {border: 1px solid #D8D8D8; width: 200px; padding: 4.5px;}
.text-area:hover {border: 1px solid #A4A4A4;}
.text-area:focus {border: 1px solid #B40404;}

#cari {border: 1px solid #FE2E2E; background: #F78181; color: #fff; width: 60px; padding: 3px;}
#cari:hover {border: 1px solid #FA5858; background: #FE2E2E;}
#cari:active {border: 1px solid #8A0808; background: #F78181;}

Lihat: demo.
Begitulah caranya memodifikasi kotak pencari yang ada di blog kita. Mudah-mudahan artikel ini dapat membantu kamu untuk lebih memahami penggunaan fungsi CSS pada template yang kita gunakan.