Bagi para pengurus blog, kotak penelusuran atau search box menjadi salah satu kelengkapan navigasi yang cukup penting bagi sebuah blog. Dengan adanya fitur ini, web atau blog pun akan makin gampang untuk dijelajahi oleh para pembacanya. Para pengunjung dapat memanfaatkan fitur ini untuk mencari artikel yang mereka kehendaki di dalam situs atau blog tersebut.
Bagi pengguna platform blogspot, fitur kotak pencarian sebetulnya telah tersedia secara default. Untuk menampilkannya, kita tinggal mengaturnya dengan menambahkannya (add gadget) pada sajian layout (tataletak). Hanya sepertinya, kebanyakan pengelola blog condong memakai kotak pencarian dari pihak luar, hasil adaptasi, atau bawaan dari template yang mereka beli/unduh. Mungkin tampilannya lebih keren sehingga lebih sedap dipandang.
Nah, pada artikel kali ini saya ingin menyebarkan tutorial ihwal cara menciptakan kotak penelusuran (search box) yang sederhana tapi tampak keren dan mewah . Tampilannya juga responsive sehingga mobile friendly. Adapun performa kotak pencariannya akan mirip berikut ini:
Silahkan anda mampu menaruh kotak pencarian tersebut misalnya di bagian sidebar, header, atau di daerah lainnya terserah anda. Usahakan gampang terlihat pengunjung supaya mereka dapat menggunakannya untuk mencari informasi yang diharapkan dengan memasukkan keyword yang diharapkan.
Membuat Kotak Pencarian Keren Sederhana
1. Buka akun blogger anda.
2. Pilih menu tema dan klik edit html.
3. Cari kode ]]> atau dan letakkan arahan 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 sajian 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 akibatnya. Anda juga bisa ubah warna background ikon lup (kaca pembesar) nya pada arahan yang saya tandai merah di atas. Demikianlah panduan kali ini. Semoga berguna.
EmoticonEmoticon