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. 

Baca Pula Artikel Terkait:

Tutorial Blogger

5 komentar:

  1. Anonim5 September 2012 pukul 06.10

    nice posting sob

    BalasHapus
  2. pakar facebook10 September 2012 pukul 07.53

    mantab sob thanks ya.. saya coba dahulu :)

    BalasHapus
  3. Anonim15 September 2012 pukul 23.11

    ██▄░██░██░░▄███▄░████
    ███▄██░██░██▀░▀▀░██▄░ INFO
    ██▀███░██░██▄░▄▄░██▀░
    ██░░██░██░░▀███▀░████

    BalasHapus
  4. Unknown20 September 2012 pukul 06.34

    Wah keren sudah berhasil di pasang di blog saya makasih ya sobat

    BalasHapus
  5. Unknown29 September 2012 pukul 23.11

    Terimakasih semuanya sudah berkomentar diblog saya..

    BalasHapus

Tolong berkomentar yang baik, tidak diperkenankan kalian berkomentar berbau Porno, Silahkan Kirim tautan Link sobat, otomatis saya kunjungi blog sobat, Silahkan tanyakan pada ADMIN Pada forum tanya jawab, jika kalian belum mengerti dalam menata code html, semua masukan/nasihat akan diterima oleh ADMIN, asalkan bersifat membangun :) and Keep blogging guys.