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
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...
Tidak ada komentar :
Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>
Konversi KodeOOT