Kotak pencarian merupakan salah satu fitur penting yang sebaiknya tersedia di sebuah blog. Dengan adanya kotak pencarian, pengunjung dapat menemukan artikel atau informasi yang mereka butuhkan dengan lebih cepat tanpa harus membuka halaman satu per satu.
Pada dasarnya, Blogger sudah menyediakan widget pencarian bawaan yang dapat digunakan secara langsung. Namun, tampilannya terkadang terlihat terlalu sederhana, terutama jika Anda masih menggunakan tema Blogger versi lama seperti Simple, Bold, Awesome, atau tema klasik lainnya.
Sebagai alternatif, Anda dapat membuat kotak pencarian sendiri menggunakan HTML dan CSS. Selain tampilannya lebih menarik, kotak pencarian ini juga dapat dibuat responsive sehingga tetap terlihat rapi ketika dibuka melalui perangkat desktop maupun smartphone.
Membuat Kotak Pencarian Responsive di Blogger
Kotak pencarian yang akan dibuat menggunakan fitur pencarian bawaan Blogger. Artinya, fungsi pencariannya tetap menggunakan URL /search dan parameter q, sehingga pengunjung dapat mencari artikel yang terdapat di blog seperti menggunakan widget pencarian Blogger pada umumnya.
Perbedaannya terletak pada tampilan. Kita akan menggunakan CSS sederhana untuk membuat kotak pencarian dengan desain yang lebih modern dan tombol pencarian berwarna biru.
Langkah 1: Masuk ke Blogger
Pertama, silakan login ke akun Blogger yang digunakan untuk mengelola blog Anda.
Setelah masuk ke dashboard Blogger, pilih blog yang ingin Anda tambahkan kotak pencarian.
Langkah 2: Buka menu Tata Letak
Pada dashboard Blogger, klik menu Tata Letak.
Selanjutnya cari bagian Sidebar atau Bilah Sisi, karena kotak pencarian ini nantinya akan ditempatkan di bagian tersebut.
Klik Tambahkan Gadget, kemudian pilih gadget HTML/JavaScript.
Langkah 3: Masukkan judul gadget
Pada bagian judul, Anda dapat menuliskan Pencarian atau Kotak Pencarian.
Jika tidak ingin menampilkan judul gadget, bagian tersebut juga boleh dikosongkan.
Langkah 4: Masukkan kode kotak pencarian
Pada bagian konten HTML/JavaScript, masukkan kode berikut:
<style>
#search-box {
position: relative;
width: 100%;
margin: -15px 0px -20px 0;
}
#search-form
{
height: 40px;
border: 1px solid #cccccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #f5f5f5;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #33aaff;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search here...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>Kode tersebut terdiri dari dua bagian utama, yaitu HTML untuk membuat struktur kotak pencarian dan CSS untuk mengatur tampilannya.
Kotak pencarian akan menggunakan lebar 100%, sehingga dapat menyesuaikan dengan lebar area sidebar tempat gadget tersebut dipasang.
Warna tombol pencarian juga dapat diubah sesuai dengan warna utama template Blogger yang Anda gunakan. Pada kode di atas, tombol menggunakan warna biru #33aaff.
Langkah 5: Simpan gadget
Setelah kode dimasukkan, klik Simpan.
Kemudian buka halaman blog dan periksa hasilnya. Jika gadget ditempatkan di sidebar, kotak pencarian akan muncul pada bagian tersebut.
Cara menggunakan kotak pencarian
Untuk mencoba fitur pencarian, masukkan kata kunci artikel yang ingin dicari pada kolom pencarian.
Misalnya, jika Anda ingin mencari artikel tentang Blogger, ketik Blogger kemudian klik tombol Search.
Blogger akan menjalankan pencarian berdasarkan kata kunci tersebut dan menampilkan artikel yang berkaitan dengan pencarian.
Apakah kotak pencarian ini responsive?
Ya. Kotak pencarian menggunakan width: 100%, sehingga ukurannya mengikuti lebar area gadget yang tersedia.
Namun, tampilan akhir juga dapat dipengaruhi oleh CSS dari template Blogger yang digunakan. Jika template memiliki aturan CSS tertentu pada gadget atau elemen form, kemungkinan diperlukan sedikit penyesuaian agar tampilannya lebih sempurna.
Kesimpulan
Membuat kotak pencarian responsive di Blogger sebenarnya cukup mudah. Anda tidak perlu mengubah kode utama template karena kotak pencarian dapat dibuat melalui gadget HTML/JavaScript di menu Tata Letak.
Dengan menggunakan HTML dan CSS sederhana, tampilan kotak pencarian bawaan Blogger dapat dibuat lebih menarik sekaligus tetap mempertahankan fungsi pencarian artikel di dalam blog.
Cara ini juga cocok bagi pengguna tema Blogger lama yang ingin menambahkan kotak pencarian dengan tampilan yang lebih sederhana, bersih, dan responsive.
Komentar
Posting Komentar