badge How to Install Google Ajax Search Widget [Web 2.0] - ProBlogBooster

How to Install Google Ajax Search Widget [Web 2.0]

When you search any content in this ProBlogBooster, the result is quickly gets displayed on the same page without any change of other content and in quick seconds. Lots of readers asked me about it along with detailed information to implement this on site. Learn how to install lightweight Google search widget for your site to find content easily to your readers

Google Search Widget
Google Search Widget
Last time we have seen meta tag generator for easy use. Today we are going next step in Google gadgets to find out ajax and its usability with respect to web content through search gadget. So here in this post, each and every step is discussed in detail along with images. This is one of the best blogging tip about Ajax application which will introduces you ajax power, and you will get why the ajax getting more popularity in today's days.

Google Ajax Search Widget For Blogger

Its very simple to implement in your site but included lengthy and tricky steps, so I request you to read and follow each step carefully.
2. ‘Custom Search Element’ page will show on screen. Select theme for your search engine look as "Espresso" (you may change as you want).Google Ajax Search Widget For BloggerScreenshot1 
3. Select in ‘Configure’ option to ‘Use an existing custom search engine’ and then click on ‘Select CSE’. Google Ajax Search Widget For BloggerScreenshot14. click on 'Create a new search engine', here you may have to logged into Google Account, since its your own search engine and for your unique ID.
Google Ajax Search Widget For Blogger25. Type search engine name as 'Search'.

6. Type search engine description as 'Search'.

7. In 'What do you want to search?', select 'The entire web, but emphasize sites I select.'

8. In Sites to search box put your own blog url( Ajax Search Widget For Blogger222

9. Select an edition, off-course!! select as 'Standard edition - Free'.Google Ajax Search Widget For Blogger323

10. Accept the 'Terms of Service'. And click on 'Next'.

11. Tick the box for Send confirmation email to your mail ID and click on 'finish'.

12. Now you will see a new window of 'My search engines' and in the topic of 'Search engines I've created' you will see your created search engine.Google Ajax Search Widget For Blogger333

13. Click on 'control panel' will see 'Basic information' with your 'Search engine unique ID:your-own-ID'Google Ajax Search Widget For Blogger4444

14. You can select 'Preferences' as per your requirements. And then 'save changes'.Google Ajax Search Widget For Blogger555

15. On left hand 'control panel' Look for 'Look and feel shown', click on it.Google Ajax Search Widget For Blogger666

16. Choose a hosting option as 'Search Element'.Google Ajax Search Widget For Blogger99

17. Choose layout for search element 'Two Column'.Google Ajax Search Widget For Blogger777
18. Choose customize a style as 'Espresso'. (Here you can customize the font-size, font-color for your template matching).Google Ajax Search Widget For Blogger88
19. At last click on 'save' and then 'Get code'.Google Ajax Search Widget For Blogger1010

20. Now we have the two types code section;Google Ajax Search Widget For Blogger1111

a. In upper-window the code is to be paste in the page where you'd like the search box to appear.
b. In down-window the code is to be paste in the page where you'd like the search results to appear.

21. Now the 1st code is the Search Widget Code, that can be copy and pasted as html widget. For this go to Layout, page element, add widget, give title as search, and paste the code.

22. Now the important part is the second code, this code goes into your html template code. For this go to Layout, Edit HTML.
Now find for,
<div id='main-wrapper'>
23. Now paste the second code below <div id='main-wrapper'> code,as shown:Google Ajax Search Widget For Blogger1212

24. Now save template.

25. Check the widget on your blog-site.


1. In this widget you can insert your own adsense adds (with publisher's ID) easily.
2. Automatically search own site as well as on web.
3. Very fast than ordinary search engine.
4. No need to refresh the whole page to search.

For Demo see right side of this site, and check the behaviour of the this widget.