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
lalu klik Add Gadget
klik HTML/JAVA SCRIPT
pada halaman Configure HTML/JAVA SCRIPT masukkan kode dibawah ini:
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.
lalu klik Add Gadget
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>
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 :
Sedangkan untuk ukuran = "30" dan value = "Cari" akan memberikan hasil seperti ini :
14 komentar:
makasih gan code HTML nya. Trus ada gk code HTML yang, pas waktu buka website ada suara music midi? Gitu gan? Makasih.
thanks gan infonya.......
thanks gan infox . . .
izin sedot
q pakek wordpress, teryata banyak jg yang didedit, hingga jadi seperti disana
Sep daah... Sedot tanpa izin.
makasih code-nya gan, kebetulan blog ane blom ada kotak pencariannya.
Salam kenal Gan. pengen cobain nich buat di blog ane http://ranjang-tempattidurpasien-rumahsakit.blogspot.com/
klo yg bisa lebih detail bisa ga ya ? maksudnya untuk pencarian sebuah nomor dengan kategori tertentu ? thx sebelumnya...mampir2 ya di
www.bannernomorcantik.com
tapi koga gak berfungsi yaaa
ditunggu kunjugan baliknya
http://arminaven.blogspot.com/2012/10/tukaran-link-dengan-arminaven_15.html
thanks atas infonya sob kunjungan balik ya www.naufalthedarkness.blogspot.com
akhirnya ketemu yang aku cari, ijin mencoba gan...
Sipp...
Mantap tutorialnya...
Thanks
Terimakasih,,atas bantuannya!
ko tidak bisa ya kang ? padahal sudah saya ikuti seperti artikel sobat.. mohon pencerahannya kang.. ^^
Posting Komentar