How to Add a Search Box With CSS Style to Your Blogger

A search box or search field is a common GUI element of computer programs, especially in file and web browsers and on web sites. It is basically a type of text box, the contents of which are to be searched for in a database. It is commonly coupled with a search button (sometimes indicated only by a magnifying glass symbol).

"Attention! before you edit your HTML code, please download your template previously"

Copy and paste the following code :

</form>

Explanation : # = Replace with your Website
Css Style : Copy and paste the following code after <head>

#searchform {

position:absolute;

right:0;

top:80px;

}

#searchform input {

border:1px solid #626262;

background:#000;

padding:5px 4px 6px;

color:#999;

width:215px;

float:left;

}

#searchform input#searchsubmit {

width:65px;

height:30px;

border:none;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid4WpKz5gdrCFz0IZmjla8vF9-aOQv5NLg94BNZqFxKOPzwtPX3UJJtceuHbMXYfxPWH1SWqzno9BlGnwol1TSas1yrUZixGb6TamWWFuFsEU4Ngj9QJmBTIbI4e7OM55yuTCRM-H16Y0/s1600/bk_search_but.jpg) 0 0 no-repeat;

cursor:pointer;

}

Explanation : Red Text = Replace with your own search Background

Google Seach Box on your Site :

<input type="checkbox" name="sitesearch"

value="http://bbloggertutorials.blogspot.com/" checked />#<br />

</div>

</form>

Explanation : Red Text = Replace with your Website
# = Text of your website