There are innumerable tutorial’s on how to customise search box, from adding a border, to a dotted-border, change background, change the font, add a custom background but I haven’t come across one, which explain how to get just the search box without the Go/Search button.
I have struggled to create this search bar, ever since I started designing my blog. And if you have been with me long enough, you know how I keep fidgeting around the blog theme/template. Designing blog, is a creative outlet for me, where I can have fun, design and later enjoy the beautiful results, (hence the two blogs).
Enough of the rambling, here is exactly how I got my perfect search bar, with just the search box and NO go button. So if you are interested in getting this, here’s exactly how you can install it on your blog :
Step 1 : If you have a Blogger Search Widget installed, you need to get rid of it.
Step 2 : Go to Layout – Add gadget – Go To Html, and add the following code :
<form id =“searchThis” method=”get” action=”/search”>
<input onfocus=”if(this.value==this.defaultValue)this.value=”;” value=”Search this blog”id=”searchBox” onblur=”if(this.value==”)this.value=this.defaultValue;” vinput=”” type=”text” name=”q” size=”60″ x-webkit-speech />
Step 3 : Now all you need to do is customise according to your preference: Go to Template – Customise – Add CSS, and add the following Code :
font-family: “Georgia”, serif;
border: 1px solid #857d9b;
Things highlighted in red are customisable according to your theme.
For color code, there are innumerable sites offering it, all you got to do is google, but this is the site I find my self going back to always.
It’s as simple as it can be, hope this was helpful.
Disclaimer : I’m not a computer engg, or someone who specialise in Html/Css, I was able to create this code, with hit and trial method, so I thought it would be great to share with someone, who is passionate about designing their own blog, and yet is a total nob like me.