GO Blog

Kotak pencarian berguna untuk membantu pengunjung untuk menelusuri sebuah artikel di dalam blog menggunakan kata kunci tertentu yang di kirim melalui query ke directory blog. Tutorial ini merupakan bukan hal baru, namun meletakkan/memasang kotak penelusuran di blog memang tergolong penting jadi sebaiknya anda memasangnya untuk para pengunjung anda. berikut ini adalah cara memasang kotak penelusuran di blogger

Pertama silahkan login terlebih dahulu ke akun Blogger.com anda
Pilih menu tab Template > Edit HTML
Cari kode tag sidebar di dalam HTML template anda, biasanya seperti berikut

<div id='sidebar-wrapper'> atau <div id='sidebar_wrapper'>

Lalu letakkan kode berikut ini dibawahnya:

<div class='search-form'>
<form action='/search' class='clearfix' id='searchform' method='get'>
<fieldset>
<div id='searchfield'>
<input class='text clearField' id='searchbox' name='q' onclick='doClear(this)' type='text' value='Cari Articles'/>
</div>
<input class='submit' type='submit' value=''/>
</fieldset>
</form>
</div>

Setelahnya, kemudia cari kode tag ]]></b:skin> dan paste kode css dibawah ini diatasnya

/* search form db */
.search-form{position:relative;margin:0 8px 0 4px;width:auto !important;width: 400px;max-width:400px;}
.search-form form fieldset{border:0;margin:0;padding:0;background:none;background-color:transparent;}
.search-form #searchfield{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi81vwqZ0fOlAHbZzOqtRqRFXdWDzVY308_GhcrZ6yemHk0pQLpzwU8Mnyj29uGqGw1UEboipVFNOduEKE72ZsVCGoWhcxWw9MfY8CLXLDessYMtkfN6iNcYqIB8vh_VAJf2bzNLheXbx0/s1600/search.png) no-repeat left top;height:34px;display:block;margin-right:55px;}
.search-form input.text{border:0;margin:9px 0 0 34px;padding:0;}
.search-form input.submit{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi81vwqZ0fOlAHbZzOqtRqRFXdWDzVY308_GhcrZ6yemHk0pQLpzwU8Mnyj29uGqGw1UEboipVFNOduEKE72ZsVCGoWhcxWw9MfY8CLXLDessYMtkfN6iNcYqIB8vh_VAJf2bzNLheXbx0/s1600/search.png) no-repeat right -34px;height:34px;width:56px;margin:0;padding:0;position:absolute;right:0;top:0;border:0;text-transform:uppercase;text-shadow:#fff 1px 1px 1px;font-weight:bold;font-size:160%;color:#9b9b9b;cursor:pointer;}
.search-form input.submit:hover{background-position:right bottom;}
#primary-content .search-form{margin:2em 0;}

Langkah terakhir klik simpan perubahan dan lihat hasilnya.

Jika sobat ingin cara lebih mudah, Buka tata letak, pilih widget kotak pencarian dan tambahkan ke blog anda.

Note: Kotak pencarian/penelusuran ini dapat diletakkan dimana saja sesuai yang anda inginkan.

Semoga berguna...