Post Author : Paul Crowe
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.
Nice Blur Effects
ReplyDelete
EXCELENTE GOSTEI!
ReplyDelete
Thank you. I would love to put that search bar on my blogger header. o you have a tutorial for that.
ReplyDelete
Sweet but i already have a search bar thanks
ReplyDelete
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
thanks a lot
ReplyDelete
I have the same problem that nines had – it doesn’t actually search the blog!
ReplyDelete
it gives me no answers 🙁 no results for any search. how can i fox that?
ReplyDelete
this only works once then oddly it fails
ReplyDelete
works great! thanks!
ReplyDelete
Worked beautifully THANK YOU!
ReplyDelete
hey spicy dude you got it thanks buddy!!!!
ReplyDelete
Looking great!
ReplyDelete
Great Tool! Thank you for sharing
ReplyDelete
So good of you to share this to all the bloggers out there. Keep it up dude!
ReplyDelete