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 its 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.
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 gadget. 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.
Install Google Custom Search Engine (CSE) API For A Website/Blog With Adsense AdsIt's very simple to integrate into your website but consist 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 https://cse.google.com/cse/all
Step 2: The 'Custom Search' page will appear on screen. Select theme for your search engine look as 'Espresso' (You can change as you want).
Step 3: Go to 'Configure' option, and select 'Use an existing custom search engine'.
Now click on 'Select CSE'.
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.
Step 5: Type search engine name as 'Search'.
You may also check; Remove Default Widget CSS bundle, Authorization.CSS To Get Fast Website Loading Speed
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.
Step 9: Choose an edition, off-course!! select as 'Standard edition - Free'.
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.
Step 13: Click on 'control panel' will see 'Basic information' with your 'Search engine unique ID: your-own-ID'
Step 14: You can select 'Preferences' as per your requirements. And then 'Save changes'.
As professional you must know; 17-Steps On-Page SEO Checklist (2019 Edition) To Dominate SERP & Rank Higher
Step 15: On left hand 'Control Panel' Look for 'Look and feel shown', click on it.
Step 16: Choose a hosting option as 'Search Element'.
Step 17: Choose layout for search element 'Two Column'.
Step 18: Choose customize a style as 'Espresso'. (Here you can customize the font-size, font-color for your template matching).
Step 19: Click on 'Save' & then 'Get code'.
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 in the page where you'd like the search results to appear.
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,
And paste the second code below
<div id='main-wrapper'>code, as shown.
Step 23: Now SAVE TEMPLATE.
Step 24: Check the widget performance on your blog-site.
Bottom LineIn 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 me know your views via comment section shown below.
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.
⚠ DisclaimerWe 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.
Get The Latest Post Delivered Free to Your Inbox
Join over 2000+ people who get FREE and fresh content from this Blog. We Respect Privacy, You are Safe! No Spam!