Membuat Widget Kotak Pencarian Dengan CSS Di Blog

Membuat Widget Kotak Pencarian (Search Box) Dengan CSS Di Blog - Halo Semua, Sekarang ini saya akan membahas tentang cara membuat kotak pencarian pada blog dengan CSS. Kotak Pencarian sangat berguna untuk blog, kenapa? Karena Kotak Pencarian berfungsi untuk pengunjung yang akan mencari kata kunci di blog kamu.

Pembuatan kotak pencarian ini sangat mudah kok cuma butuh HTML, CSS Dan Secangkir Kopi (Biar Anget) Hehehehe. Pasti Kalian akan bertanya tanya kenapa harus pakai CSS? Karena kalau simple Akan Menjadi jelek. Untuk Itu langsung saja yuk:

1.Buka Blogger.com
2.Ke Tata Letak>>Tambahkan Gadget>>HTML/JavaScript
3.Setelah Itu Copy Kode Di Bawah Ini

<style>
#abt-search-btn {
   -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    background: none repeat scroll 0 0 #1abc9c;
    border: 0;
    border-radius: 0 0 0 0;
    color: #FFFFFF;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 50px;
}
#abt-search-btn:hover {border-radius: 45px;background: #34495e;cursor:pointer;}
#abt-search-box {
    background: none repeat scroll 0 0 #ecf0f1;
    border: 4px;
    color : #34495e;
    border-radius: 0px;
    padding: 10px;
    width: 180px;
    border-radius: 50px;
}
</style>
<a><form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="abt-search-box" name="q" size="40" type="text" placeholder="  Cari Disini... "/>
<input id="abt-search-btn" value="Search" type="submit"/>
</form>
</a>

4.Simpan Dan Lihat Hasilnya

Sampai Disini Saja Artikel Membuat Widget Kotak Pencarian Dengan CSS Di Blog Semoga Bermanfaat