Custom Search Image Wih CSS

http://4.bp.blogspot.com/-2nImh0zMLTA/UNe5ZPhMY-I/AAAAAAAAAqo/VUKgdCMAPD0/s1600/Search%20Kolom%20Tutorial-black.png

http://2.bp.blogspot.com/-G2Rvwy93ASs/UNe5Z2GOG1I/AAAAAAAAAqs/HNg6VDXbyJs/s1600/Search%20Kolom%20Tutorial-blue.png

http://1.bp.blogspot.com/-RlAHGn7XqMA/UNe5bMyi5cI/AAAAAAAAAq4/wx9wqAEi56w/s1600/Search%20Kolom%20Tutorial-orange.png

http://4.bp.blogspot.com/-Y3gbQkVV8pE/UNe5cNwgwbI/AAAAAAAAAq8/p0ekZxDIMfo/s1600/Search%20Kolom%20Tutorial-pink.png

http://3.bp.blogspot.com/-_5H1iGbwQfQ/UNe5dcU1GZI/AAAAAAAAArI/jOjgKqxeBEc/s1600/Search%20Kolom%20Tutorial-white.png
  1. First choose any search box below
  2. Copy the code of that search box
  3. Go to Blogger Dashboard > Layout
  4. Click Add a Gadget
  5. Select HTML/JavaScript
  6. Paste code and save it
  7. Drag it to the top of your siderbar,if you are good blogger :)

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(http://4.bp.blogspot.com/-2nImh0zMLTA/UNe5ZPhMY-I/AAAAAAAAAqo/VUKgdCMAPD0/s1600/Search%20Kolom%20Tutorial-black.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}
form#helperblogger-searchform {
    display: block;
    padding: 10px 12px;
    margin: 0;
}
form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 220px;
    font-size: 14px;
    font-family: verdana;
    vertical-align: top;
    border: none;
    background: transparent;
}
form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 44px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="helperblogger-searchbox">
    <form id="helperblogger-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Search...";}' />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>

Note :
Ganti Tulisan Warna Merah Dengan Stile Sobat