Make Search Box Ala Web Disqus

Tidak sengaja awal melihat box search kepunyaan web DISQUS. Pada home page tidak terlihat, tetapi seperti Koben bilang tidak sengaja masuk ke bagian halaman dokumen! Disanalah gue melihat seonggok kotak pencarian full stylish b-)
Saran Koben, sobat buat account disana, walau tidak memasang embed comment, tapi fitur yang ditawarkan dapat berguna. Satu contoh yg terasa banget yaitu comments activity kita, selama meninggalkan komentar pada web/blog yg menggunakan embed komentar disqus. Kita dapat melihat link² dimana kita sudah menuliskan komentar ;) Enggak masang comm. embed saja merasakan manfaat, apalagi kalau masang :d ℓєєємммðððттт...:))
Duh malah keasyikan cerita, lupa mau berbagi cara membuat kotak komentar versi disqus :D Unik kotak pencarian disqus ini terdapat tampilan photo/avatar di bagian kiri.

Dibutuhkan 2 buah image, right click ► Save Link As...

1. Image 1
2. Image 2

Masukan bumbu CSS berikut dengan metode Add a Gadget ► HTML/JavaSCript.

<div id="cari">
<div id="avatar">
<img src="http://PHOTO-AVATAR.jpg" alt="" />
</div>
<form method="get" action="http://YOUR-BLOG.blogspot.com/search">
<input type="text" name="q" id="searched" class="box" placeholder="Search the docs..." />
<input class="btn" title="Submit Search" type="button"/>
</form>
</div>
<style>
#search {
    float: left;
    padding: 10px 0 12px 15px;
    margin: 10px 0 0 8px;
    color: #7c7c7c;
    font-weight: bold;
    background: none;
    width: 150px;
    font-size: 13px;
}
#avatar {
    padding: 13px 0 0 12px;
    float: left;
}
#avatar img {
    width: 32px;
    height: 32px;
}
.btn {
background: url('http://Image 2.png') no-repeat;
    position: relative;
    top: 19px;
    left: 9px;
    cursor: pointer;
    border: 0;
}
#cari {
    height: 57px;
    width: 256px;
    background: url('http://Image 1.png') top left no-repeat;
    margin: 0 0 20px;
}
#cari input {
    border: none;
}
#cari input:focus {
    border: none;
    -webkit-box-shadow: none;
}
.box {
    background: #fff;
    border: 1px solid #c7c7c7;
    overflow: hidden;
}
</style>

Jangan lupa ganti link image. Image photo resolusi (75 x 75 pixels)
Hasilnya akan seperti ini

http://jsbin.com/ohumup

Ingat, karena ini menggunakan image yg sudah dipatok tinggi dan lebarnya, maka jika sobat mau sesuai dengan template harus bikin sendiri gambarnya :D
Happy search \m/