How to Add Google Custom Search Engine in Blogger/WordPress With Adsense Ads | Embed CSE API+Ajax

Programmatically Ajax-based custom search API creates & helps the visitors 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 in a few seconds since it is completely integrated with the Google API loader.

Adding Google Custom Search API (JSON/Atom) to Your Website
Web experts used to search for how to integrate Google custom search engine into the website? How to add Google Custom Search API to Blogger/Blogspot blog? How to get a Google site search box? How do I use Google Custom Search? And so on.

You must use a Google custom search API box on your website or blog especially if the blog navigation is not easy for the reader to get particular pages as your website has lots of posts. You must make your website easy to navigate.

The conventional default blogger search widget is not that much able to fetch and show the results plus it's very slow to load. So for making your search results more powerful and effective for your readers, the Google custom search engine widget is the best option to use and deliver the relative content results matching exactly to the search queries. Not only you can customize the look according to your web design, but you can also monetize the search engine results with Google adsense ads to make extra money.

This Ajax based Google Custom Search Engine (CSE) API 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 HTML but also your website design. Bloggers requested 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 custom search widget for your blog or website.
Custom Search Engine (CSE) API For A Blog Website
Custom Search Engine (CSE) API For A Blog Website
Last time you have seen Free Online Meta Tag Generator tool to create SEO optimized metadata for your site. Today I'm working on advanced steps in Google gadgets to find out Ajax and its usability with respect to web content through search gadgets. So here in this post, each and every step is discussed in detail along with images.

This is one of the best blogging tips 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.


Intigrate Google Custom Search Engine (CSE) API into a Blogger/WordPress With Adsense Ads | Google Developers (Ajax)

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

Follow the steps to create your own search engine using Google Custom Search API adding to website:

Step 1: First sign-up for an API key. Go to Programmable Search Engine [CSE has now changed to Programmable Search Engine]


Step 2: Then click on "Create your first search engine!"

The 'Custom Search' page will appear on screen. Select theme for your search engine look as 'Espresso' (You can change as you want).
Google Custom Search Engine For Website



Step 3: Go to 'Configure' option, and select 'Use an existing custom search engine'.
Now click on 'Select CSE'.
Google Custom Search Engine For Website



Step 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 Custom Search Engine (CSE) API For A Website



Step 5: Type search engine name as 'Search'.

Step 6: Type search engine description as 'Search'.


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


Step 8: In 'Sites to search' box put your own blog/website URL.
Google Custom Search Engine (CSE) API For A Website



Step 9: Choose an edition, off-course!! select as 'Standard edition - Free'.
Google Custom Search Engine (CSE) API For A Website



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


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


Step 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 Custom Search Engine (CSE) API For A Website



Step 13: Click on 'control panel' will see 'Basic information' with your 'Search engine unique ID: your-own-ID'
Google Custom Search Engine (CSE) API For A Website



Step 14: You can select 'Preferences' as per your requirements. And then 'Save changes'.
Google Custom Search Engine (CSE) API For A Website


As professional you must know; 17-Steps On-Page SEO Checklist To Dominate SERP & Rank Higher


Step 15: On left hand 'Control Panel' Look for 'Look and feel shown', click on it.
Google Custom Search Engine (CSE) API For A Website



Step 16: Choose a hosting option as 'Search Element'.
Google Custom Search Engine (CSE) API For A Website



Step 17: Choose layout for search element 'Two Column'.
Google Custom Search Engine (CSE) API For A Website



Step 18: Choose customize a style as 'Espresso'. (Here you can customize the font-size, font-color for your template matching).
Google Custom Search Engine (CSE) API For A Website



Step 19: Click on 'Save' & then 'Get code'.
Google Custom Search Engine (CSE) API For A Website


RECOMMENDED: Top 121 Unique Blog Ideas & Topics To Boost Your Website's Conversion Rate

Step 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 on the page where you'd like the search results to appear.
Google Custom Search Engine (CSE) API For A Website



Step 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.


Step 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 Custom Search Engine (CSE) API For A Website



Step 23: Now SAVE TEMPLATE.


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


Bottom Line

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

What do you think, isn’t it an amazing tool for the website that everybody should install? Let me know your views via the comment section shown below.


If you enjoyed this article, please share it with your friends and help us spread the word.

Next Post Previous Post
But before you read the page, I just want to tell you that; you can now convert every visitor & every impression in $$$ with the most advanced & reliable monetization platform that having highest fill rate & the best payouts in the industry.
ADTR Network

One day approval. Monetize your traffic from day 1, with 100% fill rates, higher CPM, & quick payouts. Register to Start Earning Right Now →

Join
ADTR Network
Now

New AI-Powered Content Marketing Toolkit
Rated 5/5 stars in 10,000+ reviews. Stay ahead of the competition with next-gen tech adoption by optimizing content for the target audience to drive 3x faster results. Act now to gain a competitive edge in the market.

ADTR

Improve Revenue, Performance,
&
Grow Traffic Faster

Join Adsense Certified Ad Partner
"ADTR is a must have automatic testing tool for serious publishers."
300% Rise
in AdSense Earnings
Get results from Day 1
It's FREE
Read The Case Study

Testimonials

Client Name 1

I joined PBB when I started blogging 6 years ago. It was my go-to resource for just about ANYTHING!! Without it, I would not have continued down this journey. Having the support, motivation and resources available when you’re in such a lonely profession like blogging is crucial to success. Thank you PBB for helping me turn my passion into a full-time career!!!.

Nikhil Agarwal
Client Name 2

Thank you! After many years of dreaming and enjoying the beauty and insight from numerous blogs I found the courage to start one myself. I could not have done it with your step-by-step guidance! Thank you so much for Pro Blog Booster, for your patient instructions, and for your nudge to publish before it is perfect! I have a long way to go, but am excited to be tippy-toeing into the blog world!

Nandhini Sinha
Client Name 3

I highly recommend ProBlogBooster to any new tech blogger. I began my journey several years ago. The site holds a wealth of information and is both inspiring and educational. They keep up-to-date with the latest standards and trends bringing key information to help you start and grow your technology blogging business. The tech tuts are very in details and the support you receive will help to overcome any challenges along the way. Again, I highly recommend PROBLOGBOOSTER as your companion for tech blogging!

Arnab Tamada
Client Name 4

Problogbooster is awesome. If you’re serious about taking your blog to the next level then there’s no better blog. It has given me the confidence to keep growing my eCommerce site and view it as a serious business.

Matt Flynn

Disclaimer

We are a professional review site that operates like any other website on the internet. We value our readers' trust and are confident in the information we provide. The post may contain some affiliate/referral links, and if you make a purchase through them, we receive referral income as a commission. We are unbiased and do not accept fixed marketing articles or fake reviews. We thoroughly test each product and only give high marks to the very best. We are an independent organization and the opinions/views/thoughts expressed here are our own.

Privacy Policy

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