Cara Modifikasi Kotak Pencarian Keren untuk Blog 2015

Cara  Memasang Kotak Pencarian di Blog dengan Mudah

Sobat Sahil. Perlu kita ketahui, bahwa "Kotak pencarian" atau "Search box" yang terdapat pada blog atau web mempunyai peran penting dalam membantu para pengunjung atau admin. Hal tersebut berguna kala para pengunjung atau admin dalam mencari artikel atau dokumen dengan menggunakan "key word" atau "kata kunci" tertentu yang akan diketikkan pada "kotak pencarian". Oleh karena itu, disini akan saya ulas cara modifikasi kotak pencarian pada blog dengan desain keren. Hal ini sudah saya terapka pada, lihat Demo Live.

Cara Modifikasi Kotak Pencarian Keren
1. Masuk pada akun blog sobat pada blogger
2. Pilih "Layout" atau "tata letak"
3. Pilih "Add a Gadget" atau "tambahkan gatget"
4. Pilih "Html/JavaScript"
5. Copy paste kode berikut di dalamnya

<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: #4d90fe;
-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>

6. Save/simpan

NB: silakan ganti warna sesuai dengan "kode warna" seperti pada gambar di atas. Demikian Sobat Sahil. Good luck