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
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 :
0 comments :
Posting Komentar