Add stiles search box in blogger

 

You can see. In my right sidebar has a search box and it is very stiles. You can also use it in your blogger blog.

Fast log in your blogger account and go to Design>Edit HTML and find this code.

]]></b:skin>

Now paste this code just before   ]]></b:skin>

.searchbox {

overflow:hidden;

padding:0 0 10px;

}

.searchbox .searchformtop {

-moz-background-clip:border;

-moz-background-inline-policy:continuous;

-moz-background-origin:padding;

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ_eHOzBDx5kHDAaZraXV2He8rRzitvsWOiCfqLWFS0yu8nxLm0frMRmokH54sOwyzlj82bTefmOzPEIgbX8YiDNtiJcMH8G8jbjYzQ17B1r6aw2a_sSdEaXhs0uqg2DnXUc9QqzCkiNg/s1600/searchformtop.png) no-repeat scroll right top;

border:medium none;

color:#999999;

float:left;

font-family:Verdana,Helvetica,sans-serif;

font-size:14px;

font-size-adjust:none;

font-stretch:normal;

font-style:normal;

font-variant:normal;

font-weight:normal;

height:28px;

line-height:normal;

margin:5px 0 0;

overflow:hidden;

padding:6px 5px 0;

width:129px;

}

.searchbox input.gosearch {

-moz-background-clip:border;

-moz-background-inline-policy:continuous;

-moz-background-origin:padding;

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoi2KdvHZbaZg-4W8wXz-x5938YfJGCPWCoY61Dvehc5bjSsBPOzmrmJKk-ZNP8KixI9LnNbX7ESqXm2gmUo-7X5Tmqm35BIbKdQOInSyUTgRyuD_bF6Ss_YVsu2Wgw9VEUkH37scplIM/s1600/searchbutton.png) no-repeat scroll 0 0;

float:left;

height:28px;

margin:5px 0 0;

width:63px;

}

.searchbox input.gosearch:hover {

-moz-background-clip:border;

-moz-background-inline-policy:continuous;

-moz-background-origin:padding;

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiue17avja0Jj3qCUcGPt6zFhLi76RSR-hKidx1ejQWB7kmHToEynel9qRQbhqvNTZS6LdGaZZGnUlAhhpBJann3AceBXFF1yxLDJDKpVotYfBdYxF5LGgTaoTYSxPg3IktxrIDDBr45qw/s1600/searchbuttonh.png) no-repeat scroll 0 0;

}

 Go to the Page Elements >Add a Gadget > HTML/Javascript
Now copy and paste this code in to the widget:

< form action='/search' id='searchthis' method='get'> < input class='searchformtop' name='q' type='text' value=''/> < input class='gosearch' src='http://2.bp.blogspot.com/_qJFbsMHBJNg/SoaVwtb_tmI/AAAAAAAAAKY/AozFO3K- i9w/s1600/trans.png' type='image'/> < /form>

Save your  Gadge /Widget.



Note: This search box made by Klodian.