Search Box Blogger Smoke Theme with CSS

Bermain kembali dengan kotak search nich sobat² karena tidak ada gawean. Pernah memosting Search Gaya Full Stylish. Kotak search dengan efek hover kala cursor didekatkan :D Sobat kepengen ini mungkin Search Engine Custome for Blogger! Bahkan yang ekstrim sekalipun pernah Beben Koben si bloglang anu ganteng kalem tea sharing Custome Search Google API Key jQuery Ekstrim.
Banyak sekali dengan variable search kita bisa berkreasi loh bos. Di blog Ben Tools juga banyak menerapkan trick search dalam mengkoleksi tools online :)) Contoh search via google & blog secara sederhana search side korek-korek style :D

Kesempatan sekarang koben mau berbagi membuat kotak search bergaya tampilan smoke or rokok :P Cuman pakek CSS doang kok bos, enggak pakai gambar ;) Screenshot gan

Bagus kan tuh sob :">

Kode CSS

#SearchForm {
top: 5px;
right: 5px;
height: 31px;
width: 275px;
background: #FFFFFF;
border: 1px solid #555;
}

#SearchBox {
width: 10px;
height: 31px;
background: #FF0000;
border-right: 1px solid #333;
}

#submitButton {
float: right;
width: 65px;
height: 31px;
border: none;
cursor: pointer;
color: #555555;
background: #FFCC80;
border-left: 3px double #999;
}

#submitButton:hover {
color: #FFFFFF;
background: #FF6600;
}

#SearchInput {
color: #555;
border: none;
width: 210px;
font-size: 13px;
background: none;
padding: 7px 0 0 20px;
text-shadow: 1px 0 0 #111;
font-family: Arial,Helvetica,sans-serif;
}

#SearchInput,.DefaultText {
color: #aaa;
}

#SearchForm,#SearchBox {
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
}

Kode HTML

<div id="SearchForm">
<form action="http://YOUR-URL-BLOG.blogspot.com/search" method="get">
<input id="submitButton" value="Submit" type="submit"/>
<div id="SearchBox">
<input class="DefaultText" name="q" id="SearchInput" placeholder="Search the site..." type="search"/>
</div>
</form>
</div>

Gantikan URL dengan link blog sobat, width yg diberi warna yaitu panjang secara keseluruhan. Jadi kalau panjangnya kepanjangan itu saja dulu yg dirubah ;) See you :-h
Happy search \m/