Custom Search Image Wih CSS

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-iAxFhGS-sEW_v-4f4TbYVZGOaecuRc-8lXNOEUfKfZNZpbPKDRhOt0KSVXNukKpZ11_gy8rAQzyD1VKaLjiKm_xZBWx57hEPIjmlHL_vQ7vrz28RE8X8kaDbtIc_CowPp-ffHALiiH21/s1600/Search%20Kolom%20Tutorial-black.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA4_jh3d8JVBhQ8wXSpg-muXyUFUAwmsj1HY_1E-XACRMsfd3Aju_IHzcYL-NfrIfhzJQibrzCfYa1o_pzry7aQLKrqUNatnDbjJTB0jCrpmze-Rk01d9LlD1orzsduEgMaVtp_LXapK_3/s1600/Search%20Kolom%20Tutorial-blue.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitf3Tj6oCMEGzf_2KwMIa445K3P6bkjvSFz2IBBOzd0dE8Qf1yFFae-i934TCwNXEritN8YCSaTObfaGTxSq2UVXAV63vFlni8y3Q3b4rYzVq3_GMym6X951B9ro8uVqwuP1VwtBR4-Qx5/s1600/Search%20Kolom%20Tutorial-orange.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH8YGBbb9xzySvVarj2vJ5ljjD7Sz6fN40F7q2eQDVBcWSn50i6kDbUkX-qCanwCZLu9jBY4M7vts68dbTH3MhK6uYTxlYQ2f91XOEbwrBH2wGTD36ssSiCi4oQDe4B6EK0j-a9Dp2cwZh/s1600/Search%20Kolom%20Tutorial-pink.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYeLqvCgkCJqqAJr4VHqd8-yZAkhktzQMKCpoXQD4xWZUQCH_n-nlaUAqpb7Gppp57XLW2H2HryzuAS6I0WRj-wa99JJx5lsX2FvcHV2QTBhyphenhyphenH3Fpf9_yzIyCQNcwKsidCOdUVRBYhb-Vx/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-iAxFhGS-sEW_v-4f4TbYVZGOaecuRc-8lXNOEUfKfZNZpbPKDRhOt0KSVXNukKpZ11_gy8rAQzyD1VKaLjiKm_xZBWx57hEPIjmlHL_vQ7vrz28RE8X8kaDbtIc_CowPp-ffHALiiH21/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