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…
Now for any adjustments.
1. If you’d like to only have top and bottom border lines like this…
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;”
6. If you’d like to change the width of the search bar adjust the percentage in green.