New Border style css search box for blogger ! Really good. ~ Blogger Tips And Tools |Latest Blogger Tricks| SEO Tips

New Border style css search box for blogger ! Really good.

Follow simple and easy step to adding tis box to your blogger blog ---->>>>

* 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  {
border : 0;
height : 30px;
padding : 0;
text-align : right;
}
#search input {
color : #000000;
font-size : 15px;
padding : 4px;
}
#s {
width : 270px;
border : 1px solid #999;
margin : 0;
background : #ffffff;
}

* Now click to save your blogger template.

* Again go to your blogger Dashboard and click in Design tab.

* Now you are here --->>>> Page element.

* Click in Add Gadget which is in your blog Sidebar.

* When open new window choose HTML/javascript from list.

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

<div id="search">
    <form method="get" id="searchform" action="ADD HERE YOUR BLOG URL"> 
        <input type="text" value="Search Now" 
            name="s" id="s"  onblur="if (this.value == '')  {this.value = 'Search';}"  
            onfocus="if (this.value == 'Search') {this.value = '';}" />
        <input type="image" src="http://santabanta.mywapblog.com/files/search101.gif" style="border:0; vertical-align: top;" /> 
    </form>
</div>

NOTE:- Remove Highlighted text from above code with your blog url.

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