Bagi para pengelola blog, kotak pencarian atau search box menjadi salah satu kelengkapan navigasi yang cukup penting bagi sebuah blog. Dengan adanya fitur ini, web atau blog pun akan makin mudah untuk dijelajahi oleh para pembacanya. Para hadirin mampu memanfaatkan fitur ini untuk mencari artikel yang mereka inginkan di dalam situs atau blog tersebut.
Bagi pengguna platform blogspot, fitur kotak penelusuran bergotong-royong telah tersedia secara default. Untuk menampilkannya, kita tinggal mengaturnya dengan menambahkannya (add gadget) pada hidangan layout (tataletak). Hanya sepertinya, kebanyakan pengurus blog condong menggunakan kotak penelusuran dari pihak luar, hasil modifikasi, atau bawaan dari template yang mereka beli/unduh. Mungkin tampilannya lebih keren sehingga lebih sedap dipandang.
Nah, pada postingan kali ini aku ingin membuatkan tutorial tentang cara menciptakan kotak penelusuran (search box) yang sederhana tapi tampak keren dan berkelas. Tampilannya juga responsive sehingga mobile friendly. Adapun penampilan kotak pencariannya akan mirip berikut ini:
Silahkan anda mampu meletakkan kotak pencarian tersebut contohnya di bab sidebar, header, atau di daerah lainnya terserah anda. Usahakan gampang tampakpengunjung biar mereka mampu menggunakannya untuk mencari info yang diinginkan dengan memasukkan keyword yang diharapkan.
Membuat Kotak Pencarian Keren Sederhana
1. Buka akun blogger anda.
2. Pilih sajian tema dan klik edit html.
3. Cari kode ]]> atau dan letakkan isyarat berikut ini di atasnya.
.searchboxmargin:1px 10px 15px 0;width:100%;.searchbox formborder:1px solid #ddd;font-size:14px.searchbox form inputdisplay:block!important;margin:0;border:0;padding:0;outline:0;height:32px;line-height:32px;font-size:13px;border-radius:3px!important.serchfloat:left;width:85%!important;text-indent:10px.serchgfloat:right;width:15%!important;height:32px!important;padding:0!important;background:#090;color:#fff;border:0!important;font-size:29px!important.serchg:hoverbackground:#070
4. Simpan template.
5. Pilih hidangan layout (tataletak).
6. Klik tambahkan gadget (add gadget) dan pilih html/javascript.
4. Kosongkan kolom judul dan masukkan aba-aba berikut ini ke dalamnya.
6. Klik simpan.
Silahkan dilihat karenanya. Anda juga bisa ubah warna background ikon lup (kaca pembesar) nya pada isyarat yang aku tandai merah di atas. Demikianlah panduan kali ini. Semoga berguna.
EmoticonEmoticon