Stylish Green CSS search box special for blogger. ~ Blogger Tips And Tools |Latest Blogger Tricks| SEO Tips

Stylish Green CSS search box special for blogger.

Follow simple and easy step to adding this css search box to 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 input,#searchform input{}
#search label,#searchform label{margin:5px 0 5px 0;padding:4px 0 4px 0;font:bold 13px Verdana;text-transform:uppercase;color:#023263;display:block}
#s{width:220px;padding:6px;}
#searchsubmit{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQZyX47tHzOV_e_wv664VLORfbfpR0nUYJY82Fyhnq7-84NsYJA-XpafweJe57G_I6cuDEhtbOrGfbGK7Nzk2gxXgPDtbW0E2lINWEOc2aBxrIS4QjShu2gve8h_okLVUt4toyhSYhxf_R/s1600/search_button_green.png") no-repeat scroll 0 0 transparent;height:32px;
border:0 none;cursor:pointer;width:32px;margin-left:5px;
margin-top:0px;}
#topsearch{background:#009629;padding:5px;overflow:hidden;margin:6px 0px }
#topsearch input{}
#topsearch label{display:none}
#topsearch #s{width:226px;padding:4px}

* 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 click in HTML/javascript from list.

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

<div id='topsearch'>
<div id='search'>
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == "") {this.value = "Search";}' onfocus='if (this.value == "Search") {this.value = "";}' type='text' value='Search'/>
<input id='searchsubmit' type='submit' value=''/>
</form>
</div>
</div>

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