Membuat Kotak Pencarian di Sidebar Blog (keren)

Cara Memasang Kotak Pencarian di Sidebar Blog

Kontak pencarian atau search box sangat penting dipasang di blog, karena memudahkan pengunjung untuk mencari artikel yang mereka inginkan di blog anda.

Kontak pencarian juga berfungsi sebagai navigasi di jadikan internal link, karena hasil pencarian akan muncul dalam daftar postingan kita.






Cara Memasang Kotak Pencarian keren di Blog
1. Login dulu ke akun blog anda
2. Pilih "Tata Letak" atau "Layout"
3. Tambahkan Gadget lalu pilih HTML/JavaScript
4. Copy dan Paste kode di bawah ini di dalamnya (untuk warna bisa menyesuaikan kode gambar di astas)

<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}

#search-form 
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text 
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #18cf00;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search here...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>

Lebih jelas silahkan lihat gambar seperti dibawah.

5. Sesudah mengcopy dan paste silahkan kliktombol "Simpan"