Google has well-documented guide for AJAX Search API at http://code.google.com/apis/ajaxsearch/documentation/. If you are interested in Google AJAX Search API, you can always go there and read it up. Here explain you how to add the Google AJAX Search feature exactly as in my blog - no more, no less.
I added a small feature into Google AJAX Search. If you clicked on the hyper-link just now, you'll notice that no new window was opened to display the search results. Instead, the clicked link appeared in the Google AJAX search box above with the result sections stacked atop of each other. You can open up the closed sections and see the results.
The first thing you need to do is to sign up to sign up for a Google API key at http://code.google.com/apis/ajaxsearch/signup.html. Copy the key and save it in a text file for future use.
Now in Blogger Dashboard, go to "Page Elements" (Template -> Page Elements) and create a "HTML/JavaScript" widget. Write something meaningful in the title and content so that when you go to "Edit HTML" (Template -> Edit HTML), the location of the widget is easily identified.
Switch to "Edit HTML" mode (Template -> Edit HTML). You have to add "<link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet' type='text/css'/>" into the anywhere in-between <head> </head>. I recommend you to past it just below below <head> or just above </head>.
It is time to edit your newly created widget. Your widget will be something like this.
<b:widget id='HTML1' locked='false' title='GSearch' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
In my blog, I have deleted -
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
and
<b:include name='quickedit'/>
from my widget. If you wish to do so, you can do that too. You can play around and see the difference of deleting and not deleting them.
After deleting, you will be left with -
<div class='widget-content'>
<data:content/>
</div>
Now replace "<data:content/>" with this code -
<div id='searchcontrol'>Loading .....</div>
<script src='http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAFVw3lX3cHLy0e4AwpzfzMBSXGN3x931nVT4J9oAxaqW1A-guqxS6dvU4EGG51sdz92P2g6brGsGpIg' type='text/javascript'/>
<script type='text/javascript'>
// Create a search control
var searchControl = new GSearchControl();
var controlRoot = document.getElementById("searchControl");
// create a searcher options object
// set up for open expansion mode
// load a searcher with these options
var options = new GsearcherOptions();
options.setExpandMode(GSearchControl.EXPAND_MODE_CLOSED);
// Web Search
searchControl.addSearcher(new GwebSearch(), options);
// News search
searchControl.addSearcher(new GnewsSearch(), options);
// Blog Search
blogSearch = new GblogSearch();
blogSearch.setUserDefinedLabel("Blogsphere");
searchControl.addSearcher(blogSearch, options);
//Site Search - www.wikipedia.com
siteSearch = new GwebSearch();
siteSearch.setSiteRestriction("http://en.wikipedia.org");
siteSearch.setUserDefinedLabel("Wikipedia");
searchControl.addSearcher(siteSearch, options);
//Site Search - finance.google.com
siteSearch = new GwebSearch();
siteSearch.setSiteRestriction("http://finance.google.com/finance");
siteSearch.setUserDefinedLabel("Google Finance");
searchControl.addSearcher(siteSearch, options);
//Site Search - medotblog.blogspot.com
siteSearch = new GwebSearch();
siteSearch.setSiteRestriction("http://medotblog.blogspot.com");
siteSearch.setUserDefinedLabel("This Blog");
searchControl.addSearcher(siteSearch, options);
// tell the searcher to draw itself and tell it where to attach
searchControl.draw(controlRoot);
function doSearch(x) {
searchControl.execute(x);
}
</script>
</div>
Don't forget to replace my API key with your own API key that you obtained in the first step. If you don't do that, invalid API key message will appear.
You also need to create JavaScript URL to enable "Link-search" feature. In my blog doSearch('term') method is called when a user click on a hyper-link.
To make the term "AJAX" a JavaScript URL, in Blogger "Edit HTML" mode of "Edit Posts", you have to add "<a href="javascript:doSearch('AJAX');">AJAX</a>" into the post. The example is here - AJAX. Look for the search result below.
Now time to test-drive your search feature. Have fun!
0 comments:
Post a Comment