Add Cool wood style search box for blogger. 2

| | , ,

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> 

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

StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: Add Cool wood style search box for blogger. ~ Twitter FaceBook

2 Responses So Far:

Seocetek said...

yes that's cool friend great stuff one G+ for your article

ApexBlogger said...

Wooden search box is not suitable for every theme, though it may looks good on personal & travel related blogs. Thanks for the share.

Categories

Select Your Categories