Cara Membuat Kotak Pencarian (Search Box) Keren Simpel Sederhana di Blog

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 semakin mudah untuk dijelajahi oleh para pembacanya. Para pengunjung dapat mempergunakan fitur ini untuk mencari artikel yang mereka kehendaki di dalam situs atau blog tersebut. 

Bagi pengguna platform blogspot, fitur kotak pencarian sebenarnya telah tersedia secara default. Untuk menampilkannya, kita tinggal mengaturnya dengan menambahkannya (add gadget) pada menu layout (tataletak). Hanya tampaknya, kebanyakan pengelola blog cenderung menggunakan kotak pencarian 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 saya ingin berbagi tutorial tentang cara membuat kotak pencarian (search box) yang sederhana tapi tampak keren dan elegan. Tampilannya juga responsive sehingga mobile friendly. Adapun tampilan kotak pencariannya akan seperti berikut ini:

Silahkan anda bisa meletakkan kotak pencarian tersebut misalnya di bagian sidebar, header, atau di tempat lainnya terserah anda. Usahakan mudah terlihat pengunjung agar mereka dapat menggunakannya untuk mencari informasi yang diinginkan dengan memasukkan keyword yang dibutuhkan. 

Membuat Kotak Pencarian Keren Sederhana 

1. Buka akun blogger anda.

2. Pilih menu tema dan klik edit html. 

3. Cari kode ]]></b:skin> atau </style> dan letakkan kode berikut ini di atasnya. 

.searchbox{margin:1px 10px 15px 0;width:100%;}.searchbox form{border:1px solid #ddd;font-size:14px}.searchbox form input{display:block!important;margin:0;border:0;padding:0;outline:0;height:32px;line-height:32px;font-size:13px;border-radius:3px!important}.serch{float:left;width:85%!important;text-indent:10px}.serchg{float:right;width:15%!important;height:32px!important;padding:0!important;background:#090;color:#fff;border:0!important;font-size:29px!important}.serchg:hover{background:#070}

4. Simpan template. 

5. Pilih menu layout (tataletak). 

6. Klik tambahkan gadget (add gadget) dan pilih html/javascript. 

4. Kosongkan kolom judul dan masukkan kode berikut ini ke dalamnya. 

<div class='searchbox'><form action='/search?q='><input class='serch' name='q' placeholder='Search here...' title='Cari Tulisan di Sini' type='text'/><button class='serchg' type='submit'> <svg style="width:20px;height:20px" viewbox="0 0 24 24"> <path fill="currentColor" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" /> </path></svg> </button><span style='clear: both;display:block'/></span></form></div>

6. Klik simpan.

Silahkan dilihat hasilnya. Anda juga bisa ubah warna background ikon lup (kaca pembesar) nya pada kode yang saya tandai merah di atas. Demikianlah tutorial kali ini. Semoga bermanfaat.

Lokasi:

Berbagi :