Blogger9:- Now add best css search box in your blogger blog. ~ Blogger Tips And Tools |Latest Blogger Tricks| SEO Tips

Hi add this best css search box in your blogger blog. So that people find something by search method easily.

Follow simple and easy step to adding this css search box in your blogger blog now ---->>>>

* First go to your blogger Dashboard.

* Now click in design tab and edit HTML .

* Click in small box to expand your blogger template.

* Now find this code ]]</b:skin> by CTRL+F key easily.

* Copy below code and paste before ]]</b:skin>

/* Search
----------------------------------------------- */
#search{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwHubUQlIud8diEMWKc30YpCsX7CGf4SPSzXHtyzGqCVeN3R-ytGRQHu0SQp0K5YfjzYUB-WmRooeA_WKYIqOQYyP-4-7uL7sHo8EmvcC7VIBoherdOKO951_mbuga9XmbdrScTrbmW3w/s1600/sb-widget-bottombg.png) no-repeat left bottom;
width:204px;
padding:10px 48px 20px;
margin:0px 0 2em;
float:left;
}
#search h2{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbwybrUCLBUnwLmSroZ6VNcul8vaObMRTSukG6vLJZjQKzB8EUeBMlpzspp_kzryZvtlaWey8wZqmbI177Oxok9XBsYhmwJSJ0X2pAkhqA30JMveTAjDL9RTzuR45i-jUYGC8gz9M4jOU/s1600/icon-search.png) no-repeat;
padding:23px 0 0 40px;
margin-bottom:0px;
text-shadow:1px 1px 1px #fff;
}
#search p{
margin-bottom:8px;
}
#searchform{
/*background:transparent;*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-2ftlnwH1GedsYdhH2YcPowMHrWRXctGA77CK4Yorsy5xwYusOu5foaVkyjpRtLcj7AyfElMnv_IaffYcWBU1_pDTTcmAD2CfTTHrEYL0JaBZTm-PRE6jvT2gnBopYdnIEX6b4FlMFb4/s1600/bg-search.png) no-repeat;
padding-top:2px;
height:32px;
float:left;
}
#searchtext{
background:transparent;
/*background:#f00;
filter:alpha(opacity=70);opacity:0.7;*/
width:110px;
padding:5px 2px 0 8px;
color:#000;
border:none;
float:left;
}
#searchbutton{
background:transparent;
/*background:#939;
filter:alpha(opacity=70);opacity:0.7;*/
margin-left:11px;
width:72px;
height:26px;
border:none;
float:left;
}

* Now save your blogger template.

* Now go to your blogger Dashboard.

* Click in design tab and you are here--->>> Add element

* Click in Add gadget which is in your sidebar.

* When open new window select HTML/Javascript from list.

* When open new blank box copy below code and paste in blank box.

<p>Enter a keyword or template name:</p>
<form action='/search' id='searchform' method='get'>
<input id='searchtext' name='q' type='text' value=''/>
<input id='searchbutton' size='10' type='submit' value=''/>
</form></div>

* Now save your blogger template now you are done ok.