Membuat Kotak Pencarian/Search Box Blogger Bervariasi

   Search box atau kita sebut kotak pencarian adalah gadget yang berfungsi untuk mempermudah seorang pengunjung blog/situs untuk menjelajahi atau mencari artikel yang di inginkan pada situs yang di kunjungi. Sebagai contoh adalah Kolom pencarian/Search Box Google Custom di atas.

Membuat Search Box Blogger Sederhana

Jika anda ingin membuat kotak pencarian simple pada blog anda, anda hanya perlu menaruh kode widget pencarian dibawah ini pada bagian blog yang anda inginkan.

<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>

Kode di atas nanti akan terlihat seperti search box dibawah ini

Perlu anda ketahui, bahwa kode yang di beri tanda dengan warna merah di atas adalah wilayah yang bisa anda gunakan untuk menambahkan variasi gaya pada kotak pencarian. Dan Elemen input search-box adalah kotak yang berisi pencarian dimana anda bisa menuliskan frase yang di cari, sedangkan elemen input search-btn adalah tombol kunci untuk mengirimkan permintaan pencarian frase ke server.

Mengganti Warna pada Kotak Pencarian

Setelah anda tahu cara membuat search box sederhana seperti yang sudah saya jelaskan di atas secara rinci dan mudah di pahami, selanjutnya kita akan memberi sentuhan warna yang berbeda agar kotak pencarian terlihat lebih cantik dan menarik pengunjung agar menuliskan sesuatu di dalamnya untuk mencari artikel anda yang lain. Sebagai contoh saya akan merubah warna dalam kotak menjadi hijau dan border berwarna merah.

Untuk membuat search box dengan warna baru seperti di atas, anda hanya perlu menambahkan sedikit kode css setelah elemen search-box seperti dibawah ini yang saya beri warna merah dan biru.

<form action="/search" id="searchthis" method="get" style="display: inline;">

<input id="search-box" name="q" size="25"style="background: #01FA09; border: 2px solid #EF1515;" type="text" /><input id="search-btn" type="submit" value="Search" /></form>

Kode yang berwarna merah dan biru di atas adalah kode css untuk merubah warna kolom dan border, untuk kode yang di sorot dengan warna biru itu adalah kode warna dan ketebalan border yang bisa anda ubah untuk menyesuaikan tampilan blog anda.

Membuat background Gambar pada Kotak pencarian

Seperti yang telah anda lihat, bahwa kolom kotak pencarian bisa di hiasi dengan background gambar, sebenarnya cara ini sudah pernah saya jelaskan pada posting yang terdahulu Membuat Background dan Border pada Halaman Posting hanya saja dalam posting ini saya sedikit membuat hal yang baru yaitu menggabungkan antaracara membuat background dan membuat search box.

Untuk membuat search box dengan background gambar kode yang harus di pakai adalah ini.

<form action="/search" id="searchthis" method="get" style="display: inline;">

<input id="search-box" name="q" size="25" style="background: url(http://2.bp.blogspot.com/-6MwTs0kPVOA/TvW58maiTBI/AAAAAAAABqQ/C_zLuT1JE5g/s1600/batik%20solo.jpg); border: 2px solid #EF1515;" type="text" /><input id="search-btn" type="submit" value="Search" /></form>

Ket: Kode yang disorot dengan warna merah adalah link/Url gambar yang bisa anda ganti dengan link gambar yang di kehendaki.

Mengganti Warna Huruf dalam Kotak

Anda bisa melihat kode dibawah yang disorot dengan warna merah, itu adalah kode untuk membuat huruf yang diketikkan dalam kotak pencarian mempunyai warna sesuai yang kita inginkan.

<form action="/search" id="searchthis" method="get" style="display: inline;">

<input id="search-box" name="q" size="25" style="background: url(http://2.bp.blogspot.com/-6MwTs0kPVOA/TvW58maiTBI/AAAAAAAABqQ/C_zLuT1JE5g/s1600/batik%20solo.jpg); border: 2px solid #EF1515; color: #01fa09; font-weight: bold;" type="text" /><input id="search-btn" type="submit" value="Search" /></form>

Untuk lebih jelasnya anda bisa mencoba mengetikkan beberapa kalimat kedalam kolom pencarian dibawah ini.

Membuat Gaya pada Tombol Search Box

Setelah penjelasan cara membuat variasi warna pada kotak/kolom pencarian, selanjutnya saya akan menjelaskan bagaimana cara mengubah gaya pada tombol search box. Tombol search box adalah tombol yang berada disamping kotak pencarian dan biasanya terdapat tulisan Cari/Search yang berfungsi untuk mengirimkan permintaan pencarian kata yang di tulis didalam kotak pencarian kepada server.

Lihat tombol search box dibawah ini.

Untuk membuat tombol seperti di atas kita harus menambahkan sedikit kode css setelah elemen search btn.Lihat kode css yang disorot warna merah dibawah ini itu adalah kunci cara mengubah gaya pada tombol search box.

<form action="/search" id="searchthis" method="get" style="display: inline;">

<input id="search-box" name="q" size="25" style="background: url(http://2.bp.blogspot.com/-6MwTs0kPVOA/TvW58maiTBI/AAAAAAAABqQ/C_zLuT1JE5g/s1600/batik%20solo.jpg); border: 2px solid #EF1515; color: #01fa09; font-weight: bold;" type="text" /><input id="search-btn" style="background: #000066; border: 2px outset #ff0000; color: white; font-weight: bold;"type="submit" value="Search" /></form>

Ket: Untuk kalimat yang berwarna biru(Search) bisa anda ganti dengan kalimat lain.Seperti contoh search box dibawah ini.

Membuat Teks Terlihat dalam Kotak

Perhatikan kode yang berwarna merah dibawah ini, itu adalah kode untuk membuat teks terlihat dalam kotak pencarian dan anda boleh mengganti teks sesuai keinginan.

<form action="/search" id="searchthis" method="get" style="display: inline;">

<input id="search-box" name="q" size="25" style="background: url(http://2.bp.blogspot.com/-6MwTs0kPVOA/TvW58maiTBI/AAAAAAAABqQ/C_zLuT1JE5g/s1600/batik%20solo.jpg); border: 2px solid #EF1515; color: #01fa09; font-weight: bold;" type="text" value="Enter pencarian"/><input id="search-btn" style="background: #000066; border: 2px outset #ff0000; color: white; font-weight: bold;" type="submit" value="Search" /></form>

Menggunakan Gambar Sebagai Tombol

Menggunakan gambar sebagai tombol sangatlah mudah karena tehniknya hampir sama dengan cara mengubah background warna dengan background gambar dalam kotak pencarian yang sudah dijelaskan di atas, yaitu kita hanya perlu mengubah jenis input dari "Submit" untuk image dan menentukan URL gambarnya.

Dibawah ini adalah kode input untuk tombol search box sebelum menggunakan gambar sebagai tombol.

<input id="search-btn" style="background: #000066; border: 2px outset #ff0000; color: white; font-weight: bold;" type="submit" value="Search" />

Sedangkan dibawah ini adalah kode input untuk tombol search box yang sudah menggunakan gambar sebagai tombol pencarian.

<input id="search-btn"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHMBgZJc_CEQfmhCCDbU6YJanNGXJggF82r4amCsNGO2nTcUIlHmTfwmy1z6klZPCJO3Ar7eaIMcZ2toO7Wj3FaVouqmErl8uLgwhG6lNpjE4a_sOAHQQ7ewjTlamtbK0lzqx7ynA1qbg/s320/search-small.jpg" style="margin-left: 5px; margin: 3px 0 0 5px;" type="image" value="Search" />

Kode search box lengkapnya akan terlihat seperti dibawah ini.

<form action="/search" id="searchthis" method="get" style="display: inline;">

<input id="search-box" name="q" size="25" style="background: url(http://2.bp.blogspot.com/-6MwTs0kPVOA/TvW58maiTBI/AAAAAAAABqQ/C_zLuT1JE5g/s1600/batik%20solo.jpg); border: 2px solid #EF1515; color: #01fa09; font-weight: bold;" type="text" value="Enter pencarian" /><input id="search-btn" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHMBgZJc_CEQfmhCCDbU6YJanNGXJggF82r4amCsNGO2nTcUIlHmTfwmy1z6klZPCJO3Ar7eaIMcZ2toO7Wj3FaVouqmErl8uLgwhG6lNpjE4a_sOAHQQ7ewjTlamtbK0lzqx7ynA1qbg/s320/search-small.jpg" style="margin-left: 5px; margin: 3px 0 0 5px;" type="image" value="Search" /></form>

Dan hasil search box/kotak pencarian akan terlihat seperti dibawah ini.

Anda bisa mengganti URL gambar di atas dengan URL gambar yang anda inginkan.

-------------------------------------------------

Penjelasan akhir untuk kode search box

<form action="/search" id="searchthis" method="get" style="display: inline;">

<input id="search-box" name="q" size="25" style="background: url(http://2.bp.blogspot.com/-6MwTs0kPVOA/TvW58maiTBI/AAAAAAAABqQ/C_zLuT1JE5g/s1600/batik%20solo.jpg); border: 2px solid #EF1515; color: #01fa09; font-weight: bold;" type="text" value="Enter pencarian" /><input id="search-btn" style="background: #000066; border: 2px outset #ff0000; color: white; font-weight: bold;" type="submit" value="Search" /></form>

Kode yang diberi warna biru di atas adalah wilayah pengaturan gaya untuk kotak pencarian.
Sedangakan kode yang di beri warna merah adalah wilayah pengaturan gaya untuk tombol pencarian.

SEMOGA BERMANFAAT BUAT ANDA