Cara Memasang Search Box/Kotak Pencarian Di Blog

Oke gan, kali ini Admin membuat artikel lagi yaitu Tentang Gimana Caranya Memasang Kotak Pencarian Di Blog. Sudah pada tau kan apa itu Kotak Pencarian atau Search Box ?. Search Box/Kotak Pencarian Merupakan Kotak yang digunakan untuk mencari informasi yang lebih tepatnya mencari artikel lain di Blog atau Website. Kotak ini memiliki manfaat bagi Website atau Blog yang sudah mempunyai banyak artikel. 

Alasan kenapa Admin membuat Artikel ini adalah karena tidak semua Template mempunyai Search Box/Kotak Pencarian. Namun Blog yang berplatform Blogger sudah disediakan, cuma kita harus cari dan pasang di Menu Tata Letak, Tapi banyak Blogger yang kurang suka, oleh sebab itu banyak Blogger yang mencari di Internet.

Cara Memasang Search Box/Kotak Pencarian Di Blog

1. Login BLogger anda.

2. Klik Menu Template dan Edit HTML.

3. Selanjutnya cari kode ]]</b:skin> Menggunakan CTRL+F dikeyboard untuk mempermudah.

4. Kalau sudah ketemu kodenya, tinggal copy paste kode CSS dibawah ini diatas kode ]]</b:skin> .

Kode : 

/* Search Box by Unik-Informatika
----------------------------------------------- */
#search-box{
position: relative;
border: 1px solid #ddd;
margin: 5px auto;
}
#search-form{
height: 30px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #fff;
overflow: hidden;
}
#search-text{
color: #ccc;
border-width: 0;
}
#search-box input[type="text"]{
width: 100%;
padding: 7px 0 7px 7px;
outline: none;
}
#search-button{
position: absolute;
top: 0;
right: 0;
height: 30px;
margin: 0;
text-align: center;
line-height: 0;
border-width: 0;
background: whitesmoke;
cursor: pointer;
font-size: 12px;
font-weight: bold
}

5. Simpan Template.

Kemudian Untuk langkah selanjutnya adalah menampilkan Search Box/Kotak Pencarian di Widget Blog. Caranya Dibawah.

6. Masuk Ke Tata Letak, Tambah Widget, Pilih HTML/Java Script.

7. Setelah Kalau mau kasih judul silahkan kalau tidak juga tidak apa-apa, lalu Copy Paste kode CSS dibawah ini dibagian kolom HTML.

Kode :

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
  <input id='search-text' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search..&quot;;}' onfocus='if (this.value == &quot;Search..&quot;) {this.value = &quot;&quot;}' type='text' value='Search..'/>
  <button id='search-button' type='submit'>GO</button>
</form>
</div>

7. Simpan Template dan Cek perubahan Blog anda.

Itulah Tutorial hari ini Tentang Cara Memasang Search Box/Kotak Pencarian Di Blog semoga bermanfaat dangan lupa juga Share-nya.