Make Search Box Ala Web Disqus - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Make Search Box Ala Web Disqus, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Blogger, Article Coded, Article CSS, Article HTML, Article Trik dan Tips, we write this you can understand. Well, happy reading.

Title : Make Search Box Ala Web Disqus
link : Make Search Box Ala Web Disqus

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/

Thus articles Make Search Box Ala Web Disqus

that is all articles Make Search Box Ala Web Disqus This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Make Search Box Ala Web Disqus with the link address https://autopostingblogspot.blogspot.com/2012/04/make-search-box-ala-web-disqus.html