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 antara cara membuat background danmembuat 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNkOaDYJAHXdMy6d1vJbPmUR3RuWLt-416rFsztgsTlApcrBknJHfYw0oasMuWv0h0uOb10yPTSGwMbMU5lC56jldjcs6vt6rKOTPVfSFs12Orbk0x9ufkdo5uZ2bmIDsY5jYNVnRJzfI/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNkOaDYJAHXdMy6d1vJbPmUR3RuWLt-416rFsztgsTlApcrBknJHfYw0oasMuWv0h0uOb10yPTSGwMbMU5lC56jldjcs6vt6rKOTPVfSFs12Orbk0x9ufkdo5uZ2bmIDsY5jYNVnRJzfI/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNkOaDYJAHXdMy6d1vJbPmUR3RuWLt-416rFsztgsTlApcrBknJHfYw0oasMuWv0h0uOb10yPTSGwMbMU5lC56jldjcs6vt6rKOTPVfSFs12Orbk0x9ufkdo5uZ2bmIDsY5jYNVnRJzfI/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 untukmembuat 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNkOaDYJAHXdMy6d1vJbPmUR3RuWLt-416rFsztgsTlApcrBknJHfYw0oasMuWv0h0uOb10yPTSGwMbMU5lC56jldjcs6vt6rKOTPVfSFs12Orbk0x9ufkdo5uZ2bmIDsY5jYNVnRJzfI/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 menentukanURL 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/AVvXsEj6V-ipCrMMZguVe5_WCnSxVkscGA6ceOvV7xT50Nci_wPewu48V7l8cPlxc4qkM0AJqGkOLmlVG71YzTsxQzi99AMNyGgLDUgRGCrFYdG-Xnj4Dex1N3YKg-y7kofPFB4sB_c1Z9HrY-I/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNkOaDYJAHXdMy6d1vJbPmUR3RuWLt-416rFsztgsTlApcrBknJHfYw0oasMuWv0h0uOb10yPTSGwMbMU5lC56jldjcs6vt6rKOTPVfSFs12Orbk0x9ufkdo5uZ2bmIDsY5jYNVnRJzfI/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/AVvXsEj6V-ipCrMMZguVe5_WCnSxVkscGA6ceOvV7xT50Nci_wPewu48V7l8cPlxc4qkM0AJqGkOLmlVG71YzTsxQzi99AMNyGgLDUgRGCrFYdG-Xnj4Dex1N3YKg-y7kofPFB4sB_c1Z9HrY-I/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNkOaDYJAHXdMy6d1vJbPmUR3RuWLt-416rFsztgsTlApcrBknJHfYw0oasMuWv0h0uOb10yPTSGwMbMU5lC56jldjcs6vt6rKOTPVfSFs12Orbk0x9ufkdo5uZ2bmIDsY5jYNVnRJzfI/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. 

Anda Baru saja membaca artikel tentang Membuat background Gambar pada Kotak pencarian dan anda bisa menemukan artikel Membuat background Gambar pada Kotak pencarian ini dengan url http://ghilankmayones.blogspot.com/2012/09/membuat-background-gambar-pada-kotak.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Membuat background Gambar pada Kotak pencarian ini bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Membuat background Gambar pada Kotak pencarian sumbernya.

Artikel Lain Yang Mungkin Anda Cari: