Cara Memasang Kotak Pencarian Simple Responsive di Blogger

Baca Juga

Cara Memasang Kotak Pencarian (Search Box) Simple Responsive di Blogger

KOTAK Pencarian (Search Box) merupakan widget sangat penting di sebuah blog atau website.

Kotak pencarian ini memudahkan pengunjung dan admin blog sendiri untuk mencari posting yang dibutuhkan.

Blog yang tidak mempunya kotak pencarian di sidebar, di header, atau di bagian yang mudah terlihat pengunjung, dikatakan tidak ramah pengguna alias tidak user friendly.

CB sudah sering share kotak pencaria. Bisa dicek di label Kotak Pencarian.

Berikut ini CB share kembali sebuah gaya kotak pencarian simple dengan cara pemasangan super mudah.

Kotak Pencarian ini sederhana, elegan, profesionan looks.Ini penampakan kotak pencariannya:

Cara Memasang Kotak Pencarian Simple 

1. Klik Add Widget > pilih HTML/Javascript

2. Kosongkan Judul Widget
3. Copas kode berikut ini:

<style>
#search-box{border:1px solid #ccc;margin:0 5px 5px}
#search-form{height:33px;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#fff;overflow:hidden}
#search-text{font-size:14px;color:#ddd;border-width:0;background:transparent}
#search-box input[type="text"]{width:85%;padding:7px 0 12px 1em;color:#666;outline:0;float:left}
#search-button{top:0;right:0;height:32px;width:20px;margin-top:10px;font-size:14px;color:#fff;text-align:center;line-height:0;border-width:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDjpkdN9WxYcWXPv0SaSQaFpyyPSPBV1q3px0hi41qChDlMxrcx_gkX5BdoQ1XEauzG8u5hKz9coGhxwoX-ZNfhx07511qtSjDZLfZ2aUuFm6DKgadUEqjNr2KTdnVtqPY3Sv9S-mW-vmR/s1600/search.png) no-repeat;cursor:pointer}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
  <input id='search-text' name='q' onblur='if (this.value == "") {this.value = "Cari disini..";}' onfocus='if (this.value == "Cari disini..") {this.value = ""}' type='text' value='Cari disini..'/>
<button id='search-button' type='submit'/>
</form>
</div>

4. Save!

Valid HTML
Jangan lupa, hapus ikon obeng dan tang (quickedit). Setiap kali kita pasang widget baru, pasti ada kode ini.

Kode ini harus dihapus karena tidak valid HTML dan tidak seo friendly --mengurangi skor seo blog Anda setidaknya di Chkme.

1. Template > Edit HTML
2. Cari (Ctrl+F) kode ini:

<b:include name='quickedit'/>

3. Blok dan Hapus!
4. Save Template!

>>> Baca Juga: Kotak Pencarian plus Ikon Media Sosial

Demikian cara Memasang Kotak Pencarian Simple Responsive di Blogger. Good Luck! (http://www.contohblog.com).*