cara membuat kotak pencarian di blog

Jika Anda telah menambahkan widget pencarian atau search box ke blog Anda, Anda mungkin bertanya-tanya bagaimana hal itu bisa terlihat sedikit lebih bergaya!

Sebetulnya dalam membuat model widget pencarian tidak sulit sama sekali. Anda dapat menyesuaikan tombol menggunakan CSS atau ganti dengan gambar sebagai gantinya. Pilihan lain kustomisasi adalah dengan menambahkan beberapa informasi teks di dalam kotak pencarian dan menghapus pencarian tombol sama sekali.

Dalam posting ini, kita akan melihat beberapa opsi dan metode untuk menyesuaikan widget pencarian, sehingga Anda dapat memilih metode yang terbaik bagi Anda dan gaya kotak pencarian agar sesuai dengan desain keseluruhan blog Anda sendiri.

Widget Search adalah contoh yang sangat baik dari apa yang bisa dimasukkan dalam header blog, dan dalam posting ini kita akan belajar bagaimana bentuk pencarian dapat ditata sesuai dengan tema Anda.

Widget Cari adalah jenis bentuk, dibangun dari kotak teks (area dimana Anda mengetik istilah pencarian), tombol kirim, dan beberapa elemen tersembunyi yang mengirim informasi ke server tentang pencarian yang sedang dilakukan.

Jika Anda menggunakan Blogger widget pencarian sederhana, kode untuk widget pencarian Anda akan terlihat 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>

Unsur-unsur yang bisa kita lihat dalam warna merah. The "search-box" elemen itu adalah kotak yang berisi teks pencarian, sedangkan "search-btn" adalah tombol kunci untuk menyampaikan permintaan pencarian ke server. 
Secara default, widget pencarian sederhana ini akan muncul seperti ini dalam template Anda: 

Tetapi menggunakan beberapa teknik sederhana, kita bisa membuat ini terlihat jauh lebih cantik! 

1 .Menggunakan CSS

Kustomisasi yang paling mudah dapat dicapai hanya menggunakan "inline CSS": ini berarti bahwa kotak pencarian dan tombol dapat ditata dalam kode yang digunakan untuk kotak pencarian. 

Sebagai contoh, katakanlah kita ingin kotak pencarian untuk memiliki latar belakang biru pucat dan perbatasan biru tua. Untuk mencapai hal ini, kita hanya menambahkan beberapa deklarasi gaya ke elemen "pencarian-kotak", seperti ini: 

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

Dengan menambahkan gaya deklarasi ini, kita dapat membuat suatu bentuk pencarian yang terlihat seperti ini: 

Kita juga dapat menambahkan gaya pada tombol pencarian dengan cara yang sama. Kali ini, latar belakang biru tua dengan pinggiran merah, sementara teks berwarna putih dan tebal: 

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #ccccff; border: 2px solid #000066"/>
<input id="search-btn" value="Search" type="submit" style="background: #000066; border: 2px outset #ff0000; color: #ffffff; font-weight: bold;"/>
</form>

Perhatikan bahwa dalam contoh ini, saya menggunakan "outset" daripada "solid" untuk properti perbatasan; ini memastikan tombol terlihat mengangkat bukannya datar, dan membantu pembaca memahami bahwa itu adalah sebuah tombol yang dapat diklik. 
Berikut adalah bentuk yang dihasilkan: 

Anda dapat melakukan percobaan dengan berbagai warna dan gaya untuk formulir pencarian Anda sendiri untuk membuat sebuah desain yang unik. 

2. Teks Yang Terlihat

Anda bisa menambahkan beberapa teks dalam kotak pencarian sebagai panduan bagi pembaca Anda (misalnya:! Cari di Blog Ini). 
Hal ini dicapai dengan menambahkan "nilai" ke kotak pencarian, seperti 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>

Ini akan tampil seperti ini: 

Untuk mengubah teks pada tombol pencarian, kita hanya perlu mengubah pada value-nya saja: 

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

Jika Anda lebih memilih tombol untuk mengatakan "Go!", Anda hanya bisa mengganti value dari "Search" dengan "Go!" sebagai gantinya: 

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