Updated Simple Search Bar For Blogger

Posted : Saturday, February 05, 2011
Post Author : Paul Crowe

I have been contacted a few times lately by readers looking for the code for a search bar.To be honest there are hundeads of tutorials available on creating a search box including one i posted in 2009, but i decided to post an updated version of that simple search bar.So i have in this post a simple search bar you can place anywhere in your blog but this time with code thats called Onfocus and Onblur effects.With these effects you can have text inside the search bar, when a user clicks inside the bar the text disappears, when you click back outside the bar the text appears again.You can also change the text on the search button and change the width to suit your blog.

Demo – Below is a working demo:

Simple Onfocus Onblur Search Bar

Code

<form id=”searchThis” action=”/search” style=”display:inline;” method=”get”>
<input id=”searchBox” name=”q” size=”20” type=”text” value=”Search This Blog….” onfocus=”if(this.value==this.defaultValue)this.value=”;” onblur=”if(this.value==”)this.value=this.defaultValue;”/> <input id=”searchButton” value=”Search” type=”submit”/>
</form>

Note – To change the width of the search bar increase or decrease ’20’ in red.Change ‘Search’ in red to the text you want on the button.

Add Search Bar To Blogger Sidebar

Step 1. In your Blogger dashboard click Design > Add A Gadget > Choose Html/JavaScript.

Step 2. Paste the Search Bar code into the html/Javascript gadget and save.

So that’s a neat simple search bar for your blogs, Check out more of our Best Blog Gadgets.

15 comments:

TheEmoLabFebruary 6, 2011 at 2:34 AM

Nice Blur Effects

ReplyDelete
SeverinoFebruary 10, 2011 at 10:06 PM

EXCELENTE GOSTEI!

ReplyDelete
IPC BethelMarch 19, 2011 at 7:08 PM

Thank you. I would love to put that search bar on my blogger header. o you have a tutorial for that.

ReplyDelete
EvanMarch 28, 2011 at 3:54 AM

Sweet but i already have a search bar thanks

ReplyDelete
ninesApril 23, 2011 at 2:52 AM

Well, this certainly rocks, but it does NOT actually search my blog. The only search function that seems to work is the “Powered by Google” one and I really would love to get rid of that.

ReplyDelete
adapterMay 9, 2011 at 5:30 AM

thanks a lot

ReplyDelete
Laura GattisJuly 13, 2011 at 9:10 PM

I have the same problem that nines had – it doesn’t actually search the blog!

ReplyDelete
trickhunters.tkAugust 14, 2011 at 11:59 PM

it gives me no answers 🙁 no results for any search. how can i fox that?

ReplyDelete
jamesNovember 24, 2011 at 7:44 PM

this only works once then oddly it fails

ReplyDelete
RhondiFebruary 24, 2012 at 2:54 PM

works great! thanks!

ReplyDelete
Stacey @flickerwhipsMay 29, 2012 at 8:50 PM

Worked beautifully THANK YOU!

ReplyDelete
h4ck3r.juttJune 28, 2012 at 4:43 AM

hey spicy dude you got it thanks buddy!!!!

ReplyDelete
unlimiteddownloadzone.comJuly 29, 2012 at 11:37 AM

Looking great!

ReplyDelete
Juan dela CruzNovember 20, 2012 at 4:35 PM

Great Tool! Thank you for sharing

ReplyDelete
Site Search – SearchbloxMarch 25, 2013 at 4:11 PM

So good of you to share this to all the bloggers out there. Keep it up dude!

ReplyDelete