Guide To Get Started With Google Custom Search API For A Website 2018 | Google Developers [Ajax Tool]

Programmatically Ajax based custom search API create & help to handle all the queries searched on your website. It shows quick search result on the same page with the help of linked Ajax CDN Jquery/JavaScript. When you search any content on ProBlogBooster, the result is immediately displayed on the same page without any change of other content and in quick seconds since it is completely integrated with the Google API loader. One of the best blogging tips; Adding Google Custom Search (JSON/Atom API) to Your Website - This Ajax based tool is much better than Python or Php Google search engine API code. It is a fully customized real-time search engine that not only integrates with your site but also your website design. Folks requested about it along with detailed information to integrate this Google search tool on site. They were asking: How to Create an API Key for Google Custom Search? Any quick way for adding Google Custom Search to Your Website? And how to fetch Google search results with the site search API? Learn how to install light-weight, fast loading, real-time Google search widget for your blog or website.
Google Search Widget
Google Search Widget
Last time we have seen Free Online Meta Tag Generator tool to create SEO optimized meta data for your site. Today we are working on advanced steps 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 & jQuery link Google application, it will introduce you Ajax power, and you will get why the Ajax getting more popularity in today's days.

Also check: Advanced Asynchronous CSS3 Blogger Widget To Improve Page Loading [2016]

Create Your Own Search Engine Using Google Custom Search API

It's very simple to integrate in your website but consist of extended and slightly complicated steps, so I request you to read and follow each step carefully.

1. First Sign-up for an API Key on:
[Update 31 January 2016] Go to:

2. The 'Custom Search' page will appear on screen. Select theme for your search engine look as 'Espresso' - [You can change as you want]. Google Ajax Search Widget For BloggerScreenshot1

3. Go to 'Configure' option, and select 'Use an existing custom search engine'. Now click on 'Select CSE'.Google Ajax Search Widget For BloggerScreenshot1

4. Click on 'Create a new search engine', here you may have to logged-in to your Google Account, as because it's your own search engine and that for your unique ID. Google Ajax Search Widget For Blogger2

5. Type search engine name as 'Search'.
6. Type search engine description as 'Search'.

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

8. In 'Sites to search' box put your own blog/website URL []. Google Ajax Search Widget For Blogger222

9. Choose 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. Google Ajax Search Widget For Blogger1010

20. Now you have the two types code sections:
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.
Google Ajax Search Widget For Blogger1111

21. The first code is the Search Widget Code, which can be copy-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'>

And paste the second code below <div id='main-wrapper'> code, as shown. Google Ajax Search Widget For Blogger1212


24. Check the widget performance on your blog-site.

Bottom Line
In this widget, you can insert your own Adsense adds (with publisher's ID) easily. Automatically search own site as well as on the web. It’s very fast than ordinary search engine & no need to refresh the whole page to search. For Demo see right side of this site and check the behavior of this widget.

What do you think, isn’t it a amazing tool for the website that everybody should install? Let us know your views via comments.

Don't forget to LIKE, SHARE & SUBSCRIBE...
Seriously, your small share helps a lot with the growth of this blog.
Most of the readers don’t share as they feels that we as bloggers don’t require their ‌tiny social share. But here’s the fact…
I've developed this blog piece by piece, your one small share at a time, and will continue encouraging me to do so. So I appreciate your support if you share this page on your social profile.
My dear reader! it won’t take more than 5 sec. of your time. The share buttons are there, please share and subscribe.
Vinayak SP
Authorised by:

I'm a writer, digital columnist, tech-savvy and an engineer all rolled into one. Yes, that pretty much what everyone likes to call a geeky friend or what you’re probably here seeking, a content writer. You can follow me on the social media or subscribe the email newsletter for the updated guides and tutorials. Publishes news articles about blogging tips, SEO, making money online, affiliate marketing, & tech reviews.

⚠ Disclaimer
We are one of the type of a professional review site that operate like any other website on the internet. We respect & trust our readers. And we are confident & would like to mention that the above post contains some affiliate/referral links. And if you make a purchase; we receive commission from the links/apps/products we refer. We are totally unbiased and do not accept paid reviews or fake reviews claiming to be something they are not. We test each product thoroughly and give high marks to only the very best. We are independently owned and the opinions expressed here are our own.
Read & Post Comments


All of the ProBlogBooster ideas are free for any type of personal or commercial use. All I ask is to keep the footer links intact which provides due credit to its authors. From time to time, we may use visitors/readers, information for distinct & upcoming, unanticipated uses not earlier disclosed in our privacy notice. If collected data or information practices changed or improved at some time in the future, we would post all the policy changes to our Website to notify you of these changes, and we will use for these new purposes only data collected from the time of the policy change forward. If you are concerned about how your information is used, you should check back our website Policy pages periodically. For more about this just read out Privacy Policy

Most Trending Pages

101 Top SEO Tips & Strategies To Increase Organic Traffic

101 Top SEO Tips From Experts

You should learn effective SEO techniques as there are many best SEO optimized websites for you and your brand who are already working on and their search rankings are now in the first top ten results. Listed top SEO tips and tricks which will help you get better search ranking & keep you at the top of the SEO results.

Add All Open Graph Tags To Boost Social Sharing

Open Graph Protocol

An "Open Graph Meta Tags" is one of the most important tags that every blogger need to add into the HTML body of their blog to properly show title, description, images & you need to optimize the Open Graph tags that'll enable you to make it happen a rise in social sharing and improved conversion rate.

Benefits of Online Marketing For The Business

Benefits And Importance of Online Marketing For The Business

Listed the advantages of online marketing, benefits of digital advertising and the strategies that the online marketing services for small businesses practices to drive more buyers. Sellers are now aware of the benefits of internet advertising and how digital marketing help to generate more sales. Follow benefits of internet marketing for your business.

10 Ways To Make YouTube Videos PROFESSIONAL

Top 10 Ways How To Make PROFESSIONAL YouTube Videos // YouTube Techniques

Making videos professionally is not as complicated as it appears. If you have basic accessories of shooting, then you are ready for this. You just need to know how to hold a camera & some basics of filmmaking. Having high-quality video will undoubtedly increase your subscriber, & obviously helps you to make money with youtube ads.

FB Twitter Google Linkedin