Search Box dengan Css Style

Search Box dengan Css Style. Pertama saya pelajari dari blognya Kang Dadang. Sehingga akhirnya saya berpikir bahwa sangat penting untuk membagikannya kepada sobat blogger. Search Box ini sangat unik sekali jika dibandingkan dengan search box lainnya. Dilihat dari sistem kerja search box ini mungkin tidak sebaik custom search dari google yang bisa menampilkan pencarian keyword yang lebih baik, tapi sayangnya custom search dari google menurut saya loadingnya terlalu berat sehingga mempengaruhi loading blog, sebagai alternatif bisa menggunakan search box dengan style css dengan perintah html yang lebih sederhana.

Untuk memperjelas seperti apa style dari search box yang satu ini, sobat blogger bisa melihatnya di sini.

DEMO

Mungkin sangat sederhana, akan tetapi dengan desain yang elegan menurtu saya search box yang satu ini sangat kren jika ditampilkan pada blog sobat. Selain tampilan yang elegan, search box ini juga mempunyai beberapa desain dengan background yang berbeda-beda. Berikut kode Css dari search box:

=================================================================

1. Search Box Warna Background Hijau

=================================================================

#search {

}

#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig4b0VUzgKqI4jzC6-shDSWZF1JJZsJlXfCtlJ1z4Bnu50I8OcxWs3hWaNw-Z7uGyjHKYmYWO1m0FMbPqRJjPQ-iKOx55rd8akU5gZPRZnps8MpJweET5h5yinSOzQ0JkJdXzut1ti3ro/s1600/cari.png) no-repeat 10px 6px #506D2C;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bbbbbb;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 185px;
    }

=================================================================

2. Search Box Warna Background Biru

=================================================================

#search {

}

#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig4b0VUzgKqI4jzC6-shDSWZF1JJZsJlXfCtlJ1z4Bnu50I8OcxWs3hWaNw-Z7uGyjHKYmYWO1m0FMbPqRJjPQ-iKOx55rd8akU5gZPRZnps8MpJweET5h5yinSOzQ0JkJdXzut1ti3ro/s1600/cari.png) no-repeat 10px 6px #37627B;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bbbbbb;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 185px;
    }

=================================================================

3. Search Box Warna Background Orange

=================================================================

#search {

}

#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig4b0VUzgKqI4jzC6-shDSWZF1JJZsJlXfCtlJ1z4Bnu50I8OcxWs3hWaNw-Z7uGyjHKYmYWO1m0FMbPqRJjPQ-iKOx55rd8akU5gZPRZnps8MpJweET5h5yinSOzQ0JkJdXzut1ti3ro/s1600/cari.png) no-repeat 10px 6px #BF6E18;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bbbbbb;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 185px;
    }

=================================================================

4. Search Box Warna Background Hitam

=================================================================

#search {

}

#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig4b0VUzgKqI4jzC6-shDSWZF1JJZsJlXfCtlJ1z4Bnu50I8OcxWs3hWaNw-Z7uGyjHKYmYWO1m0FMbPqRJjPQ-iKOx55rd8akU5gZPRZnps8MpJweET5h5yinSOzQ0JkJdXzut1ti3ro/s1600/cari.png) no-repeat 10px 6px #5E5E5E;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bbbbbb;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 185px;
    }

Silahkan sobat blogger pilih salah satu mana yang anda suka, lalu letakkan di atas  ]]></b:skin>. Kemudian Simpan Template blog anda.
Untuk penempatan search box nya sebeanrnya terserah sobat blogger (silahkan berkreasi). Tetapi jika sobat blogger belum mengerti, cukup hanya meletakkan kode HTML berikut pada HTML/JavaScript blog sobat.

<form method="get" action="/search" id="search">
  <input name="q" type="text" size="40" placeholder="Search..." />
</form>

Semoga bermanfaat, sekian dan terima kasih. Mohon maaf jika ada salah. (Jkt/2012)