Membuat Kotak Pencarian/Search Box Blogger Bervariasi

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 antara cara 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="http://1.bp.blogspot.com/_xn2gmPb9TfM/R7YdyNkY3zI/AAAAAAAAA70/iOqf0FD-iUQ/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="http://1.bp.blogspot.com/_xn2gmPb9TfM/R7YdyNkY3zI/AAAAAAAAA70/iOqf0FD-iUQ/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.

Related Post:

42 comments:

microlite said...

nice info gan ane coba langsung ya gan :)

timbangan said...

iya nih bagus banget gan infonya makasih yaw

inverter mitsubishi said...

wah baru tahu ternyata background search boxnya bisa diganti thanks ya gan . . . .

roni said...

Makasih atas kunjungannya sob,

Rudy Hartono said...

ada-ada aja ide cemerlangnya, nice share ya

roni said...

Makasih mas Rudy

CienTriks Blog said...

Thanks sob atas infonya...
ditunggu info yg lainnya!

masih newbie!

Blog Belajar SEO said...

Terimakasih banyak mas sudah sharing :)

Zamrud Muhammad said...

sippp gan, thx gan tutorialnya, sangat bermanfaat, :) Zamrudblog.blogspot.com

Penyuluh Perikanan said...

Artikelnya sangat bermanfaat sekali sahabatku, saya pelajari dulu nih gan...
terima kasih atas ilmunya yang sudah dibagikan
salam

Bud@k Bager said...

okeh makasih tutornya sob... kunjungi balik ya??....
http://budakbageer.blogspot.com/
makasih.....

PegiPegi.com : Booking Hotel Murah & Mudah di Indonesia said...

mantap ilmunya gan. aku coba gan ke blogku

Obat Herbal Sakit Pinggang said...

Waduh ternyata search box bisa di ganti warna sesuai keinginan kita sangat bgus banget nieh gan.. Thx gan...

Agen XAMthone Plus Batam said...

Jadi berminat nieh mengganti warna search boxnya.. Thx gan..

firman said...

makasihh hasilnya ok cocok dg blog aku,,

Android Ku said...

Mantap infonya...
lanjutkan !!!

Ulan News said...

waw keren ya gan,

Senja Berita said...

sangat bervariasa tampilannya
nice sharing sobat :D

Sandi Sunday said...

thanks bro...

sains in world said...

amazing bang........

Syirkah Majjan said...

Mantab sob...
makasih yaa...

blitari.blog said...

nice share gan... terimakasih ilmunya..

Yoga Purnama Putra Perdana said...

Kunjungan balik dr saya sobat,, boleh minta follow di blog saya tidak, www.dititik.tk

achmadfc said...

trimakasih,.

Dewa dewi said...

info yang menarik ,sy ada info kontes seo WALETBET PROMO BONUS 100% SPORTBOOK DAN CASINO ONLINE Seragam Kerja Kantor Murah di Surewi obat wasir dan ambeien manjur Deprimaterra.com kawasan industri dan pergudangan eksklusif dengan penghijauan fortuner suv terbaik

deprimatera.com said...

tutorial yang sangat menarik..

Jefry said...

sepertinya bagus juga kalau kotak searchnya dimodifikasi seperti ini

Bang Kamplenk said...

Info yg bermanfat...
Mampir atuh ;)

Ijen said...

Patut dicoba nih gann :)

Jona Rendra said...

Wow bagus jadinya, saya coba pasang ke blog saya dulu ya
semoga berhasil...

zamroniys said...

bagus ini bang,, terima kasih ya

sinopsis dan review film said...

lengkap banget gan, model kotak pencariannya, ijin mencoba salah satu gan...

zigazine said...

Thanks Infonya...

vipergoy.com said...

mantap infonya gan^^

anggie indra said...

terimakasih kawan

KADO SAYANG said...

Makasih gan infonya,cocok buat referensi nih...

Pusat Informasi said...

mantap mas, kalo cara buat sama dengan rajahape.com gimana?

Pusat Berita Terbaru said...

good

sikkahoder said...

sangat2-sangat keren... makasih, sedikit pertanyaan, bagaimana membuat agak besaran dikit... angka mana yang diganti???

Jalu Akbar said...

thanks

Muhammad Godc said...

Terima kasih gan tutornya.

Pupuk Organik said...

terima kasih infonya
silakan kunjungi ke web kami
http://nasasuper.com/
http://jualpupukorganik099.blogspot.co.id/

Post a Comment