Minggu, 27 November 2011

Cara Membuat Kotak Pencarian (Search Box) di Blogger

Default pada navigasi bar dalam Blogger terdapat kotak pencarian (search box)  Google di bagian atas blog Blogspot anda.  Tetapi munkgin  anda ingin menyertakan sebuah kotak pencarian rancangan anda sendiri ke dalam halaman (body) utama blog anda, atau ingin menempatkannya pada  Sidebar. Selain untuk kenyamanan dan kemudahan bagi pengunjung, keuntungan lainnya adalah hasil pencarian akan tampil  pada tubuh utama (halaman utama) dari Blog anda, tidak seperti pada kotak pencarian Google, pada posting kali ini saya akan sharing cara membuat kotak pencarian (Search Box) di Blogger.

Baiklah, kita mulai saja dengan cara membuatnya sebagai berikut :

Pada  Dashboard -> Klik tab Design

blogbudaqdegil.blogspot Cara Membuat  Kotak Pencarian (Search Box) di Blogger


lalu klik Add Gadget

blogbudaqdegil.blogspot Cara Membuat  Kotak Pencarian (Search Box) di Blogger


klik HTML/JAVA SCRIPT



pada halaman Configure HTML/JAVA SCRIPT masukkan kode dibawah ini:

<p align="left">
<form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get">
<strong> NAMA BLOG ANDA <br/> </strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</Form> </p>


 blogbudaqdegil.blogspot Cara Membuat  Kotak Pencarian (Search Box) di Blogger


Gantilah teks berwarna merah pada kode diatas sesuai dengan nama dan url blog anda, maxlength="255" adalah maksimal karakter yang diperbolehkan, saya rasa ini cukup tidak perlu dirubah, size=”20” adalah lebar kotak pencarian.

Anda juga dapat merubah teks "Search" pada tombol dengan  "CARI" atau "Go", dengan merubah Value pada kode diatas.

Simpan kode dan refresh halaman anda. Jika anda ingin merubah kotak pencarian menjadi lebih panjang atau lebih pendek, anda dapat  mangganti  angka “Size”. Contoh kode diatas jika ukurannya dijadikan   = "25" dan value = "Hit" , maka akan berpenampilan seperti diawah ini : 

NAMA BLOG ANDA





Sedangkan untuk ukuran  = "30" dan value = "Cari" akan memberikan hasil seperti ini :

NAMA BLOG ANDA



15 komentar:

WidyQubota mengatakan...

makasih gan code HTML nya. Trus ada gk code HTML yang, pas waktu buka website ada suara music midi? Gitu gan? Makasih.

uzly1933 mengatakan...

thanks gan infonya.......

Oliez mengatakan...

thanks gan infox . . .
izin sedot

Lapantech Elektronika mengatakan...

makasih infonya gan

yusuf twenty mengatakan...

q pakek wordpress, teryata banyak jg yang didedit, hingga jadi seperti disana

Muhammad Husaini mengatakan...

Sep daah... Sedot tanpa izin.

tabosrabbit mengatakan...

makasih code-nya gan, kebetulan blog ane blom ada kotak pencariannya.

Fuad Ahmad mengatakan...

Salam kenal Gan. pengen cobain nich buat di blog ane http://ranjang-tempattidurpasien-rumahsakit.blogspot.com/

Banner Nomor Cantik mengatakan...

klo yg bisa lebih detail bisa ga ya ? maksudnya untuk pencarian sebuah nomor dengan kategori tertentu ? thx sebelumnya...mampir2 ya di

www.bannernomorcantik.com

Arminapen Gayo mengatakan...

tapi koga gak berfungsi yaaa

ditunggu kunjugan baliknya

http://arminaven.blogspot.com/2012/10/tukaran-link-dengan-arminaven_15.html

naufal syarifuddin mengatakan...

thanks atas infonya sob kunjungan balik ya www.naufalthedarkness.blogspot.com

son billy mengatakan...

akhirnya ketemu yang aku cari, ijin mencoba gan...

ubudscooterrental mengatakan...

Sipp...
Mantap tutorialnya...
Thanks

Yussandi Santoso mengatakan...

Terimakasih,,atas bantuannya!

Muhammad Faris Al Fatih mengatakan...

ko tidak bisa ya kang ? padahal sudah saya ikuti seperti artikel sobat.. mohon pencerahannya kang.. ^^

Poskan Komentar