Customized Seach Box for Blogger

Rate this Post:

{[['

']]}

Here is the customized search box for blogger.

How to install this Widget???

There are two simple steps how to install it;
1. Adding the CSS Code
2. Adding Widget code to sidebar

Adding CSS

1. Go to template and edit html and click proceed
2. Click on expand widget
3. Now add this code before ]]></b:skin>

#blogproOldSearch {
    display: block;
    clear: both;
    margin: 10px 0;
}

#blogproOldSearch #blogproSinput {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOtwTtMKyNWaAOvRqbWNt95XANbbjm4SfI-Z5B7SZzMn2SmdJ9vdEkzj6NMvYX3maxzluOZRHYByc8q6KZh9JF-IjWKQkmdfe_oDxSuDtEAXBc-NDiMRo28kbcgRMbB4Qashbifu3trWtj/s20/Search-icon.png") no-repeat scroll 8px center transparent !important;
    padding: 7px 15px 7px 35px !important;
    color: #444;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #D3D3D3 !important;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    -webkit-box-shadow: 1px 1px 2px #CCC inset;
    -moz-box-shadow: 1px 1px 2px #CCC inset;
    box-shadow: 1px 1px 2px #CCC inset;
}

#blogproOldSearch #blogproSsubmit {
    color: #444;
    font-weight: bold;
    text-decoration: none;
    padding: 6px 15px;
    border: 1px solid #D3D3D3;
    cursor: pointer;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    background: #fbfbfb;
    background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
    background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
    background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

Adding Widget Code

1. Go to Layout and choose Add Gadget in the sidebar
2. Choose HTML/JavaScript and paste this code;

<div id="blogproOldSearch">
    <form action="/search">
        <input type="text" name="q" id="blogproSinput" />
        <input type="submit" value="Search" id="blogproSsubmit"/>
    </form>
</div>