Membuat Elegant Search Box Dengan Css

Membuat Elegant Search Box Dengan Css - Search Box atau kotak pencarian adalah element yang saya pikir wajib ada di sebuah blog karena merupakan element penting yang sangat berguna untuk blog . Pengunjung akan dimudahkan untuk menemukan halaman atau materi yang ingin dibaca atau dipelajarinya hanya dengan mengetikan kata kunci di kotak pencarian tanpa harus membuka satu persatu halaman .

Dan sekarang ini saya pikir hampir semua template blogspot sudah dilengkapi dengan search box atau kotak pencarian ini . Tapi , biasanya desain yang sudah ada kurang menarik dan tampak sangat membosankan . untuk itu kita perlu mengubahnya menjadi lebih menarik dan stylist , atau bisa disebut elegant .

Dan untuk langkah pembuatannya kita bahas disini .
Siapkan dulu kode Css seperti dibawah ini .
Disini aakan saya berikan 4 Css Search Box dengan warna berbeda yang bisa anda coba satu persatu untuk memilih mana yang sesuai dengan template anda .

Dan hebanya lagi , anda masih bisa mengeditnya sendiri sesuai dengan warna yang anda inginkan .

Css Search Box Hijau

#search {

}

#search input[type="text"] {

    background: url(http://2.bp.blogspot.com/-El7-211Pt7o/T5HBuBrNztI/AAAAAAAAAow/bV7f0allh4Q/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;

    }

Css Search Box Biru

#search {

}

#search input[type="text"] {

    background: url(http://2.bp.blogspot.com/-El7-211Pt7o/T5HBuBrNztI/AAAAAAAAAow/bV7f0allh4Q/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;

    } 

Css Search Box Orange

#search {

}

#search input[type="text"] {

    background: url(http://2.bp.blogspot.com/-El7-211Pt7o/T5HBuBrNztI/AAAAAAAAAow/bV7f0allh4Q/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;

    }

Css Search Box Hitam

#search {

}

#search input[type="text"] {

    background: url(http://2.bp.blogspot.com/-El7-211Pt7o/T5HBuBrNztI/AAAAAAAAAow/bV7f0allh4Q/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;

    } 

Untuk HTML nya ada dibawah ini

HTML

<form method="get" action="/search" id="search">

  <input name="q" type="text" size="40" placeholder="Search..." />

</form> 

Demo :

Note :

Untuk Css anda letakkan di dalam template tepatnya diatas ]]></b:skin>
Dan jika di template anda sudah ada kotak pencarian , maka tinggalkan HTML diatas .

Semoga bermanfaat .