FREEBIE: LEXUS SEARCH BOX

Download

Downloads:

A simple search box with rounded corners. Size is 300x30 pixels. The width and height cannot be adjusted by editing the css codes as the entire search box is a PNG file. So if you find the image too big for your blog, you can use your favorite photo editor to shrink its size and change some of the css codes to make it look perfect. This pack contains 11 different colors of the Lexus Search Box.

Instructions:

1. Extract the images from the zip file.
2. Upload the png file in your preferred color to your favorite file host. (Tinyurl, Picasa, Photobucket, etc)
3. Get the link and replace the code highlighted in fuschia below.

CODE

 <style type="text/css">  
 #searchbox {  
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1YgqOhpLufH0ETJTWgqBdFFVUIocNhqUpC0P7kYON19BYAqx5KVqvgjeGFRqLkfhLB9QFE_7-fOV9Are3lCUtt0fuUvPvUGpMn_k77Sy6pXjigGIaY20bWMtd_N_yGQ_GhJ8RQzRuISZq/s300/red.png) no-repeat scroll center center transparent;  
 width:307px;  
 height:50px;  
 display:block;  
 }  
 form#searchform {  
 display: block;  
 padding: 12px;  
 margin:0;}  
 form#searchform #s {  
 padding: 6px 6px 6px 16px;  
 margin:0;  
 width: 257px;  
 font-size:14px;  
 vertical-align: top;  
 border:none;  
 background:transparent;  
 }  
 form#searchform #sbutton {  
 margin:0;  
 padding:0;  
 height:30px;  
 width:30px;  
 vertical-align: top;  
 border:none;  
 background:transparent;  
 }  
 </style>  
 <div id="searchbox">  
 <form id="searchform" action="/search/max-results=8" method="get">  
   <input type="text" id="s" name="q" value=""/>  
 </form>  
 </div>  

That's it! Having trouble? Leave a comment :D