BBM : D55 CB 98A
WA : 0853 2023 77xx
sales@fahrurosid.com

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



Jika Anda telah menambahkan widget pencarian atau search box ke blog Anda, Anda mungkin bertanya-tanya bagaimana hal itu bisa terlihat sedikit lebih bergaya!

Sebetulnya dalam membuat model widget pencarian tidak sulit sama sekali. Anda dapat menyesuaikan tombol menggunakan CSS atau ganti dengan gambar sebagai gantinya. Pilihan lain kustomisasi adalah dengan menambahkan beberapa informasi teks di dalam kotak pencarian dan menghapus pencarian tombol sama sekali.

Dalam posting ini, kita akan melihat beberapa opsi dan metode untuk menyesuaikan widget pencarian, sehingga Anda dapat memilih metode yang terbaik bagi Anda dan gaya kotak pencarian agar sesuai dengan desain keseluruhan blog Anda sendiri.

Widget Search adalah contoh yang sangat baik dari apa yang bisa dimasukkan dalam header blog, dan dalam posting ini kita akan belajar bagaimana bentuk pencarian dapat ditata sesuai dengan tema Anda.

Widget Cari adalah jenis bentuk, dibangun dari kotak teks (area dimana Anda mengetik istilah pencarian), tombol kirim, dan beberapa elemen tersembunyi yang mengirim informasi ke server tentang pencarian yang sedang dilakukan.

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:

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:

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:

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:

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

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

Anda juga mungkin perlu menyesuaikan sedikit margin untuk gambar dari ukuran yang berbeda dengan yang digunakan dalam contoh ini.

Semoga bermanfaat...

Baca Juga Artikel Terkait







Tinggalkan Komentar



32 Respones to "Cara Membuat Kotak Search (Search Box) Yang Bergaya Di Blog"

Yusfi Wawan Sepriyadi.ST said...

thanks ya bagus bognya ...


12:02 AM
Republican Wasp said...

Makasih banyak untuk infonya. Sesuai dengan yg saya cari-cari nih


6:02 PM
Lowongan Bank Mandiri Syariah 2012 said...

Sangat bermanfaat sekali mas. Sukses saya pasang.
Slam hangat dari blogger newbie


4:35 PM
dokunimus said...

mantap sob. Thanks tipsnya.


5:44 PM
SetyoPrayitno said...

mantap sob infonya..
izin nyedot sooob...


10:45 AM
limare pastinipus said...

makasih ilmu nya.
jika tak keberatan mampir lah di http://jalanbersamalimare.blogspot.com


3:42 PM
Oemar said...

lengkap banget mas...

jadi banyak referensi nih untuk membuat kotak pencarian di blognya.

makasih mas dh share :D


11:23 AM
dfn7 said...

makasih sob tutornya
sudah ane pasang di blog ane...


2:48 PM
Rifqi Ramadhani said...

kalo cuman buat hovernya saja gimana caranya?


7:14 PM
Bagus-Seno said...

Makasih mas!!! udh dicari kemana2 akhirnya ktmu, thanks ya!


5:02 PM
unic29 said...

thanks mas :)


7:16 PM
Belajar Saraf said...

Langsung dicoba...dan berhasil...
Maturnuwun gan....
Salam...


5:09 AM
Fikri said...

Mantap nih....

terimakasih :-D


6:24 AM
djiesoft said...

berhasil... mantap!!!!!!


9:07 PM
Teguh Sinulingga said...

bro... coba liat blog saya. liat di menunya!

trus yang kutanyain nih mas bro. bikin kotak searchnya di ujung menu itu gimana bro?
mumpung masih pemula
http://mhdteguhs.blogspot.com


1:25 PM
rumah kinkani said...

thank's....berhasil, sangat bermanfaat


10:46 AM
Egha said...

berhasil egha terapin di blog egha.. terimakasih kaka :)


12:21 AM
Raja Muda (BADRY) said...

infonya sangat bermanfaat bangat ni gan, jangan lupa juga jalan2 ke blog aku y gan

http://badry7.blogspot.com


6:33 AM
CID Alex said...

Mantab Gan(Thx Infonya),
Kalo Mampir Blog Saya Slalu Terbuka :
7-wins-share.blogspot.com


5:47 PM
Hanggar PS said...

ini bisa jalan di wordpress gak mas


7:25 PM
Backlink Gratis said...

ijin praktek dulu Om...


1:32 PM
Jona Rendra said...

wah, lengkap sekali tutorialnya
makasih sudah share


7:19 PM
infrared thermometer said...

makasih pak, tapi itu bisa jalan ngga di wordpress ? kalau bisa apanya yang di modifikasi ? makasih sebelumnya


5:12 PM
upload cx said...

TERIMA KASIH GAN SUDAH BISA!1


mampir ke Blog saya :


http://wins-xp.blogspot.com/,
http://loadata.blogspot.com/


11:32 AM
umroh alhabsyi said...

iya Gan... untuk wordpress gimana? bagi tips nya dong. suwun

mampir ke www.umrohalhabsyi.com Gan


12:03 AM
Properti Niaga said...

Makasih tutorialnya sob, langsung dicoba ya......


2:41 AM
Belajar Search Engine said...

wah, lengkap sekali tutorialnya
makasih sudah share


6:54 PM
Anonymous said...

itu mah cuma kotaknya doang bro, mana bisa cari,pasti pas di klik serching ga bisa.kode panggilnya aja ga ada. cepek dehhhhhhh


2:46 PM
Cara Membuat Buku Tamu Tersembunyi di Blog said...

Sangat membantu gan infonya buat saya pribadi. terimakasih sebelumnya ya gan sudah share artikel ini.


10:27 AM
Spy L-86 said...

Kunbal ya gan
http://ghaptech.blogspot.com/


11:44 AM
Arsitek Banjarmasin said...

thanks ilmunya


8:11 PM
Adi Jaya said...

Makasih tips nya sudah diformat diblog saya


12:23 AM

Post a Comment

Previous Article Next Article
Home