Search Box, kotak penelusuran atau kotak pencarian merupakan salah satu element yang biasa dijumpai pada sebuah web atau blog. Adanya widget ini cukup penting karena pengunjung akan lebih mudah untuk menjelajahi daftar artikel blog kita. Pengunjung dapat menggunakan fitur ini untuk mencari informasi yang diinginkan dengan memasukkan keyword dari informasi yang dibutuhkan. Dengan cepat, search box ini akan menampilkan daftar artikel yang berhubungan dengan informasi yang dicari.
Sebenarnya anda dapat memasang search box ini melalui widget yang telah disediakan oleh blogspot. Namun karena tampilannya yang standar, banyak blogger yang kemudian beralih menggunakan search box buatan atau hasil modifikasi yang tampilannya lebih elegan. Jika anda sedang mencari cara untuk membuat kotak penelusuran yang simpel namun tetap keren dan responsive, anda mungkin tertarik untuk menggunakan kotak pencarian dengan tampilan berikut ini:
Jika anda berminat untuk memasangnya di blog anda, silahkan ikuti langkah-langkah berikut ini. Anda bisa meletakkan widget ini pada bagian yang strategis agar mudah terlihat seperti pojok kanan atas, pojok kiri atas, atau pada bagian tengah atas blog.
Cara Mudah Membuat Kotak Pencarian Keren di Blog
1. Buka akun blogger anda.
2. Pilih menu layout (tataletak).
3. Klik tambahkan gadget (add gadget) dan pilih html/javascript.
4. Setelah terbuka, isi kolom judul dengan nama Search box, Kotak Penelusuran, Pencarian atau kosongkan saja.
5. Pada kotak html, masukkan kode berikut ini ke dalamnya.
Berikut kodenya:
<style>
#searchbox {
background: #808000;
border: 1px solid #808000;
padding: 4px 5px;
width: 0 90%;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7i63Ac-ntn55L0sXWXDAw3jxxuVpeaVGakfGSOgpGu-m80OUEHoXw8rwDtnv8ZI3Ljy_ro1EolZUaECP_tih116WqLI46zRmmC3619BjNxxn4NnhCrZPkQlQxbzsmkdDzsCT1-pGJK62O/s1600/search-dark.png) no-repeat 10px 6px #fff;
border-width: 1px;
border-style: solid;
border-color: #000;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #666666;
width: 57%;
padding: 8px 15px 8px 30px;
}
#button-submit {
background: #000000;
border-width: 0px;
padding: 9px 0px;
width: 23%;
cursor: pointer;
font: bold 12px Arial, Helvetica;
color: #fff;
text-shadow: 0 1px 0 #555;
}
#button-submit:hover {
background: #4f5356;
}
#button-submit:active {
background: #5b5d60;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Cari Disini..." />
<input id="button-submit" type="submit" value="Search" />
</form>
Keterangan:
Jika anda mau, anda bisa modifikasi background warna, border, height, width, font size dan lain sebagainya.
6. Kemudian klik simpan.
7. Jika ingin menampilkannya pada versi mobile, pilih menu tema dan klik edit html.
8. Setelah terbuka, cari kode yang dipasang tadi dan tambahkan kode pengaturan mobile='yes'. Contohnya seperti berikut ini.
8. Setelah terbuka, cari kode yang dipasang tadi dan tambahkan kode pengaturan mobile='yes'. Contohnya seperti berikut ini.
8. Jika sudah, silahkan klik simpan tema dan lihat hasilnya.
Demikianlah Cara Mudah Membuat Kotak Pencarian Keren di Blog. Semoga bermanfaat.
Labels:
Blogging
Thanks for reading Cara Mudah Membuat Kotak Pencarian Keren di Blog. Please share...!
apakah kode script ini sama dengan kode yang sudah ada saat blog dibuat pertama kali
BalasHapusMaksudnya template bawaan blogger?, beda gan. Ini pembuatan kotak pencarian secara manual.
Hapus