Cara Membuat Kotak Search Box

Kali ini saya mau share tentang cara membuat kotak search box. Search box berguna untuk mempermudah pembaca dalam menelusuri artikel atau informasi yang diinginkan. Oke, langsung aja kita liat caranya....

Tombol Search-nya

1. Login ke blog sobat

2. Klik Layout/Tata Letak

3. Klik tambahkan gadget (terserah mau di mana) >> pilih HTML/Java Script

4. Copy code di bawah ini lalu pastekan di page HTML-nya

<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Search..."/>
</form>
<style>
#s {
    margin: 0 auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 48px 12px 12px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
 width: 300px;
    height: 16px;
    color: #3a4449;
    border: none;
    outline: none;
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
 position: relative;
    z-index: 2;
    background: #fff url(http://2.bp.blogspot.com/-RdCoLqn34t4/UDeUFSTJ17I/AAAAAAAAKqg/GxdClZ5RjXg/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
</style>

5. Save

Mudah bukan??
Sekian postingan dari saya, semoga bermanfaat...