Kotak Pencarian Keren untuk Blog 2016

Kotak Pencarian Keren untuk Blog

Cara Memasang Kotak Pencarian di Sidebar Blog.

Kotak Pencarian (Search Box) sangat penting dipasang di blog. Widget yang biasa dipasang di Sidebar ini memudahkan pengunjung, juga admin, untuk mencari data, info, atau tips di blog kita.

Kotak Pencarian juga berfungsi sebagai navigasi sekaligus internal link karena hasil pencarian memunculkan daftar posting kita (jika ada yang dicarinya)

Cara Memasang Kotak Pencarian Keren di Sidebar Blog
1. Layout > Add A Gadget > pilih JavaScript/HTML
2. Copy + Paste kode berikut ini di dalamnya. (Untuk pilihan warna, ganti kode berwarna merah dengan kode-kode yang ada dalam ilustrasi gambar).

<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>

Diposkan oleh Unknown