Cara Membuat Kotak Pencarian di Blog - Saya yakin sobat semua sudah tau dan sudah biasa mencari alamat suatu data, web ataupun artikel lain yang diperlukan dengan menggunakan sebuah mesin pencari.
Dimana kita biasanya akan memasukan alamat web atau kata kunci dari suatu data atau artikel yang kita perlukan di sebuah kotak pencarian atau search box.
Jika biasanya kita menggunakan kotak pencarian untuk mencari suatu data di mesin pencari seperti google, yahoo, MSN dan sejenisnya.
Maka sobat juga bisa melakukan pencarian data pada suatu blog yang sedang dikunjungi hanya dengan memasukan suatu kata kunci pada blog tersebut.
Nah kali ini saya akan membahas cara membuat kotak pencarian di blog sobat agar memudahkan pengunjung yang sedang mampir di blog sobat yang ingin mencari data atau artikel lain tetapi masih dari dalam blog sobat.
Untuk itu diperlukan sebuah kotak pencarian yang diletakan pada blog sobat yang memungkinkan pengunjung untuk menemukan konten yang spesifik di blog sobat.
Kotak ini juga tidak membutuhkan banyak CSS dan HTML, melainkan hanya kode yang sangat sederhana sekali sehingga memudahkan sobat untuk membuat kota pencarian ini pada blog sobat.
Sekarang sudah banyak template yang telah menyediakan kotak pencarian atau search box ini. Tapi bagi sobat yang saat ini template nya ternyata belum terdapat kotak pencarian ini, saya akan bagi caranya.
Sobat bisa memasangnya sendiri dengan sangat mudah dan sederhana.
Langkah-langkahnya sebagai berikut:
#1. Pertama sobat login terlebih dahulu ke blogger.com dan masuk ke dashboard.
#2. Kemudian klik Tata Letak yang berada di sebelah kiri blog.
#3. Klik Tambahkan Gadget yang terletak di sidebar seprti yang terlihat pada gambar diatas sehingga muncul seperti ini.
#4. Klik HTML/JavaScript kemudian masukan copy dibawah ini dan paste kan ke dalam kotak yang betuliskan Konten.
Kodenya:
<style>
#abt-search-btn {
background: none repeat scroll 0 0 #069C72;
border: 0 none;
border-radius: 0 0 0 0;
color: #FFFFFF;
font-weight: 700;
padding: 10px 10px;
}
#abt-search-box {
background: none repeat scroll 0 0 #EEEEEE;
border: 0 none;
padding: 10px;
width: 225px;
}
</style>
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="abt-search-box" name="q" size="40" type="text" placeholder="Cari disini..."/>
<input id="abt-search-btn" value="Cari" type="submit"/>
</form>
#5. Klik Simpan jika sudah selesai. Sekarang tinggal sobat lihat tampilan kotak pencariannya di Lihat blog.
Gambar dibawah ini adalah contoh tampilan kotak pencarian pada blog saya.
#6. Kalau sobat ingin merubah warna pada kotak pencariannya maka sobat tinggal merubah kode warna diatas, dan untuk kode warna bisa googling, yaitu:
color: #FFFFFF;
#7. Untuk merubah ukuran panjang pendeknya sobat bisa merubah ukuran sesuai dengan lebarnya yang sobat inginkan. Kodenya:
width: 225px;
#7. Masih pengen merubah tinggi dan tebalnya ukuran kotak pencarian? sobat bisa merubah kode berikut ini:
padding: 10px 10px;
Nah demikian cara membuat kotak pencarian atau search box di blog sobat dengan memanfaatkan gadget pada blog. Sangat mudah kan.
Oh ya kalau sobat mau merubah-rubah kode sebaiknya copy saja kode nya ke Notepad kemudian lakukan percobaan hingga sesuai dengan yang sobat inginkan.
Jika sudah selesai tinggal copy dan pasti di kotak tadi. Semoga bermanfaat ya sobat.
Advertisement
