How to Add Google AJAX Search to Your Blogger Beta Blog
Do you use Blogger Beta? Do you want to use the coolest new search widget on your site to replace the conventional search? Well look no further! This post will explain how to do just that.
This method will style your search control to be absolutely positioned in the upper right of your site. There are three main steps:
Step 1: Get a Google Ajax Search API Key
Click here to visit the Google Ajax Search API signup page. All you need to do is enter your web site's URL in the box at the bottom, check the box saying that you've read and agree with the terms and conditions, and click the "Generate API Key" button. You will receive a key that looks something like this:
Do not close this page! In the next step, you will need the key that you just generated.
Step 2: Create the Search Control
When you are logged into Blogger Beta, go to your blog's settings. You'll see three tabs: Posting, Settings, and Template. Click Template. There are 4 subsections under Template: Page Elements, Fonts and Colors, Edit HTML, and Pick New Template. Click Edit HTML. You will see your blog's template. Scroll almost to the bottom (see screenshot below for help) until you see
Replace
Now add a new line after
On that new line, paste this:
This screenshot shows what it should look like after you're finished, with the relevant parts circled in red.
Now scroll back to the very top of your template. At right about the 7th line of code in your template, you should see "
It should look like this when you're finished with that part:
Now you'll want to change a few things:
Step 3: Style your search control.
You're almost done! To position your search control in the upper right, scroll to where your template shows the style for your pages' body (see screenshot below for help). Look for:
You'll need to paste the following code into your template above the line "
It should look like this when you're done:
Finally, save your template. Click view blog and you should see the Google Ajax Search Control in the upper right! The search control will search only your site, and clicking a search result will open that page in the current window or tab. Now your website's visitors won't need to leave your page to search your site!
This method will style your search control to be absolutely positioned in the upper right of your site. There are three main steps:
- Get a Google Ajax Search API Key.
- Create the Search Control.
- Style your Search Control.
Step 1: Get a Google Ajax Search API Key
Click here to visit the Google Ajax Search API signup page. All you need to do is enter your web site's URL in the box at the bottom, check the box saying that you've read and agree with the terms and conditions, and click the "Generate API Key" button. You will receive a key that looks something like this:
Do not close this page! In the next step, you will need the key that you just generated.
Step 2: Create the Search Control
When you are logged into Blogger Beta, go to your blog's settings. You'll see three tabs: Posting, Settings, and Template. Click Template. There are 4 subsections under Template: Page Elements, Fonts and Colors, Edit HTML, and Pick New Template. Click Edit HTML. You will see your blog's template. Scroll almost to the bottom (see screenshot below for help) until you see
<body><div id='outer-wrapper'><div id='wrap2'>
Replace
<body> with <body onload='OnLoad();'>.Now add a new line after
<div id='outer-wrapper'><div id='wrap2'>On that new line, paste this:
<div id='searchcontrol' />This screenshot shows what it should look like after you're finished, with the relevant parts circled in red.
Now scroll back to the very top of your template. At right about the 7th line of code in your template, you should see "
<head>". See screenshot below for help. Enter a new blank line after <head>, and then copy and paste the following:
<link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet' type='text/css'/><script src='http://www.google.com/uds/api?file=uds.js&v=1.0&key=YourKeyGoesHere' type='text/javascript'/>
<script language='Javascript' type='text/javascript'>
//<![CDATA[
function OnLoad() {
var searchControl = new GSearchControl();var siteSearch = new GwebSearch();
siteSearch.setSiteRestriction("YourSiteGoesHere");
siteSearch.setUserDefinedLabel("YourLabelGoesHere");searchControl.addSearcher(siteSearch);
searchControl.setLinkTarget( GSearch.LINK_TARGET_SELF );
searchControl.draw(document.getElementById("searchcontrol"));
}
//]]>
</script>It should look like this when you're finished with that part:
Now you'll want to change a few things:
- First and most importantly, replace YourKeyGoesHere with your API Key. This is where you'll need to paste some of the code generated earlier (in step 1) when you signed up for the Google Ajax Search API Key.
- Replace YourSiteGoesHere with the name of your website (don't delete the quotes). I used cjmillisock.com
- Lastly, replace YourLabelGoesHere with a label for your search results (again, leave the quotes in the code). I used CJMillisock.com and you can see the results in this screenshot.
Step 3: Style your search control.
You're almost done! To position your search control in the upper right, scroll to where your template shows the style for your pages' body (see screenshot below for help). Look for:
body {
background:$bgcolor;
margin:0;
color:$textcolor;
You'll need to paste the following code into your template above the line "
body {":
#searchcontrol
{
position: absolute;
top: 5px;
right: 10px;
background: #FFF;
border-left: 1px solid #CCC;
border-bottom: 1px solid #CCC;
padding-left: 5px;
padding-bottom: 5px;
font: 10pt Verdana;
}
It should look like this when you're done:
Finally, save your template. Click view blog and you should see the Google Ajax Search Control in the upper right! The search control will search only your site, and clicking a search result will open that page in the current window or tab. Now your website's visitors won't need to leave your page to search your site!
Labels: google
posted by CJ at 10/15/2006 09:44:00 AM
9 Comments:
thanks for providing such detailed instructions
-markl
My pleasure Mark!
so you have switched to blogger beta? i really like its label system. do you know how to get a label cloud on a ftp-published blogger.beta?
I have switched to Blogger beta, and sorry but I don't know how to get a label cloud on an ftp-published blogger beta blog. Do you see anyone with one, or are you building one from scratch?
Nice guide. I also switched to Blogger beta, but I don't see much difference from the older version.
One thing that annoys me a bit is google's insistence of keeping me logged in for everything google. I mean, it is good for them but I would still like to search for stuff anonymously, and post to blogger at the same time without them keeping track of everything I do (you know, you loggin to blogger, and it automatically logs you in to gmail and once logged in it keeps track of your searches). Or maybe it's just me...
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 "v" must end with the ';' delimiter.
Hi,
I have a problem....
This is my template: surf80.110mb.com/itheme_3_col.rtf
This is my ajax search: http://surf80.110mb.com/search%20box.html
Your tutorial doesn't work for this one.,,,, anyone can help me?
Thankyou very much in avance
Hi,
I have a problem....
This is my template: surf80.110mb.com/itheme_3_col.rtf
This is my ajax search: http://surf80.110mb.com/search%20box.html
Your tutorial doesn't work for this one.,,,, anyone can help me?
Thankyou very much in avance
This post has been removed by the author.
Post a Comment
<< Home