Pada kesempatan kali ini kita akan membuat search box untuk blog.
Kita semua tahu kota pencarian merupakan fitur suatu website yang akan membantu pengunjung dalam mencari artikel yang tersedia didalam blog anda.
Lihat Juga : 6 Tool Keyword Research Gratis
Dalam sebuah blog kotak pencarian adalah hal yang wajib dipasang oleh admin.
Dengan adanya kota search ini akan mempermudah dalam mencari, dan menemukan artikel yang dinginkan.
Memang jika artkel kita sedikit anda bisa mencarinya dari halaman ke halaman, namun jika artikel yangtelah diterbitkan dan publikasikan lebih dari 100 sampai 1000 artikel, kotak pencarian wajib ada.
Fungsi lain dari kotak pencarian dalam blog bisa digunakan untuk mecari hal-hal yang tidak kalian ketahui namanya, namun tahu spesifikasinya.
Search box sendiri tidak semua template blogger atau wordpress mempunyai atau di berikan fitur search box oleh pembuat templatenya. Oleh sebab tu memasang search box ini bisa kalian lakukansendiri jika template yang kalian pasang tidak memilikinya.
Sebenarnya blogger telah menyediakan widget search blog untuk dipasang pada blog kalian secara mudah. Namun banyak yang kurang menyukainya karena tampilannya kotak pencariannya yang sederhana.
Jika kalian berminat memasang kotak search blogger default, kalian bisa mencari dan memasangnya langsung dari menu Tata Letak.
Pemasangan widget search blogger sama seperti memasang widget lainnya.
Tetapi jika kalian tidak menyukai tampilan kotak pencarian default blogger, kalian bisa memasang custom search box blogger dengan tampilan menarik yang telah banyak dibuat menjadi artikel oleh blogger lainnya.
Lihat Juga : Cara Daftar Search Engine 50+ Sekali Klik
Salah satunya adalah artikel yang kalian baca ini Tutorial membuat kotak pencarian blog.
Silahkan baca tutorialnya dibawah ini.
Pasang custom pencarian blog blogger
Dalam memasang kotak pencarian pada blog kita terlebih dahulu harus memasang CSS custom search box blog. Ikuti tutorianya dibawah ini.
1. Log in Blogger
2. Klik Tema > Edit HTML
3. Klik CTRL + F untuk mencari kode ]]</b:skin> atau </style>
4. Lalu Copy kode CSS dibawah dan pastekan tepat diatas kode yang dicari tadi
/* Search Box Kenscripts */
#kenscripts-search-box{ position: relative; border: 1px solid #2c2cdd; margin: 5px auto; }
#kenscripts-search-box-form{ height: 30px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background: #fff; overflow: hidden; }
#kenscripts-search-box-text{ color: #2c2cdd; border-width: 0;}
#kenscripts-search-box-text:focus{background: #ddd;color: #2c2cdd}
#kenscripts-search-box input[type="text"]{ width: 100%; padding: 7px 0 7px 7px; outline: none; }
#kenscripts-search-box-button{ position: absolute; top: 0; right: 0; height: 30px; margin: 0; text-align: center; line-height: 0; border-width: 0; background: #2c2cdd; color:white; cursor: pointer; font-size: 12px; font-weight: bold }
5. Simpan Template.
Setelah memasang CSS pada template blog, selanjutnya kita memasang bagian struktur HTML. Ikuti tutorialnya dibawah ini.
Lihat Juga : Membuat Link Label Search Blog Tidak Di Index Google
Catatan : Rekomendasi tata letak untuk kotak pencarian ini letakkan di sidebar, atas atau bawah header, dan atas atau bawah footer.
1. Masih Log in Blogger
2. Klik Tata Letak
3. Klik Tambh Gadget
4. Pilih HTML/Javascript.
5. Berikan judul "Search box", tidak diberikan juga tidak masalah.
6. Copy struktur search box HTML dibawah ini dan pastekan pada kolom HTML
<div id='kenscripts-search-box'>
<form action='/search' id='kenscripts-search-box-form' method='get' target='_top'>
<input id='kenscripts-search-box-text' name='q' onblur='if (this.value == "") {this.value = "Search..";}' onfocus='if (this.value == "Search..") {this.value = ""}' type='text' value='Search..'/>
<button id='kenscripts-search-box-button' type='submit'>Search</button>
</form>
</div>
7. Simpan.
Itulah cara membuat kotak pencarian custom pada blog. Kotak pencarian ini telah dibuat menjadi responsive mengikuti ukuran default widget blogger jadi tidak perlu mengatur lebarnya lagi.
Seperti yang kenny sebutkan letakkan search box ini di salah satu tata letak sidebar, header, atau footer agar lebarnya tidak mengganggu element template blog lainnya.
Sekian dari saya, Terima kasih telah berkunjung.
Demo