A SIMPLE AND ATTRACTIVE SEARCH BAR WIDGET

A few months ago I was doing a little blog design update... heck I'm always doing an update. I'm an addict. Anyways, in my quest to keep my blog looking clean and minimalistic I went on the hunt for a new Blogger friendly search bar. I must say, trying to find a simple looking search bar was one heck of a challenge. In the end I found one from this site and modified it to get it looking more appropriate. I've shared this code before, but it was kind of buried among a bunch of other information. I thought it might be helpful as a stand alone post. I'll tell you how to add it. It's dead simple.

To get the search bar looking like this...

Go to your dashboard and select the “Layout” tab. Click “add a gadget” wherever you want to put it and add a “HTML/Java Script” gadget. Then all you have to do is paste in code below and save it.

   <center>
   <style>   
   
   #search {  
   border: 1px solid #BDBDBD;  
   background: white url(https://lh4.googleusercontent.com/-pVUC_2t4N3Q/VHUyuRgha5I/AAAAAAAAC6g/Wm6jR3X_21U/h120/search3.png) 98% 50% no-repeat;  
   text-align: left;  
   padding: 8px 24px 6px 6px;  
   width: 75%;  
   height: 18px; mouse:pointer:  
   }  
   #search #s {  
   background: none;  
   color: #BDBDBD;  
   font-family: verdana; 

   font-size: 11px;  
   border: 0;  
   width: 100%;  
   padding: 0;  
   margin: 0;  
   outline: none;  
   }  
   
   </style>  
   
   <div id="search" title="Type and hit enter"> <form action="/search" id="searchform" method="get"> <input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search&quot;;}" onfocus="if (this.value == &quot;Search&quot;) {this.value = &quot;&quot;;}" type="text" value="Search" /> </form> </div>  
   <br/><br/>

   </center>

Now for any adjustments.

1. If you'd like to only have top and bottom border lines like this...


...then change the line in red to this:
       border-bottom: 1px solid #BDBDBD;
       border-top: 1px solid #BDBDBD;

2. If you'd like to change the colour of the border line change the section in blue.

3. If you'd like to change the colour of the font adjust the section in pink.

4. If you'd like to remove the search icon (which is really just for show) like this...

...then remove the line in purple.

5. If you'd like the font to be in caps add this line underneath "font-family: verdana;"
       text-transform: uppercase;

6. If you'd like to change the width of the search bar adjust the percentage in green.