Cara Memasang Kotak Pencarian Simple Responsive di Blogger

Cara Memasang Kotak Pencarian Simple Responsive di Blogger

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

Kotak Pencarian (Search Box) Simple Responsive
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:

Kotak Pencarian Simple Full Responsive

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(http://4.bp.blogspot.com/-9cg5-K_jtuc/Uh5opT3mJvI/AAAAAAAAADc/5FnyCMV0L-8/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).*

Labels: Desain Blog

Related Posts

0 Komentar untuk "Cara Memasang Kotak Pencarian Simple Responsive di Blogger"

1. Komentar spam, menyertakan Link Aktif dan Alamat Blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *