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 action='#/search' id='searchform' method='get'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value=''/> </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(http://2.bp.blogspot.com/_MwtPDoeubSk/S2bNGjSHDwI/AAAAAAAACCI/68kTX5QuvrE/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 :

<form method="get" action="http://www.google.com/search">

<div style="border:1px solid black;padding:4px;width:20em;">
<table border="0" cellpadding="0">
<tr><td>
<input type="text"   name="q" size="25" maxlength="255" value="" />
<input type="submit" value="Google Search" /></td></tr>
<tr><td align="center" style="font-size:75%">
<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