Search Box Dengan Style Css Yang Elegant

Tweet

search box atau kotak pencarian salah satu bagian penting dalam suatu blog, selain fungsinya yang berguna bagi pengunjung untuk menavigasi isi dari suatu blog, juga tampilannya yang bisa kita modifikasi sesuai dengan background dari blog yang dipergunakan, dengan tambahan css dan efek didalamnya membuat tampilan search box bisa menjadi lebih elegant.

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.

Dengan tampilan yang sederhana tapi elegant, style dari search box ini dibuat oleh Rethnaraj Rambabu, yang diadaptasi dari search box milik Apple dengan background warna gelap, karena menurut saya tampilannya yang simple nan elegant saya mencoba merubah search box tersebut dari berbagai warna background seperti terlihat digambar diatas,

1. Search Box Warna Background Hijau
CSS

#search {

}

#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqB4ckJfQMebSEG9Q25WbLxCTnpnEs7zy66SJveTN5jImlJ-Pi_dUA6AJo9HYUyib9Yucrr4GiE70-ahWEQVY7K9evwUWdq3qfxXaQcYX0dLED4UgSVHlX_5xcnKj3EygwnlSOhYzp3BU/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
CSS

#search {

}

#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqB4ckJfQMebSEG9Q25WbLxCTnpnEs7zy66SJveTN5jImlJ-Pi_dUA6AJo9HYUyib9Yucrr4GiE70-ahWEQVY7K9evwUWdq3qfxXaQcYX0dLED4UgSVHlX_5xcnKj3EygwnlSOhYzp3BU/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
CSS

#search {

}

#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqB4ckJfQMebSEG9Q25WbLxCTnpnEs7zy66SJveTN5jImlJ-Pi_dUA6AJo9HYUyib9Yucrr4GiE70-ahWEQVY7K9evwUWdq3qfxXaQcYX0dLED4UgSVHlX_5xcnKj3EygwnlSOhYzp3BU/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
CSS

#search {

}

#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqB4ckJfQMebSEG9Q25WbLxCTnpnEs7zy66SJveTN5jImlJ-Pi_dUA6AJo9HYUyib9Yucrr4GiE70-ahWEQVY7K9evwUWdq3qfxXaQcYX0dLED4UgSVHlX_5xcnKj3EygwnlSOhYzp3BU/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;
    }

HTML

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

Jika tidak ada yang sesuai dengan background template yang kalian pergunakan, kalian bisa modifikasi pada bagian background search input dengan mengganti warnanya, jika kesulitan mencari warna yang cocok, bisa menggunakan tools warna pada bagian menu.

Semoga bermanfaat,

NB: 
CSS diletakan di atas kode ]]></b:skin>
 HTML diletakan di ADD gatget >> HTML/JavaScript