Cara Membuat Kotak Search (Search Box) Yang Bergaya Di Blog

Cara Membuat Kotak Search (Search Box) Yang Bergaya Di Blog

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:

Top of Form

Bottom of Form

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:

Top of Form

Bottom of Form

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:

Top of Form

Bottom of Form

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:

Top of Form

Bottom of Form

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/AVvXsEh83gnk_bg4H_U-iqfVphjlmiHMWrlFKq-nUyaKMz-nIgNBPS84769L6HZcznG0-5mg7gZhWFdxoJ2EeQyJTYkSJ8qvURaEScf5sNf8D-gYELDL2r77SjELW89ZTLU9TFP1QDT6gvh3N_0/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:

Top of Form

Bottom of Form

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

<form id="searchform" action="/search" method="get"> <input id="s" value="" name="q" type="text"/> <input id="searchsubmit" value="Search" type="submit"/> </form>