Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Feb 9, 2007

Digg This Story

Add Blogger search box

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 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"/>

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:-

Search Here

Whereas a width size="30" and value="Go" will give you this:-

Search Here

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

Search Tips for New Bloggers

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"/>

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

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button


Debasis said...

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 (

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.

- Debasis

bizwhiz said...

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.

Debasis said...

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

ahib0205 said...
This comment has been removed by the author.
ahib0205 said...

bizwhiz... thanks a lot... i already try to my first blog:

Hm.... hopefully i cant know you more because want to learn with you... Seriously i respect you with you knowledge! :)

Mike Peters said...


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

bizwhiz said...

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.

Kiran Kumar R said...

Great blog. Very helpful to the new bloggers like me.

Thanks mate.

Mike Peters said...

oh well, thanks for all of your help on this site, really this is a lifesaver

- MP

Gopal Aggarwal said...


the best part is the fact that it gives the result embedded in the blog, just as the original bloggar navbar


Menace!!! said...

Hi Bizwhiz,

google blogs (e.g. 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...


Lisa Braithwaite said...

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!

lotis said...

been looking for something like this but none is as perfect as your code. great job..

Anton Saputro said...

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.

L. Noelle said...

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!

Anonymous said...

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.

mj said...

thanks I am trying to figure out what are the scripts need to create this...

Free Ad Blogger said...

Thanks for sharing all the great tips here! Feel free to stop by and post a FREE ad on our blog:

Digitaldoc, MD said...


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 ?

Neeshal said...

Very easy to follow....thanks for the how too!! got it up and running in under 2 minutes...


Jeremiah McNichols said...

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.

Kevin Flatt said...

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.


Seasons said...

Thanks this is absolutely great, I was stumbling around for the search box and you made it so simple for my music blog


Seasons said...

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)
This was there is t1 to t5. Have a look at all five :)

bizwhiz said...

Hi Seasons

They're nice and we have saved them for our future rework of the site layout. Thanks a lot!

Seasons said...

:) 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.


Profile said...

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.

Profile said...

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.

Asher said...

Thanks Bizwhiz,

The search box works perfectly!!

I just love the simplicity of the search engine design and codes.

Hamoshe said...

What a wonderful blog!! You've helped me alot already Thanks m8!
But i've a question that hope you answer to it! I've Pictures in my blog that i dont want to let ppl save it in their computers. How to protect them? If you know what i am talking about :S
Please reply!!
Best wishes , hoe

Brisbane Computers said...

It would be great to search and come up with the post title and a summary. Is this possible?

Dr Kevin Lau said...

Hi bizwhiz.
Thanx for the info on ur site... it has helped me to revamp my blog...

Im trying to set up the search box but i keep getting the error page on blogger when i click search.

could you please tell me what im doing wrong...

the site is
my email is
Thanx in advance...

Adam moss said...

Thanks for all your optimization advice, I've really improved my site's (and name's) search ranking on Google etc, thanks to you.

I think I'll link to your site on mine:

Billy said...

Can you edit or remove the info bar that details your search results and appears at the head of the results? It doesn't look good with my blog's design.

Cristache said...

Thanks for the code, it's exactly what a newbie like me needed. very simple yet effective.

OOM said...

Saved - to be used at a later time! Thanks for sharing it!

Lauren said...

Thanks for the post - instructions are very easy to follow. But although my search box looks nice, it's not working properly. When I search for a word that I know is in my blog, the results page is a main Blogger page that says, "The blog you are looking for was not found."

What did I do wrong? Any help would be appreciated.

Lauren, aka Grubbin' Girl

Stunning said...

Thx u very much friend ur blog rocks :)

Neha said...

Hi , I have added the search blog in my blogger. But it does not search for the items in my blog. I dont know why...
I am using googlepages , will it make any problem ?

PLease give me some tip to solve this problem...

Laura Pintos said...

Thank you!!! After trying different codes, finally I get to yours wich is much more simple and easy to include.

Emma said...

I'm self-hosting my Blogger powered blog but would like to use the search capabilities via a search form, as per your post. Do you know of any way this can be done, as the '/search' action won't work if you self-host.

Puma said...

hi there, well the search works fine for my blog, but is there any way i can change the border of the searchbox, coz my site has a dark backgroung so the search box dont appear exept the "search " button coz it has a white border line around it...

Girl-Woman said...

I have put the search box on the left sidebar. It looks fabulous but it doesn't work. Any suggestions?

Thanks for your help!!!!!!!!!!!

Anything I can do to support your site?
Love your site.

tamdoll said...


Web 2.0 Usability Blog said...

Great code, I've been looking to add a Google search to my sidebar.

Anonymous said...

Is there any way to make a search box
that will not show certain labels (if that option is checked)
For example let's say you have a blog where you write jokes and you have label "offending jokes" ,so is there a way to put check box by a serch box ,so people can choose do they want to find "offending jokes" or not.

Please if you can solve this I would be very gratefull,i've been loking for something like this for months!

Thanks in advance and great blog by the way

Vannie said...


i followed ur instructions in putting the search box; but it doesn't seem to work.


any idea what i did wrong?

WiseGuy said...

Any tips on customizing the search results page? I would like to have a block of HTML display above search results - but ONLY on search results pages. Thoughts?

Presale Passwords Blog

Billy said...

Hi. I have a similar search box on my blog, and was wondering if there's any code I can add that will change the search-box border colour from the default pale blue, to a pale grey, such as #cccccc?

Ana Ann said...

great info... thumbs up ..great site... tQ : )

Ana Ann said...

"google custom search engine" is it free ???????????

does it cost any $$$ ?????? ..:D


Gino said...

Hi, great tip. I've been looking for this quite some time. I immediately tested it on my blog ( and it works just great.
Thx 4 the code Bizwhiz

Rant Maker said...

First, I love your site. For someone like me who's so new to blogging, this site is like an oasis.
Now, a question - when I add "Add Blogger Search box" code in the Edit Template HTML I have two issues:
1) if I type a query in the search box - it says your blog was not found
2) Right now I try to add the box code to the safest spot within the blogger code (where I perceive it will not do any harm or not interfere with rest of the code) but that pushes it to the bottom of the left sidebar below the blog archive and below my profile. How can I push it to top or near top!
Thanks for your help

lovely0921_ph said...

hi there bizwhiz. i have been fascinated with your posts about templates, design and such...i am a newbie here so i really dont know what to do by then.and i have come to see your site when i was searching for help.
i already subscribed to your post thru feedburner as i really want to be updated everytime you will be posting new helpful tips and guides especially for newbie like me...and its really helping me a lot, i want to thank you so much for that and give you credits for doing a great job here! thank you.
anyway, i have a query about making 3 columns template(minima)...i already done it step by step as i want to have my posts in center and sidebars on each side. but i really dont know why it still cannot be done, it gives me a 2 sidebars on right and the posts is on left side.
this is the code on my template, kindly enlighten me further on what should i really have to do to have my posts on the center and sidebars on each side please.

---oh i was about to include here my codes in my template but it said that

Your HTML cannot be accepted: PHP, ASP, and other server-side scripting is not allowed.

so i deleted it instead just to send this query.i hope you can respond on this if you have time and tell me how can i send you my code so that you can be able to see what mistakes i have and what can i do.
thank you in advance.more power to you! i really love your site.

Best Regards,

Anonymous said...

Thanks for a great site! Exactly what I was looking for!

Matthew said...

Hey BizWhiz. First off, your site is awesome, period. My question is actually regarding the Google Search box you have on your site. Simply, how on this earth did you manage to get your google search box to look like that? lol The reason I ask is because I set one up on my site (Adsense for Search), and for the life of me I can't get it to look nowhere near the same as yours does. Basically, I have a google search box with the "google custom search" watermark within the search box. I don't want that though. I want pretty much exactly what you have. How did you do it? A response would be very much appreciated, but ok if you don't. Anyways bizwhiz, man, your site is the best of it's kind on the interent. Period! Thanks

Leeza said...

NIce stuff, good and interesting articles. I actually learn something today, that I’m on
my way to try…

nemSEANati said...

Wow, thanks so much for this, but I have a question. I'm very anal about how the search bar will look and I've been looking all over the web for a way to get rounded corners on it.

Here's my testing blog.

cik choki2 said...

what if the search returns no result? how do i customize the page? thanks

HeAdRuSh said...

I think this is a mecca for new bloggers&Webmasters. Absolutely everything has been explained whole heartedly!
THanks alot:)

sagar said...

thanx for your wonderful post... but i have a problem with ma blog..

jst check out this post and tell how can i add DONATE, REFERRAL ADS (wic has html code for image) using "EDIT HTML" in DASHBOARD.. when i tried to do i got error saying "xml not properly must end with img/>... can any one help how to put it in correct way... i knw the easier method is by going to ADD PAGE ELEMENT but i want to give ma own colour n fonts size to the heading part... If u see ma blog carefull there is one column @ right sidebar that iam sucessful to design in ma own way.. i use font size 2 n 3 with RED colour.. so i want to maintain same size n colour.. can u pls help...
Thanks in advance....
pls contact me at

Branwen said...

Great blog with helpful information. I have saved you to favourites and shall be back to read more.

Brianon said...


Your blog has been extremely helpful and I'm grateful to God for letting me find it. I was wondering if there's a way to make my posts sit at the center of my page, instead of at the left or right.

Ankur Marwaha said...

Hi Bizwhiz,
Is there a way i can add a PHP proxy bar or a CGI proxy bar on my Blog


Ankur Marwaha said...

Hi Bizwhiz,
Is there any way i can add CGI Proxy or PHP Proxy control on our blog spot. what i found over internet is that we need to upload some files.

waiting for a response

Plain Elmo said...

Well done~ you deserve commendation for this :)

Evan said...

I love how the search box works and the ability to use an image as the button. I want to take it one step further and make the image flip.
I'm having trouble applying an image flip to the search box code. The code seems to be neglecting the mouseover commands and posting the basic image still. My Blog is

Thanks for all your other tips, helping me blog. =)

Anonymous said...

Thanks so much for this code!!!! It is so refreshing to find something that is so easy to implement and works the first try!

Follow up question: I would like to add a search box for the parent site. We run a school PTO site, I would like to add a button that allows visitors to the PTO site to search the school site.

Can your code be easily modified to accomplish this objective?


Viral said...

Thanks a lot for this code. It is very useful.

Ronssel said...

Thanks i already put this code on :D

SuPaMaN said...

Hey thanks for the code, it comes up but when I try using the search it takes me to a page that says "bad code". Any suggestions?

The Bergans said...

My friend referred me to this site. I love it! I have been able to do really cool things to my blog because of this site. I'm so excited! My family will be so impressed.
Thanks alot!

taichee~@! said...

Thanks Bizwhiz~@!

You make it a piece of cake for me

waqas said...

this is a good techniquue to use add a serch box

immortal said...

Super... I have added to my blog and testing...

Next stop is how to add message box...

Delighted Scribbler said...

Exactly what I was looking for. Thanks!

Lisalicious said...

I used this and the 1st time search is good, but the second time it gives me error :(

Mohammad Mustafa Ahmedzai said...

Your are the best teacher I have ever seen!!!

Nice tips, successful posts, Awesome explanation!!!

Keep it up!!!!