Add Custom Search box to navigation/menu bar

This tutorial will show you how to add a Google Custom Search box to horizontal navigation bar, just like what you see here in Blogger Sentral. (Google Custom Search enables you to search within a collection of blogs or websites of your choice).

google custom search on navigation bar

 

Step 1. Create your custom search engine

For the custom search to work you need a Google custom search engine to go with the search box. Follow the steps below to create one.

Note: This tutorial is not applicable to Search Box gadget added via Design > Page Elements.

  1. Go to Google Custom Search to create a custom search engine.
  2. If your are an Adsense publisher you can also use Adsense for search
  3. Configure the search engine and get the code for the search box.
  4. Look for the search engine unique ID in the code. It should look something like this: 006442829066104501157:setkk2xdqoi or this: partner-pub-4409159435154980:sle4z0smh1f

    We are only interested in this ID, the rest of the code is of no use.

 

Step 2. Create the search box

This is the code for the search box:

<!-- Google custom search box Start -by BloggerSentral.com -->
<div class='cse' style='color:#000000;float:right;margin:6px 10px 0 0 ;'>
<form action='http://www.google.com/cse' id='cse-search-box'>
<input name='cx' type='hidden' value='partner-pub-4409159435154980:sle4z0smh1f'/>
<input type='text' name='q' size='35' />
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>
</div>
<!-- Google custom search box End -->

Mar. 2011: Code updated to include Google Custom Search logo and search button.
Dec. 2010: Code update.

  1. Replace the value of value attribute in line 4 with the Search engine unique ID from Step 1.3.
  2. To make the search results appear in a new window, just add target="_blank" before the closing bracket in line 3.
  3. You can modify the search text box width by changing the value of size attribute in line 5.

 

Step 3. Add search box to navigation bar

The steps below will place the search box on the right hand side of the bar.

  1. Login to your Blogger account.
  2. Go to Dashboard > Design > Edit HTML.
  3. Back up your template.
  4. Tick the  Expand Widget Templates check box on top right of the HTML window.
  5. If your navigation bar is made of Pages gadget, look for this code:
    <b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
    <b:includable id='main'>
    <b:if cond='data:title'><h2><data:title/></h2></b:if>
    <div class='widget-content'>
    <ul>
    PUT THE SEARCH BOX CODE HERE
    <b:loop values='data:links' var='link'>
  6. Insert the search box code from Step 2 right after the <ul> line.
  7. If your navigation bar is made of a LinkList gadget, look for LinkList (instead of PageList) in line 1.

    If you created your navigation bar using Blogger Sentral’s Creating navigation or menu tabs in Blogger tutorial, just add the search box code right after <div id="navibar"> line of the navigation tabs code.

  8. Preview before saving.

Enjoy!

130 comments to "Add Custom Search box to navigation/menu bar"

Anup@Hack Tutors June 23, 2010 at 10:20 AM    

Can I use blogger default search box in the navigation bar? Recently I have place my search in the top right sidebar. How can I place that on the top right navigation?

Greenlava June 24, 2010 at 12:20 PM    

@Anup@Hack Tutors
You need to create one using the given link. Besides it's easy and you will have more control over your search results.

Timepass Guru June 25, 2010 at 2:42 AM    

hi
recently i started blog
my blog has no google adsense.........
i like to keep Google custom search for searching
how to insert this option in my blog

Greenlava June 25, 2010 at 2:38 PM    

@Timepass Guru
Use the link in Step 1.1 to create it.

Animesh July 1, 2010 at 3:40 PM    

HI,

AFter lots of search I got your post.. first of all thanks to you.

I have added search box in my blog http://www.smsinhindi.com/

There is a problem, the tab background below the search box is missing.. can you please fix this error.

thanks

Greenlava July 1, 2010 at 8:29 PM    

@Animesh
Move the [ul] tag from after the search box code to before it. Pls reread the post, I've updated it.

Animesh July 2, 2010 at 12:36 PM    

Thanks Greenlava,

Now error has been fixed.

TechCrazy July 3, 2010 at 9:45 PM    

Your site is really helpful. Thanks a lot!

Maria Ulfah July 7, 2010 at 8:38 PM    

Thank's, it's works on my blogger, hard to find google custom search engine.

I appreciate your hardwork dude!

Greenlava July 9, 2010 at 5:22 AM    

@The Pioneer
@imarvic
My pleasure

Anonymous,  July 16, 2010 at 2:04 AM    

Your post has really helpd a lot, thanks thanks thanks!

Gumbo News July 21, 2010 at 1:48 PM    

Great tips
I have a problem. My search box appears in the Navigation/Menu Bar but it's over the home button. How do I move it to the right?

Greenlava July 21, 2010 at 8:20 PM    

@Gumbo News
What's your blog url?

Surya Kasturi July 21, 2010 at 9:58 PM    

finally got it!
but can you tell me how to style it in such a way that it looks just like the other tab buttons ( color& shape.
the one you gave does not suit my blog.

Surya Kasturi July 21, 2010 at 10:44 PM    

the search results are showing up in black color.
how can i make it into default blue

Greenlava July 21, 2010 at 11:10 PM    

@spk
I think you've inadvertantly chosen Minimalist style for your custom search.
Go to custom search Control Panel > Look and Feel and select Default style.

Nicko Gibson July 27, 2010 at 2:14 AM    

Another great tutorial.
Added this to my blog also. Thanx a bunch

Greenlava July 27, 2010 at 12:20 PM    

@I like Kung-Fu Movies!
Thanks. The search box and floating buttons look great!

India Online shopping August 7, 2010 at 4:28 PM    

Today, I removed only type and hit search and now it is showing image of Google customer search. It is looking much better now.. just give it a try.


Thanks.

Anonymous,  August 22, 2010 at 9:24 PM    

my custom search bar which i got from google custom search doesnt give result similar to the results which are given by your blog's search bar ...what should i do? i want results being displayed similar to the results i got in your search bar.......help me..

Greenlava August 23, 2010 at 4:50 PM    

@thandapayal
You need to create the search box here: Google Custom Search, as explained at the beginning of this tutorial.

Stacy,  August 29, 2010 at 1:16 AM    

I know I don't have a link list as the header, does that mean it's pages? I have just a regular header. Will this work if I take out the original navi bar? Which code lines should I be looking for if a I'm not using any gadgets?

Greenlava August 29, 2010 at 12:46 PM    

@Stacy
I need to see your blog. What is your blog url?

Anonymous,  September 6, 2010 at 5:03 PM    

At which place should I add target="_blank" exactly.... tell me exactly...i added this as you said above..but results doesn't appear in new window...

Greenlava September 6, 2010 at 6:06 PM    

@d
1. Enter this: http://ramasamydemo.blogspot.com/
2. Add target blank, like this:
[form action='http://www.google.com/cse' id='cse-search-box' target="_blank"]

Anonymous,  September 6, 2010 at 10:02 PM    

GreenLava,

When I place URL in google custom search as http://ramasamydemo.blogspot.com/ the search bar in my blog doesn't give results as the results I get in your blog's search bar... But, when i place URL as http://ramasamydemo.blogspot.com/* the results are displayed as in your blog...should i place just the URL or the URL ending with a star?

Anonymous,  September 7, 2010 at 7:18 PM    

Hi,

Don't think I'm asking you so many doubts...I have added the buttonless search bar in my blog. it gives result to query words which are in English...But my blog is in tamil language...when i type some query words in tamil language the search bar which is newly added in my blog doesnt give any results...it shows only error message... my blog is http://ramasamydemo.blogspot.com/

Greenlava September 8, 2010 at 12:40 PM    

@d
If adding the asterisk works, I guess you should go ahead with that.

Greenlava September 8, 2010 at 1:18 PM    

@d
You can set the language in the search engine Control panel > Basics > Language Settings.

Nikki Lane September 9, 2010 at 1:15 AM    

Hey, first off, you're site has been a HUGE help for setting up my blog. You're a God send!

Now for my problem. lol I did everything as listed but when I do my search, no results come up. I've tried setting the URL with and without the "*" and still nothing. Is it because I don't have enough up on my page or am i doing something wrong. Thanks for any help.

Here's the blog:
http://thecouponchic.blogspot.com/

Thanks!!!

Greenlava September 9, 2010 at 1:47 PM    

@Nikki Lane
Your site has not been indexed by Google yet. Enter this to check your indexed pages.
Right now you have none indexed. Add some more contents and wait a week or two.

Anonymous,  September 9, 2010 at 10:48 PM    

@GreenLava

//Your site has not been indexed by Google yet//---> you have said this in the previous comment to some person. Shall I know what does this mean?

Greenlava September 11, 2010 at 7:50 PM    

@d
It means a site is not included in Google database yet.
When you search for something on Google, it doesn't actually search the internet, it just look for it in Google database. A site that's not in the database is as good as non-existent (to Google).

eszol raar September 18, 2010 at 3:40 PM    

niceee

Raine Snow October 5, 2010 at 9:02 PM    

the google search which I created was only to search my facebook, twitter and my website. However, it's searching just like a regular google search...the entire web. Why is this?

"searches sites including: http://www.facebook.com/pages/E..., http://twitter.com/etownhockey, http://www.etownhockey.com/"

that's what I chose as my options for it to search...yet...?

Greenlava October 6, 2010 at 1:22 AM    

@Raine Snow
Works fine from here.
I searched "bunny" and all I got were Snow Bunnies, from etownhockey.com :)

C,  October 11, 2010 at 3:19 AM    

hi,

If my navigation bar is made of a multi level CSS dropdown menu instead of Blogger Sentral’s Creating navigation or menu tabs.
- where can i put the code?
- how to show the results within my page?

thanks!

Greenlava October 11, 2010 at 5:50 PM    

@C
The easiest way to show results within your page is by using Search Box gadget (via Design > Page Elements > Add a Gadget).
But as mentioned, you can't add this search box to navigation bar using method explained in this tutorial.

Elizabeth Davis Photography Blog October 15, 2010 at 1:54 AM    

Hi there. My blog is http://elizabethdavisphoto.blogspot.com. i went through the tutorial and had a quick question. The part of the code with the ID that google produced for me looks like this:


var customSearchControl = new google.search.CustomSearchControl('001215673686605275069:ozplk7bibdq');


So, since there was no "partner-pub", I'm not sure what to put into the buttonless code you provided. Any direction you might offer would be great. Thanks!

Greenlava October 16, 2010 at 2:40 PM    

@Elizabeth Davis Photography Blog
001215673686605275069:ozplk7bibdq is your ID.

Unknown November 13, 2010 at 4:22 PM    

I need it to be on my link list.. what to do...

Greenlava November 13, 2010 at 7:31 PM    

@Vish.. .
Explained in step 3.7

Gina November 15, 2010 at 7:45 AM    

I would be happy with just a plain search box, but when I try to add one it says I already have one, which isn't true. How can I correct this mistake?

Gina November 15, 2010 at 9:22 PM    

GL, Please forget my previous question. I have found the search box -- it was tiny and buried.

Thank you for everything you do!

Gina

Gee November 25, 2010 at 10:30 AM    

Hi GL, i follow yr steps but the search box didnt appear at all in my blog - http://dearcats.blogspot.com Is it because i already have search box widget? Shall i delete it? i really want it to be appeared on the navbar. Kindly assist. Thanks

Anonymous,  November 25, 2010 at 5:40 PM    

I inserted the code in html but the blogger says;
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Element type "form" must be followed by either attribute specifications, ">" or "/>".
How can i fix this? thanks

Greenlava November 25, 2010 at 6:17 PM    

@DearCats
Place the code in step 2 right after this line:
[ul id='top-navi']
once you've got the search box to show up, you can then replace the search engine unique ID with yours.

Greenlava November 25, 2010 at 6:22 PM    

@TWINFINGERS advertising
It looks like you left out code line 7 (or a part of it).
Make sure you copy the code in full.

Admin AEC Model Club November 26, 2010 at 7:29 PM    

Hi,

Thx and congralutations Greenlava for your community work.
How did you do to display the search results directly on the page of your blog?
Thx in advance

Regards

Greenlava November 26, 2010 at 9:55 PM    

@Admin AEC Model Club
You're welcome.
I'll make a tutorial on that...coming soon.

Anonymous,  November 30, 2010 at 7:16 AM    

great, thank you very much for you wonderful help. I am now able to add search bar on my website. thank you again for all the detail and steps.

Gee December 1, 2010 at 11:27 AM    

TQ so much Greenlava!. Luv yr tutorial n appreciate yr helps!.. i did it! tq! tq!

Greenlava December 3, 2010 at 12:43 AM    

@DearCats
Hmm...I forgot to include a slash "/" before the input tag closing brackets.
] should've been /]
Harap-harap menjadi kali ni :)

Starr December 4, 2010 at 11:37 AM    

I've been trying to figure out how to do this for the longest time! I put it in on my blog, but when I type a search, all I get is a message that says:

"Bad Request. Your client has issued a malformed or illegal request. "

What am I doing wrong?

Greenlava December 4, 2010 at 7:37 PM    

@Starr
You did nothing wrong.
I made a mistake when I updated the code (step 5). Anyway I fixed it.
Please recopy the code.

@DearCats
You need to recopy the code too.

Unknown December 6, 2010 at 2:10 AM    

@Greenlava

So i implemented the code correctly and it works, but I want the search results to display on a blogger page named Search Results, so it has the same formatting and outline, and looks nicer. How do i do this?

The link i want the search results on is...
http://www.pinkbeautybliss.com/p/search-results_3828.html

Also currently this page has the HTML code for the google engine search results that google adsense gives you when you customize it...should i delete that HTML?

Greenlava December 6, 2010 at 11:44 PM    

@Katie
A tutorial on that is coming soon.

Gee December 10, 2010 at 5:25 PM    

GL, superb! menjadi kali ni :) tq daun keladi!

Unknown January 25, 2011 at 5:20 AM    

I have added this to my blog but I get an error when i try to search for anything. Any idea why this happens? I used this as my Google ID
value='partner-pub-000316104134619160103:duig5ih4ils'

Is this wrong? I am really lost here :/

Greenlava January 25, 2011 at 7:44 PM    

@Vapor Nation
It must be the ID that's causing this.
I've tested your ID in my search box, it gave same error. Then I used my ID in your search box, the results (Blogger Sentral's) came out fine.
So it must be the ID. The rest of the code is no problem.

Unknown January 26, 2011 at 4:07 AM    

@Greenlava
Thank you for the quick reply. I have solved the problem, now my only problem is the formatting of the search results page. How can I make it blend into my site and search more of my site so in essence it acts like the search bar gadget offered?

Greenlava January 26, 2011 at 9:10 PM    

@Vapor Nation
You can change the appearance of your search results in Google Custom Search > Look and Feel.
As for your Search results page, read Apply different layout/styling to static pages.

Unknown January 27, 2011 at 8:31 AM    

@Greenlava
I did not make this a static page because this would show up in the top navigation, so i cannot customize the static page. This is a post page. Is there a way to hide pages from showing up in the navigation? If so then i will follow the static page change URL, but if not I need help because I have gone to the Look & Feel section but could not change the width of the results from bleeding over into the sidebar

Greenlava January 27, 2011 at 2:05 PM    

@Vapor Nation
1. You can opt not to display a page tab in Design > Page Elements > Pages.
2. To change the search results width, add this CSS snippet on top of the search results page code:
[style type="text/css"]
#cse-search-results iframe {width: 600px;}
[/style]

Unknown January 28, 2011 at 3:47 AM    

@Greenlava
Thank you so much for your help and response. I have switched the search results from a post to a page. I have tried to insert the CSS snippet into the page HTML but it did not work, it just showed the code on the search results page. I then tried to insert it into the buttonless code section and again it did not work, it only showed the code in the navigation bar. What am i doing wrong and whee exactly should I place the code? Do I need to remove the brackets? Thanks for the help! One more thing, how can I remove the blue background from the search results?

Greenlava January 29, 2011 at 1:37 AM    

@Vapor Nation
You were supposed to change [ with < and ] with > when applying the code.
To change the search results background color, go to Look and Feel, click the Results tab and change the background color (on your right).

Unknown February 1, 2011 at 3:59 AM    

@GreenLava
Thank you for the help with the look and feel section. i am still having trouble with the code and inserting it into the search results page. i have changed the with < and ] with > but it still is not working properly...

I appreciate your help!

Greenlava February 1, 2011 at 4:18 PM    

@Vapor Nation
Make sure you enter the code while on HTML mode, not Compose mode.

Unknown February 2, 2011 at 1:30 AM    

@GreenLava
Wow I feel stupid haha You guys are the best! I truly appreciate your help and timely responses!

Anonymous,  February 3, 2011 at 7:19 PM    

Why the search result cannot be scrolled?
Just check www.safetydo.com

Greenlava February 4, 2011 at 10:10 AM    

@Nur Amin
Why need scrolling? I can see all ten results (in a page) already.

Catherine February 12, 2011 at 12:27 PM    

Hi,
Nice blog you got here! I tried your instructions on adding a search box on the navigation bar. I got the code from my Adsense account for an Adsense for Search box and inserted it into the code after the [ul] like it says to. I am using a page gadget and my code looks identical to what you have posted here. When I posted it, the search box came out above the page tabs and not to the right of them. The Google Custom Search Logo is not to the right of the search bar like I specified but is underneath the search bar. Tried justifying right in a CSS but that only moved the search bar to the right and it is still higher than the buttons. Been trying to figure this out for a few hours now. I can't believe it's this difficult. Do you have any suggestions? Thanks very much, Catherine

admin_TOL February 13, 2011 at 1:49 AM    

Hi GL,

Good information. I was able to put the search box in my site however I could not control the bottom margin of my tab and I could not figure out how to solve it. I intend to have the top margin and bottom margin to be the same. Do you know how to fix this?

my site is www.mmainsideout.com

Thanks and more power

Greenlava February 13, 2011 at 2:15 PM    

@Beatdown
Problem only in IE right?
Try adding height to the search box:
[div class='cse' style='color:#000000;float:right;margin:4px 2px 4px 0; height:24px;']

admin_TOL February 13, 2011 at 11:54 PM    

Hi GL,

Thanks for the quick response. Yes the problem seems to appear only in IE. but for chrome and firefox it works fine. I tried your suggestion and it worked! Thank you for your help. More power to you.

Anonymous,  February 22, 2011 at 7:40 PM    

What if I don't want the search bar to be buttonless?

Greenlava February 22, 2011 at 11:07 PM    

@Anonymous
To add search button, insert this line after code line 6:
[input type="submit" name="sa" value="Search" /]

Anonymous,  February 23, 2011 at 2:17 PM    

Ahh, thank you very much.

Anonymous,  February 23, 2011 at 7:34 PM    

Just curious, but is there any way to change the size of the search bar? and is it possible to change the appearance of the search button (the part I added after line 6) to look like the customization settings that google allows you to add to their search button?

Greenlava February 25, 2011 at 1:35 AM    

@Anonymous
1. Size -change the value in "size='35'" in line 5.
2. One way of changing the appearance of the button is by adding a style attribute in the input tag:

[input style='background-color:gold; border:1px solid gray;' type="submit" name="sa" value="Search" /]

you can add just about any CSS code in the style attribute.
(Google uses ""border-radius to create rounded corners and "box-shadow" for the shadow effect)

Expansion Technology February 27, 2011 at 4:23 AM    

I had the same problem.
My Search Box did not work for several weeks, it happened after I changed the web address.
To make the story short, I got it to work by setting the "Post Date and Time" to Automatic.

Check out my blog:
http://expansionvideos.blogspot.com

Here are the steps:

*Go to Edit,
*Select Edit (selecting one Post first)
*then CLick "Post Options"
*Under Post Date and Time you have select Authomatc, then CLICK Publish post.

NOTE:
You have to do this to all of your Posts, do it one by one. And this should fix the problem.

Check out my blog:
http://expansionvideos.blogspot.com

Syeikh Azzikri March 13, 2011 at 9:30 AM    

Hi Greenlava,

I'm your bigest fan. Thanks for the tutorial. I'm having problem to add the code. Please help me. I used custom template created with Artisteer. Below are my template code and where should i place the custom search engine code.

b:section class='art-nav' id='navsection' maxwidgets='1' showaddelement='no'
b:widget id='LinkList99' locked='true' title='Top Menu' type='LinkList'
b:includable id='main'
div class='l'/
div class='r'/
ul class='art-menu'
script type='text/javascript'
b:loop values='data:links' var='link'
menuitems.push(new Array('data:link.name/','data:link.target/'));
/b:loop
artDisplayTopMenu(menuitems);
/script
/ul
/b:includable
/b:widget
/b:section

Thanks for your help.

Greenlava March 14, 2011 at 1:53 AM    

@Syeikh Azzikri
Assalamualaikum,
Place it under this line:
ul class='art-menu'

SMS March 24, 2011 at 1:22 AM    

AssalamoAlekum,
Thanks for the great post I was looking for this.

My navigation bar is made of HTML/Javascript gadget & widget id is HTML3, where should I place custom search box code?

Greenlava March 24, 2011 at 2:58 AM    

@SMS
Place it after [ul] tag.

SMS March 29, 2011 at 2:18 AM    

Assalam0Alekum,

Thanks for updating the code.

It has an error: when I click "save template" it says...
'Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "lang" must end with the ';' delimiter.'

I added this ; sign after lang than this error shows up 'XML error message: The entity "lang" was referenced, but not declared.'

I don't know what is wrong,
When I remove line 9 it works fine.

Greenlava March 29, 2011 at 10:47 AM    

@SMS
Wa'alaikumussalam
Thank for pointing this out.
I forgot to escape the ampersand (&) before "lang".
I've fixed the code. Check it out.

SMS March 29, 2011 at 11:41 AM    

Thanks for quick response Greenlava,

Yeah now it's working fine.

Can you make a tutorial on how to make blogger templates fixed width? I'm using blogger watermark template & I want it fixed width. Or give us a link which describes this topic.
& thanks for being so nyc.

defencedog April 2, 2011 at 4:18 AM    

Works great on my blog, can you link this with google analytics

SMS April 3, 2011 at 2:16 AM    

AOA,

Waiting for the tutorial you mentioned on comment number 51.

Greenlava April 3, 2011 at 7:16 PM    

@SMS
Display Custom Search results on a separate page

SMS April 4, 2011 at 1:03 AM    

Thanks alot Greenlava,

Xinmei @ Pudding Pie Lane April 21, 2011 at 6:49 AM    

Hi Greenlava, thanks for the code, it's really helpful!
I've got the search box up, but it's displayed above the 'Home' button on my page, but I want it to the right on the blue pages bit. Can you please let me know how I can modify the coding to do that?

Thanks :)

my blog url: http://puddingpielane.blogspot.com

Greenlava April 21, 2011 at 7:54 PM    

@Xinmei @ Pudding Pie Lane
It worked fine when I tested it on your blog's source code.
Just make sure you insert the search box code right after the < ul> tag.

Xinmei @ Pudding Pie Lane April 26, 2011 at 4:58 PM    

Oh, thanks, I was just wondering how I could put a normal (not google custom search box) over there, like the search box I've got now? I've copy and pasted the code for my search box after [ul], but it goes ontop of the home button.

Greenlava April 29, 2011 at 9:25 AM    

@Xinmei @ Pudding Pie Lane
You've used a different code? That won't be a problem as long as you wrap it in the div tag (code line 2 and 10).

Xinmei @ Pudding Pie Lane April 30, 2011 at 8:17 AM    

Aha fantastic - thanks so much! :) This is really helpful, I'll pass on this info and your page on to my friends :)

Guest,  May 5, 2011 at 7:57 AM    

OR, you could try this instead (on the same position as on the post, just between

[ul]
PUT THE SEARCH BOX CODE HERE
[b:loop values='data:links' var='link']

The code:

[!-- Free-Moovies custom search box End Start--]
[div class='cse' style='color:#BBB;background:#282828;float:right;margin:6px 10px 0 0 ;-moz-border-radius:7px;-khtml-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;overflow:hidden']
[form action='/search' id='searchform']
[input id='s' name='q' onblur='if (this.value == "") {this.value = "Search";}' onfocus='if (this.value == "Search") {this.value = "";}' style='background:none;color:#BBB;border:0;padding:4px;margin:1px 0 0 1px;float:left' type='text' value='Search'/]
[input class='search-image' src='http://1.bp.blogspot.com/-bHTuwSrkBwA/TbgbIHi24yI/AAAAAAAAFOg/DO5pk720IMw/s1600/search.png' style='border:0;vertical-align:top;float:right;margin:4px 4px 0 2px' title='Search' type='image'/]
[/form]
[/div]
[!-- Free-Moovies custom search box End --]

Just replace [ and ] with < and >

Guest,  May 15, 2011 at 3:40 PM    

Actually the last one posted is beautiful, more efficient and easy for your visitors, you just have to adjust the colors to fit your blog (as its scheme is dark/gray) and you're set to go! Thanks fellow 'Guest', you've made my day!

Vivek June 4, 2011 at 6:09 PM    

thanx.

healthybeautifulblog.blogspot.com June 15, 2011 at 12:52 PM    

Thanks so much for sharing this! It works. Keep up the good job.

Unknown July 15, 2011 at 6:33 AM    

Love it, another great mod! Works fantastic in FF, but for some reason it doubled the height of my navbar in IE8. Any ideas?

http://ReverseWineSnob.com

Unknown July 15, 2011 at 6:36 AM    

Scratch that last question, just saw your earlier comment which fixed it. Thanks!

April July 18, 2011 at 3:44 AM    

I keep trying to add this to my blog but all I get is this after I add the code and click preview: "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute "{1}" associated with an element type "target".

Error 500"

Help ?!

April July 18, 2011 at 4:14 AM    

Okay, sorry I just fixed the error but I now have another problem. The search bar is right above the pages tab when I want it to be alongside them. When I searched my code to see where the (ul) was it did not have it, only this: "(b:widget id='PageList1' locked='false' title='' type='PageList')
(b:includable id='main')
(b:if cond='data:title')(h2)(data:title/)(/h2)(/b:if)
(div class='widget-content')
(b:if cond='data:mobile')
(select expr:id='data:widget.instanceId + "_select"')
(b:loop values='data:links' var='link')
(b:if cond='data:link.isCurrentPage'>
<option expr:value='data:link.href' selected='selected')"
Could you please help ?
Thank you so much.

Greenlava July 20, 2011 at 12:29 PM    

@April
The code portion you posted above is actually a new addition to Pages gadget (it's for mobile template). The original code (with ul) is further down. Scroll down your code and you'll find it.

Meghan @ Books and a Cup of Tea October 13, 2011 at 1:07 PM    

I do not have a [ul] tag anywhere, I only have
[b:section class='art-nav' id='navsection' maxwidgets='1' showaddelement='no']
[b:widget id='PageList98' locked='false' title='Pages' type='PageList'/]
[/b:section]

I put the search bar below this code and it worked fine, but it shows up below the navigation and it leaves this white space. Can you take a look at my code and tell me what I did wrong? I tried placing the code a couple different spots, but it didn't work out. Thank you so much :).

Blog: http://bookstealayouttester.blogspot.com/

Meghan @ Books and a Cup of Tea October 14, 2011 at 7:01 AM    

Nevermind, I have changed my template and everything and now it works perfectly. Thank you so much!

Kutha Ardana January 16, 2012 at 5:24 PM    

Hi Greenlava,
Thanks for the nice tutorial. I've implemented the instructions and it works. However I want the search results to display on the top of my own page, the same as results got from Google custom search box. I use the two column, Expresso style. Currently I put the gadget at the bottom of the side bar. How can I do this? Thank you.

My blog, http://blog.kuthaardana.com

Blogger Templates January 23, 2012 at 7:50 PM    

Great tutorial, Greenlava!
I will try this soon.

Unknown April 14, 2012 at 5:58 PM    

i have 1 question...
i have linked multiple blogs together... and when i use search, it brings only results for the page that i am currently on!
Help me please!

Liyana April 14, 2012 at 11:26 PM    

Great help, thanks!

Greenlava April 16, 2012 at 10:56 AM    

@Ashik Bholah
Have you added the blogs into your custom search engines?

Unknown April 22, 2012 at 2:15 PM    

thanx man..

KVM Switches May 7, 2012 at 4:25 PM    

Very comprehensive article and definitely an interesting read and defiantly I will use this on my upcoming project. I just hope that you don’t lose your style because you’re definitely one of the coolest bloggers out there. Please keep it up because the internet needs someone like you spreading the word.

Ravanel June 6, 2012 at 6:00 PM    

Yay, thanks for the nice tutorial. I'm really happy with my search box and it works great. The only thing is that the results are unreadable: somehow both text and background colour are of the same colour. Do you have any information about changing the search result layout? I've searched, but wasn't able to find any source for this. For reference: my blog is found on ravalation.blogspot.com.

Not sure if you are reading these comments still and if you'd like to help, but it would be great. Thanks!

Ravanel

Greenlava June 9, 2012 at 2:35 PM    

@Ravanel
You are using CustomSearch gadget, which is different from the Custom Search element discussed in this tutorial.
You can't change the layout for CustomSearch gadget, but you can change the color. Try adding this CSS snippet in Template > Customize > Advanced > Add CSS:

.gs-title, .gs-snippet, .gs-visibleUrl {color:white !important;}

it should color the search text white.

mahmud June 11, 2012 at 12:42 AM    

I am not so much good in coding. it is hard for me to find the place where to paste the codes. but still i like your post.

Dvolatility June 30, 2012 at 12:01 PM    

Hi, thanks so much for teaching me how to add the search widget to the page bar. Now I'm trying to put a button to the right of the search bar, but it automatically goes to the left of it. I put the button code directly below the search code. Should I add another to that code? Thanks. http://www.distressedvolatility.com.

Dvolatility June 30, 2012 at 12:40 PM    

Hi, I think I figured it out! Thanks for your help here.

Emelie September 9, 2012 at 8:05 PM    

Thank you so much for this! I managed to tweak it all to match my blog. It looks lovely and works a charm.

Hammad September 24, 2012 at 8:14 AM    

It works perfectly.Can you help me please that How Can I add other site If I want to add more than one blog as search source !!

Sectio Aurea September 25, 2012 at 3:22 AM    

Works great with Blogger's "Simple" theme, thanks.

I like to add these attributes:

align='right' style='padding:5px'

to the div tag in the Google-provided search box code, to place it better in the theme.

Greenlava September 27, 2012 at 1:15 PM    

@Hammad
You can add it via your search engine's Control panel > Sites.

Web Design October 8, 2012 at 7:47 PM    

Amazing tips to add search box in navigation bar...!1

amor November 24, 2012 at 8:22 AM    

Hello, great tutorial but I can't find 'ul' in my blogger template. I tried inserting the code under this:

[b:widget id='PageList1' locked='false' title='Pages' type='PageList'/]
[/b:section]

But it only resulted to error. Is there any way to insert the code other than after the 'ul'? Thanks in advance.

Greenlava November 24, 2012 at 1:56 PM    

@amor
Have you checked the "Expand Widget Templates" checkbox?

amor November 25, 2012 at 9:42 PM    

^Thanks! Finally found it.

Jacqueline April 7, 2013 at 11:03 PM    

You're a genius, Greenlava! I had always wondered how to have a CS box to the right of my pagelist bar and you've made that possible with this awesome tutorial. Thank you so much for sharing your expertise. God bless you!!

Vasant Sakpal October 25, 2013 at 3:08 PM    

Very nice article and very well explain step by step. it works for me.
Thanks