Cara Membuat Kotak Search (Search Box) Yang Bergaya 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"/>

3. Menggunakan Gambar

Menggunakan gambar bukan tombol tidak begitu rumit. Untuk itu, kita hanya perlu mengubah jenis masukan dari "Submit " untuk Image dan menetapkan URL untuk foto tersebut.

Pertama-tama, Anda perlu untuk mencari gambar yang ingin Anda gunakan, dan upload gambar tersebut ke account hosting eksternal.

Dianjurkan untuk menggunakan gambar kecil atau ikon untuk ini (16x16px atau sedikit lebih besar akan menjadi ukuran yang sempurna untuk bentuk pencarian). Ada banyak ikon pencarian gratis yang tersedia dari Iconlet, atau Anda bisa men-download paket ikon dan memilih gambar yang cocok sebagai gantinya.

Untuk contoh ini, saya akan gunakan gambar ikon yang di upload dari Iconlet:

Untuk menggunakan gambar ikon tersebut dijadikan sebagai tombol untuk form pencarian anda, ini adalah kode yang bisa anda gunakan:

<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="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTO1tDTieI_Xqau4zFtpSeRIGW7aQ-0ofNHHRT1wzLfk_8qfcyw_KP1TdG5MNIJzptmviooALxVpFZqZpfrsVfvQAIOJrgyfhqVvpNIh4bY9nrPU7fwGFEAulrEdRVdOZnIOEFyI_fz_Y/s320/search-small.jpg" style="margin-left: 5px; margin: 3px 0 0 5px;"/>
</form>

Perhatikan bahwa saya telah mengubah jenis input dalam bentuk ini dari "submit" untuk "gambar", dan telah menambahkan URL dari gambar saya sesudahnya. Deklarasi gaya meluruskan citra terhadap kotak pencarian, menambahkan beberapa ruang ke kiri, dan memastikan ini tidak mengapung di atas kotak pencarian.

Gambar tersebut akan terlihat seperti dalam bentuk pencarian ini:

Bila Anda ingin menggunakan foto Anda sendiri sebagai tombol kirim, pastikan referensi URL yang benar dari gambar Anda.

Anda juga mungkin perlu menyesuaikan sedikit margin untuk gambar dari ukuran yang berbeda dengan yang digunakan dalam contoh ini.

Semoga bermanfaat...