Cara Membuat Search Box atau Kotak Pencari di Blog

Posted by Herman on Saturday, November 01, 2008 24 comments

search iconSaya yakin para netter pasti sudah tidak asing lagi dengan yang namanya search box. Karena kita rata-rata mencari alamat website atau informasi dengan tool ini.

Secara singkat, search box adalah sebuah tool yang digunakan untuk mencari data-data atau alamat website dengan memasukkan kata kunci yang ingin kita cari.

Namun search box atau kotak pencari yang biasa kita gunakan hanya memungkinkan kita untuk mencari data di mesin pencari seperti Google, Yahoo, dan MSN. Lalu bagaimana kalau kita ingin mencari data hanya pada blog kita saja?

Mungkin sekarang sudah banyak template yang sudah disediakan kotak pencari atau search box. Tapi bagi template yang tidak dilengkapi dengan fasilitas ini. Anda juga bisa memasangnya sendiri dengan cara sebagai berikut:

1. Login ke Blogger. Klik menu Design -> Page Elements. Lalu klik pada Add a Gadget.

2. Klik
Add a Gadget -> HTML/Java script


3. Masukkan kode dibawah ini kedalam kotak dan klik Save

<p align="left">
<form id="searchthis" action="ALAMAT URL BLOG/search" style="display:inline;" method="get">
<strong>NAMA KOTAK<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>
Ganti ALAMAT URL BLOG dengan alamat URL blog Anda. Misalnya, http://www.hermanblog.com dan ganti NAMA KOTAK dengan nama yang ingin Anda tampilkan pada kotak. Misalnya, Cari artikel disini, Cari disini, dan lain-lain.

4. Jika sudah selesai, klik Save lalu klik View Blog untuk melihat tampilannya di blog.

Jika Anda merasa kotaknya terlalu panjang atau pendek. Anda bisa mengubah ukurannya dengan mengganti nilai pada size. Anda juga bisa mengganti nama tombol Search dengan nama lain misalnya, Cari atau lanjut.

Sebagai contoh, saya mengganti "size=30" dan "value=cari" maka hasilnya akan seperti yang dibawah ini.


Selamat berkreasi.. senyum


Recent Posts:

24 comments

TYROLEANS said... 11 January, 2009
thanks ya broo
GilaGaliGula said... 22 June, 2009
Saya Udah COba Kok pas Klik search Ga mau ya
GilaGaliGula said... 22 June, 2009
Eh maaf Search nya sudah bisa ding...
makasih ya... hehehe
mau tanya nih
kalo pengen Area POst nya bertambah Lebar gimana caranya ya...
karena kadang kalo Tulisan terlalu panjang suka kepotong ga kliatan
maakasih atas jawabannya

http://gula-gilagaligula.blogspot.com/
herman said... 23 June, 2009
@gilagaligula: untuk mengedit area posting anda harus menuju ke bagian edit HTML. Disana coba anda cari kode main-wrapper. Kalau uda ketemu ganti widthnya dengan 468px. Itu adalah ukuran standar dari area posting
Arhiez said... 21 June, 2010
oke Mas Herman, terima kasih atas tutorialnya.
saya dah berhasil buat kotak search.

saya baru belajar ngeblog, mohon bimbingannya ^_^
Anonymous said... 09 August, 2010
thank ilmux bro,slm sukse ;)
danie.ayank said... 16 January, 2011
keren gan...
baliano sugito said... 24 January, 2011
kok gak bisa kebuka yaaaa
Apris Wahyudi said... 31 January, 2011
thank infonya kakanda herman,tulisan anda bermamfaat banget ne.. blog kakanda sebagai acuan jg ne bg blog sy.. ;;)
clinic17 said... 14 February, 2011
gan gmn kalo kotak pencarinya diletakan persis di tab pojok sebelah kanan spt punya anda gan?
Mintarja (Bang Jack) said... 27 February, 2011
Makasih ya Infonya. Sudah kuterapkan. Follow balik ya. :D
La Ode Ali Imran said... 03 April, 2011
Tanya : ne search box tuk jelajah umum atau khusus search buat kontent blog kita...?
Makasih infonya.


http://anakkla.blogspot.com
Citra D. Vresti Trisna said... 16 April, 2011
matur nuwun sanget bro
Aryadonita said... 15 June, 2011
Hallo salam kenal bos...mo tanya..kenapa menu search ( ane pake html dari bos nih ) gak jalan ya pas di kustom ke dotcom? tapi kalo kembali ke blogspot, berfungsi kembali? blog nya bos ini menu search nya lancar???mohon pencerahan ya..trims..
www.hobijadul.com
Pimpim Blog Apps Batch File DLL said... 11 July, 2011
=))
Adi Sabit said... 21 September, 2011
thx infonya mas..
udh d coba, suksess!! :D

kunjungi juga ya blog saya..
http://adi-sabit.blogspot.com
Mbahyar said... 24 October, 2011
oh ternyata begini caranya , sudah sering saya lihat tapi baru ini saya praktekan. artikelnya sangat bermanfaat bwt sy khususnya yg baru ngeblog..
blog newbe http://mbahyar.blogspot.com
goztanppobsumut said... 03 December, 2011
izin copas mas...;)
edwinray said... 08 March, 2012
Thanks..Gan..Mantap artikelnya
INDRO PRAMONO said... 04 November, 2012
terimakasih banyak mas bro,,,
:)
mantap dah,,,
Zzyafra Iomaski Zihana said... 10 November, 2012
kok pas nyari gak ketemu? padahal ada. apa krn postingan baru?
yusuf ardhi kusumah said... 17 November, 2012
thanks infonya ya gan .. mampir, iyuzkaze94.blogspot.com
ubudscooterrental said... 19 January, 2013
Makasih ya informasinya..
aku pengen pasang search box bersamaan dengan menu kayak web ini...
mohon pencerahanya....
Cattingspot said... 16 February, 2013
terima kasihh banyak sob :)

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

Post a Comment