Add CSS2 search box in your blogger blog easily. 0

Hi friends now add this special css2 search box in your blogger blog easily.

PREVIEW:-

Follow simple and easy step to adding this search box in blogger ---->>>>

* 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.

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

/*search*/
#searchform{
margin:10px auto;
background-color:#444;
border:2px solid #333;
}
#searchform div{
border:1px solid #565656;
padding:5px 0;
text-align:center;
}
#searchform label{
background-image:url(http://i254.photobucket.com/albums/hh92/eblogtemplates/minyx/icon_search.gif);
background-position:0 0;
background-repeat:no-repeat;
padding:2px 0 10px 25px;
height:14px;
}
#searchform #s{
font-size:11px;
padding:2px;
width:72%;
}
#searchform img{
border:none;
padding:0;
margin:0;
}
#searchform #searchsubmit{
margin:0 5px 0 0;
padding:0;
width:70px;
height:21px;
position:relative;
float:right;
}

* Now click to save your Blogger Template.

* Now again go to your blogger Dashboard.

* Click in design tab and now you are here--->>> Page element.

* Click in add Gadget which is in your blog sidebar.

* When open new window click in HTML/javascript from list.

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

<div class='search'>
<h2>Search</h2>
<form action='/search' id='searchform' method='get'>
<div>
<input id='searchsubmit' src='http://i254.photobucket.com/albums/hh92/eblogtemplates/minyx/btnsearch.gif' type='image'/>
<label><input id='s' name='q' type='text' value=''/></label>
</div>
</form>
</div>

* Now click to save your HTML/javascript code and now you are done.

blogger tutorials Social Bookmarking Blogger Widget

I'm reading: Add CSS2 search box in your blogger blog easily. ~