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.
