The Google Navigation bar at the top of your Blogger blogs has an embedded search box. However, you may want to include a similar box in the main body of your blog (like what I have done), or the sidebar. Other than the convenience for users, the added advantage is that unlike Google search box, the search results of this Blogger.com search box appear in the main body of your Blog.
Under Template->Page Elements tab, click “Add a Page Element” at the place where you want your search box to appear. Select “HTML/JavaScript”.
There are several HTML codes posted on the net. I tried a few, and found the one that works as follows:-
<p align="left"> <form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get"> <strong>NAME OF YOUR BLOG<br/></strong> <input id="b-query" maxlength="255" name="q" size="20" type="text"/> <input id="b-searchbtn" value="Search" type="submit"/> </form></p> |
|---|
Remember to change YOUR BLOG URL to the URL or web address of your Blog. Also, change the NAME OF YOUR BLOG to that which you want to call your site. For instance, if your Blog Name is long, you may want to write something like “Search Here” or “Search this site”.
You can also change the “Search” button to say, “Hit” or “Go”, by changing the Value.
Save the code and refresh your page. If you want a longer or shorter search box, you can play around with the size. The above example of a width size="20" and value="Hit" will give you this:-
Whereas a width size="30" and value="Go" will give you this:-
The size of the search box is a matter of appearance. You may have noticed that the maxlength="255". This indicates that a user may enter up to 255 characters in the search box, which I think is sufficient and need not be altered.
Image instead of Search button
Just for the fun of it, if you want readers to click an image instead of a button, you will first need to do up a small picture. You can also resize a picture you already have with photo editing tools like Google's Picasa. After creating a picture, upload it onto a free server like GooglePages or Google Groups, or other free hosts that offer direct links to the image files. Take note of this IMAGE URL.
The HTML code to insert is this:-
<p align="left"> <form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get"> <strong>NAME OF YOUR BLOG<br/></strong> <input id="b-query" maxlength="255" name="q" size="20" type="text"/> <input id="b-searchbtn" type="image" src="IMAGE URL" align="top"/> </form></p> |
|---|
Remember to insert into the code the IMAGE URL, where your picture is uploaded. You can align the image to the top, bottom or set a horizontal space between the bar and the image by using a hspace tag. For more examples on alignment of images, you may refer to the article Hyperlinks and Image Links (II).
While it is alright to replace the button of your Blogger search box, you may not want to do that with the Google search box since their T.O.S. disallows any alteration of their code.
© Tips for New Bloggers
28 comments:
Thanks Bizwhiz,
Hope you don't mind if I call you by this name! :) Thanks very much for this post. I have been looking for something like this desperately. Thanks very much for sharing this piece of code. I have used it in my blog (http://software-testing-zone.blogspot.com).
I have a little problem. For past few days, I am getting a script error (Object Expected) while opening my blog. This error disappears automatically, after some time of the Page Load! Interestingly the Page Number where this error points out exceeds the actual lines of my template code! That means the error occurs in a virtual line beyond my HTML lines of codes! Or am I missing something? Is there any reliable way to get all the HTML code of my blog template? I am using Blogger New.
By profession, I am a software tester. Its disgusting to have errors on my own blog. I would be highly grateful to you if you could help me in this. Please don't suggest me to use a different template. I have done so much changes to my template (you can see for yourself) that I can't afford a template change at this point.
Thanks in advance.
Regards,
- Debasis
Hello Debasis
Have you tried looking at the detailed html by enabling the "expand widget templates?" Last time I faced that problem, I used Mozilla Firefox, disabled all scripts and then enabled the scripts one at a time to see which script had a problem. Usually has to do with typo errors in the functions, variables, or not closing the commands or in my case the previous time, having an extra space in between key commands.
Thanks Bizwhiz,
for checking my blog. But I could not see your complete message as it was more than the allowed number of characters in the tag board! :(
I have checked it after expanding the widgets too. Could you please send me all your suggestions through mail? My mail id is debasis_pradhan123 [at] yahoo [dot] co [dot] in.
Thanks once again.
- Debasis
bizwhiz... thanks a lot... i already try to my first blog:
http://ahib0205.blogspot.com/
Hm.... hopefully i cant know you more because want to learn with you... Seriously i respect you with you knowledge! :)
bizwhiz,
this search box is perfect, except one thing...
Is it possible to search the authors, ex/ lets say I make a post on my blog, if I type my name "Mike Peters" in the search box, it doesn't bring up any of my posts...
I was hoping this would be a way to backdoor into creating author posts links, where you could click on an author's name under a post(or even in a sidebar link box), and it would bring up all of that specific author's posts... this would be useful for my team blog...
Is this at all possible?
thanks in advance,
- MP
Hi Mike Peters
I believe the Blogger search targets only the post contents and excludes the Footer elements. I am not aware of any method to tweak that but will post it here if I come across any.
In the meantime, you may want to consider:
1. including the author name in the post content;
2. putting author's name in the labels, and it will show as a link in the labels widget; or
3. creating a separate link list for each author.
Great blog. Very helpful to the new bloggers like me.
Thanks mate.
oh well, thanks for all of your help on this site, really this is a lifesaver
- MP
hi
the best part is the fact that it gives the result embedded in the blog, just as the original bloggar navbar
regards,
Gopal,
India
Hi Bizwhiz,
google blogs (e.g. googleblog.blogspot.com)feature a google search which shows results from "this blog", "google blogs", web, blog and news under separate tabs. is it possible to get the HTML code for incorporating such a search engine for my blog...
btw, i buit my entire blog by referring ur pages.. thanks for creating such a wonderful and systematically organized content...
Menace
Thank you so much for this code. I've been trying other search boxes, but none of them would align properly in my sidebar. Yours is perfect!
been looking for something like this but none is as perfect as your code. great job..
Is it possible to only return post titles linking to the full post?
Oh, and what about highlighting of the search words entered? I think that is vital.
Post summary capabilities would be excellent too... (Teaser, Peek-a-Boo)
Wow, would all that require 'hacks'? Sorry if this is too much trouble.
BTW I love your site. My blog owes you his life.
I love your Blog, it has really helped me spice mine up! Every question I ever had regarding "how to do it" was answered here! I really appreciate the invaluable instructions and they are so easy to follow and understand. Literally, an idiot could implement these tips! Thanks again!
Thanks man you saved my life. I am trayin to put
a search box for 20 hours.and I got crazy.then I saw your article. I did it finaly.I am so appreciate.thanks man.
thanks I am trying to figure out what are the scripts need to create this...
Thanks for sharing all the great tips here! Feel free to stop by and post a FREE ad on our blog:
http://freeadblogger.blogspot.com
Hello,
Great work.
I tried using the search box on my blog AFTER hosting in on my private domain ..did not work - despite changing the URLs and stuff
Any Ideas ?
Hey,
Very easy to follow....thanks for the how too!! got it up and running in under 2 minutes...
neeshal.blogspot.com
sweet!
Thanks! You saved me from certain embarrassment - my Google Custom Search box was turning up nothing, and the blog search is essential to the functioning of my blog.
You mention that we cannot change the button on Google's search. I notice your button says "Google" whereas Google sets it up as "Google Search". I prefer the shorter version.
Regards,
Kevin
Thanks this is absolutely great, I was stumbling around for the search box and you made it so simple for my music blog http://seasonsinmusic.blogspot.com
Thanks
Seasons
Over the past few days I have been going through your blog learning new stuff and it's truly been a pleasure. So much so I went ahead and designed 5 alternative header banners for you.
I have uploaded them to my googlepages so that if you like them you can use them however you may want consider it a gift :) (I shall remove them once u have taken them)
http://seasonsin.googlepages.com/t1.gif
This was there is t1 to t5. Have a look at all five :)
-Seasons
http://seasonsinmusic.blogspot.com
Hi Seasons
They're nice and we have saved them for our future rework of the site layout. Thanks a lot!
:) Well you're welcome and glad you liked 'em. I shall take 'em off my site now. I have benefited a lot from your site and would gladly redesign a header banner for you.
-Seasons
Oh, I bow to your knowledge. I have put the search box in my blog, but when you search, it gets an error.
By the way, in some way if this blog really gets off the ground, I will thank you in my blog and everywhere else.
http://www.girl-woman-beauty-brains-blog.com/
Me again. It says that the web page cannot be found when I click on the search option. I am thankful for all your help.
I have something to say ...