Update Terbaru, 21 April 2017
Cara Membuat Widget Search (Kotak Pencarian) Keren – Kotak pencarian atau dalam bahasa blogger blogspot dikenal dengan widget search box adalah halaman pencarian artikel pada blog, Widget ini dirasa wajib untuk dipasang diblog. karena dengan tambahan search button ini dapat memudahkan pengunjung atau visitor blog lebih mudah menemukan artikel yang dicari.
Membuat kotak pencarian di blog bukanlah hal yang sulit, anda pasti bisa memasang dengan mudah walaupun tidak mengenal kode html. Widget kotak pencarian yang akan saya bagikan kali ini sudah responsive artinya sudah support dengan berbagai perangkat mobile. hal ini sangat penting karena hampir 50-80% pengunjung saat ini menggunakan perangkat mobile.
(Baca: Cara Membuat Popular Post Warna-Warni Keren di Blogspot )
Daftar Isi:
Tutorial Membuat Widget Kotak Pencarian Responsive Keren
Untuk memasang kotak pencarian di blog, anda cukup melakukan dua langkah yaitu memasang kode css dan kode html berikut ini:
Pasang Kode CSS terlebih dahulu
Pertama, Login Blogger kemudian pilih menu template lalu pilih edit HTML.
Kedua, Copy dan pastekan kode dibawah ini tepat diatas ]]></b:skin>
/*Search Box*/
#search-box{position:relative;margin:0 auto;border:1px solid #ccc;padding:5px;border-radius:4px}
#search-form{height:40px;background-color:#fff;overflow:hidden}
#search-text{font-size:14px;color:#ddd;border-width:0;background:transparent;line-height:15px}
#search-box input[type="text"]{width:90%;padding:10px 0 5px 1em;color:#333;outline:none}
#search-button{position:absolute;top:5px;right:5px;height:40px;width:80px;color:#fff;text-align:center;border-width:0;background-color:#1a7db7;cursor:pointer;text-transform:uppercase;border-radius:3px;outline:0}
#search-button:hover{background:#333}Terakhir klik SAVE/Simpan
Selanjutnya Pasang Kotak Pencarian Pada Sidebar Blog
1. Masuk akun blogger anda, lalu pilih “Tata Letak”
2. Kemudian tambahkan gadget dan pilih HTML/Javascript.
3. Silahkan masukkan kode dibawah ini pada kolom HTML/Javascript
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Cari Artikel Disini ...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button></form></div>4. Jangan lupa Save/Simpan dan lihat hasilnya.
# Cara Paling Mudah Membuat Kotak Pencarian Keren
Cara yang kedua ini merupakan cara paling mudah yang bisa anda lakukan tanpa edit HTML. jika anda tertarik silahkan ikuti tutorial berikut ini:
1. Login akun Blogger anda.
2. Pilih menu “Tata Letak” kemudian pilih Add Gagdet, lalu pilih “HTML/Javascript”
3. Copy dan Paste kode berikut ini kedalam kolom “HTML/Javascript”
<style>
#search-box {position: relative;width: 100%;margin: 0;}
#search-form {height: 40px;border: 1px solid #999;-webkit-border-radius: 5px;
-moz-border-radius: 5px;border-radius: 5px;background-color: #fff;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: #1a7db7;
-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='Cari Artikel Disini...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>4. Selesai, jangan lupa klik Save/Simpan
Catatan:
- background-color: #1a7db7; adalah warna tombol search. jika anda ingin merubah warnanya silahkan ganti kode warna #1a7db7 dengan kode warna pilihan anda.
- Cari Artikel Disini… : Kata-kata dalam kolom pencarian.
Demikian 2 cara membuat kotak pencarian di blog semoga dapat bermanfaat, silahkan untuk praktek di blog pribadi anda.
Selamat Mencoba.
kok tombol search saya gak bisa ya mas?
Pilih tutorial yang pertama apa yang kedua mas? kalau yang pertama harus diperhatikan pemasangan kode CSS, cara yang kedua langsung pasang pada HTML gadget. sudah saya cek dan muncul di blog.
wah terima kasih mas tutorialnya, sangat bermanfaat ^_^
Min ada instagramnya kh ada yg pengen ditanya nih
Mohon maaf untuk akun instagram jarang dipakai. Jadi jika ada pertanyaan silahkan hubungi kami melalui kontak yang sudah tersedia, ada FB, WA dan email melalui halaman kontak. Terima Kasih
thanks sob, sudah saya coba dan berhasil. Sekarang pengunjung bisa mencari artikel di blog dengan mudah.
Terima kasih.
Saya berhasil memasang tombol search dengan cara kedua.
Sama-sama, semoga pengunjungnya bisa lebih mudah mencari artikel yang diinginkan.
terimakasih mas zain. ijin gunakan script html . sangat bagus hasilnya . salam sukses selalu dari bimahartono
Terima kasih mas bro sudah membantu,
blog saya banyak ambil referensi kesini….
nuhun ya…
nuhuuuuun pisan….
keren keren work di viomagz… gak nyesel nangkring terus di sini buat otak atik tema