2009-04-09

Memasang Kotak Pencarian / Search Box Pada Blogger

Bagi sebagian orang mungkin kotak pencarian ini tidaklah penting, tetapi keberadaan kotak pencarian ini menjadi begitu penting ketika ada pengunjung blog yang ingin mencari artikel atau apapun itu di blog anda. Nah jika pada blog anda tidak terpasang kotak pencarian ini, ada baiknya anda pasang, agar lebih mudah terjamah oleh pengunjung blog anda. Wew...bahasanya... kaya' lagunya So7 aja, judul lagunya apa ya... Hayooo...siapa yang tau...???? Sebagai alternatif lain jika anda enggan memasangnya dikarenakan tidak ada tempat atau hal lain, anda dapat menggunakan Navigation Bar (NavBar). Pada NavBar juga terdapat kotak pencarian, dan fungsinya sama dengan kotak pencarian ini.Terserah kepada anda ingin menggunakan yang mana. Agar lebih menarik sebaiknya anda gunakan yang ini saja.Hehehee.....:D
Ada beberapa macam kotak pencarian/search box yang dapat di pasang. Antara lain:


1. Tipe Biasa

HTML Code :
<form id="searchthis" action="http://adhiets.blogspot.com/search" style="display:inline;" method="get">
<input id="b-query" maxlength="255" name="q" size="20" type="text">
<input id="b-searchbtn" value="Search" type="submit">
</form>

Contoh :




Ganti yang berwarna Merah dengan URL blog anda

2.Tipe Expert

HTML Code :
<form action="/search" id="searchform" method="get" style=" text-align:center;">
<input class="inpsearch" id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Cari Disini&quot;;}" onfocus="if (this.value == &quot;Cari Disini&quot;) {this.value = &quot;&quot;;}" type="text" value="Cari Disini">
<input id="searchsubmit" type="submit" value="Search">
</form>

Contoh :




Pada tipe Expert ketrangan akan hilang ketika di Klik (on focus) dan akan kembali lagi ketika tidak di Klik. Kode yang berwarna merah di atas dapat anda ganti sesuai dengan keinginan anda.Tapi ingat ketiga-tiga kata "Cari Disini" saat di ganti nanti harus sama kata-katanya.

3.Tipe Google

HTML Code :
<form method="GET" action="http://www.google.com/search">
<input type="hidden" name="ie" value="UTF-8">
<input type="hidden" name="oe" value="UTF-8">
<table bgcolor="#FFFFFF"><tbody><tr><td>
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_40wht.gif" border="0" alt="Google" /></a>
</td><td>
<input type="text" name="q" maxlength="255" value="" >
<input type="submit" name="btnG" value="Search">
<span >
<input type="hidden" name="domains" value="http://adhiets.blogspot.blogspot.com">
<input type="radio" name="sitesearch" value=""> Google Page <input type="radio" name="sitesearch" value="http://adhiets.blogspot.com" checked=""> adhiets.blogspot.com
</span>
</td></tr></tbody></table>
</form>

Contoh :


Google




Google Page adhiets.blogspot.com

Kode yang berwarna merah ganti dengan alamat Blog anda.Kode yang berwarna biru dapat anda modifikasi sesuai keinginan anda.Dan jika anda mau, link kode yang berwarna hijau dapat anda ganti dengan link gambar kesukaan anda.
So...Selamat mencoba... Semoga blognya tambah keren.....!!!

16 komentar:

anak nelayan on 27 April 2009 at 10:49

makasih sob infonya

ebenk789 on 27 April 2009 at 11:14

wah mantep nih buat nambahin koleksi sepertiPunya saya

banggundul on 27 April 2009 at 16:38

nice info...

nelson on 27 April 2009 at 18:30

Tutorial berguna ini buat yang berminat.... :D

hack on 27 April 2009 at 18:50

boleh dicoba niih.......

Yanuar Catur on 27 April 2009 at 20:46

keren nih tipsnya..
hehehehe

SunDhe on 27 April 2009 at 22:18

:D wow.. bole jg ne tips nya :D
lam kenal :D

IMAM MEQELS on 28 April 2009 at 10:31

SATU INFO MENARIK BAGI KITA SEMUA,LANGSUNG SAYA COBA DEH OK ,SALAM

Mardee W on 28 April 2009 at 16:51

itu tipe yg ke-2 kok ga ada tulisan "cari di sini" pada contohnya? :-/
kode html nya udah bener apa belum itu?


ngomong2 yg nulis ini blognya udah diberi kotak pencarian apa belum ya.. :D
cuma tanya aja, solae daritadi aku cari kok ga ada di blog ini.

Mardee W on 29 April 2009 at 00:05

ow, gitu ya...
aku pke firefox, tp kok tetep ga keliatan juga..
browsernya yg error atau itu cuma untuk IE ya?
aku ga begitu mudeng masalah yg beginian...


sory bro, tadi ga keliatan navbarnya :D
*atau emang td ga gagas ya* ;))

Ardy Van Bugis on 11 May 2009 at 00:13

thanks ilmunya....

The Casparian on 13 August 2009 at 14:44

wew menarik coy,
Aku siap mengaplikasikannya, sep sep sep,
Semangat!

BonusMember

Rumah Impian on 3 October 2009 at 12:11

tahu cara modifikasinya gak bro?

Yuda on 13 January 2010 at 09:24

Salam,
Saya sudah mencoba script untuk membuat search box pada blog saya termasuk script di atas tetapi kenapa artikel yang muncul tidak sesuai dengan kata kunci yang ditulis pada search box.
Mohon pencerahannya.
Thanks.

Handoyo - radjamasak on 18 July 2010 at 12:02

harus di coba nih !

Jon on 21 September 2010 at 13:38

Asik-asik, ini yang gue cari-cari pren,
thanks banget bos, sungguh bermanfaat untukku, semoga mendapat pahala di sisiNya, lho lho lho , hihahaha

Gratis Download Internet marketing Taichi bro. Ga nyesel kok :)

Leave a Comment

Silahkan menuliskan komentar anda pada opsi Google/Blogger untuk anda yang memiliki akun Google/Blogger.
Silahkan pilih account yang sesuai dengan blog/website anda (LiveJournal, WordPress, TypePad, AIM).
Pada opsi OpenID silahkan masukkan URL blog/website anda pada kotak yang tersedia.
Atau anda bisa memilih opsi Nama/URL, lalu tulis nama anda dan URL blog/website anda pada kotak yang tersedia.

Jika anda tidak punya blog/website, kolom URL boleh dikosongkan.
Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan). Jika komentar anda berupa pertanyaan, maka jika anda menggunakan opsi ini tidak akan ditanggapi.