Add Cool wood style search box for blogger.
Follow simple and easy step to Adding this search box to blogger sidebar.--->>>
* 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>
Follow simple and easy step to Adding this search box to blogger sidebar.--->>>
* 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>
.soxbox {
background : url(http://santabanta.mywapblog.com/files/serchme.png);
width : 272px;
height : 61px;
float : right;
margin-top : 35px;
}
#search {
width : 240px;
padding : 0 0;
margin : 13px 0 0 15px;
float : left;
height : 30px;
display : inline;
}
#search form {
margin : 0 0 0 0;
padding : 0;
}
#search fieldset {
margin : 0;
padding : 0;
border : none;
}
#search p {
margin : 0;
font-size : 85%;
}
#s {
width : 190px;
background : transparent;
margin : 5px 0 0 0;
padding : 4px 5px;
height : 15px;
border : none;
font : normal 100% "Tahoma", Arial, Helvetica, sans-serif;
color : #fff;
float : left;
display : inline;
}
#searchsubmit {
background : url(http://santabanta.mywapblog.com/files/buttonsearch.png);
border : none;
color : #fff;
display : block;
margin : 2px 0 0 5px;
width : 30px;
height : 30px;
float : left;
cursor : pointer;
}
#searchpage {
background : #fff;
border : 1px solid #ddd;
margin : 15px 15px 0 15px;
}
* Now click to save your blogger Template.
* Again go to your blogger Dashboard.and click in design tab.
* Now you are here --->>>Page Element.
* Now click in Add Gadget Which is in your blog sidebar.
* When open new window choose HTML/javascript from list.
* After that when open new blank box copy below code and paste in blank box.
<div class="soxbox">
<div id="search">
<form action="YOUR BLOG URL HERE" id="searchform" method="get">
<input id="s" name="s" onblur="if (this.value == ''){this.value = 'Search my site...';}" onfocus="if (this.value == 'Search my site...'){this.value = '';}" type="text" value="Search my site..." />
<input id="searchsubmit" type="submit" value="" />
</form>
</div>
</div>
NOTE:- Remove Highlighted text from above code with your own ok.
* Now click to save yur blogger Template and CHEERS.
|
2 Responses So Far:
yes that's cool friend great stuff one G+ for your article
Wooden search box is not suitable for every theme, though it may looks good on personal & travel related blogs. Thanks for the share.