How to Implement Google Custom Search Engine on Blogger's Blog and Static Page

Table of Content

When running a blog under any niche, it is so much important to look for various means to satisfy the need of your blog visitors by giving them a good enough user experience even if not the best, but it's always advicable you work toward the "best".

Trying to give blog users the best experience, there are some tools/widgets you might need to make use of, you can check the list of top 10 widgets you shouldn't miss while running a blogger's blog. Also, you can check out how to create contact page on blogger's blog. These tools/widgets all work together for the development of blogs of any category.

What is Google Custom Search Engine?

Also known as Programmable Search Engine: lets you place a search engine on your blog to help your visitors find the information they're looking for. Because Programmable Search Engine is based on Google's core search technology, you can be confident that your users are getting high quality, relevant results. You can customize some features of your search engine, including:

• The appearance of search box and result page
• Make Use of search features like refinements, autocomplete, and promotions to enhance your users' search experience
• Understand your users' behavior by linking your search engine with Google Analytics
• Make money from your search engine with Google AdSense

Installing Google Custom Search on Blog

Setting up Google custom search engine in your blog is very simple and it only takes minutes to install. Just follow the step by step instructions.

1. Make sure you already have your blogger account and go to Google CSE homepage.

Google CSE homepage

2. By the left hand side column click on “New search engine” and start filling in your blog's information.

3. Enter your domain name excluding HTTP, for example: myblog.blogspot.com. If you manage more than one blog then you can fill in as many blog as you've wanted. Choose language, name the search engine and click on create at the bottom.

Then you will see a success info-text that says “you’ve successfully created your custom search engine”. To contine, click on public URL and start searching your site. The Google custom search engine is very basic, so before adding it in your blog you might need to customize it.

4. To customize the search engine, click the control panel or click on edit search engine at the left hand column. Now under setup you will have five settings. Here you can give search engine keywords, search engine description, enable image search if you want etc. You can also set-up your Google adsense account, add users and there are more advanced options. After the search engine configuration move on to look and feel settings.

5. Under "look and feel" different themes and layouts are available. Customize it to your taste and you can also see the preview of the search box by the right side column. When you have finished editing the "look and feel", click on save and get code at the bottom.

6. Now copy the script derived, login to your Blogger blog, move to Layout, click on add a gadget, choose HTML / JavaScript gadget, and add the script into it and click save. Arrange the gadget to the desired position where you wish to place the custom search box.

Example of Google CSE script

After you are done with the customization, go check your blog where you have added Google custom search box. If you don’t like the appearance then you can customize it in the "look and feel" again and drop the code in your blog.

Note: This is about adding Google CSE in a blog as widget. To add Google CSE on a static page please contine to the next step below!

Installing Google CSE on a blog's static page

This step is as simple as the one given above. Note that when you're using this method, users will be directed to the static page used, which will be containing the search results of the words input by the users and this results are automatically generated by Google.

The results may include ads, sponsored search, and related search result from other website and the website you made listed on the Google CSE set-up page.

Important Note: If your website or blog is not well ranked on Google search engine, it isn't advisable for you to make use of this method!

Because search results may contain only few of your post which are made available on search engine.

Notice for well ranked blogs on search engine

If your blog is well ranked on search engine, this is the best search tool i will recommend for you to utilize, why?? because this tool also give room for some special means of making money from your blog. The means include:

• Connecting your Adsense code with Google CSE and make money from every click on any ads on the top of the search result page
• You can also create featured post on top of the search page as advertisement and charge your fee for that. The post can be customized on your Google CSE account page
• You can also promote various post links on your blog just like the featured post

How to create Google CSE on Static Page

Following the set-up explained above, go to the "Look and feel" and select the "Result only" option in the layout setting. Then click the Save & get code button under the setup page as shown in picture below:

Copy the script and move to the next steps below;

1. Create a page on your blog, you may name it "search" or "search results" just as you are pleased then paste the Google CSE scripts into the page created and save it.

2. Copy the page URL and go to your blogger dashboard in the Edit HTML menu.

3. In the Edit HTML menu search for the code below; <div id='search-container'> <form action='/search' class='search-form main-container' id='search-form' method='get'>

4. replace '/search' with the URL of the page you've created. For example as implemented on longtechy.com <div id='search-container'> <form action='/p/search.html' class='search-form main-container' id='search-form' method='get'>
Replace /p/search.html with the URL of the page you've created earlier.

By following these simple steps you should have a perfectly working Google CSE on your blog page.

Examples of website that make use of this system include: www.longtechy.com, www.igniel.com, www.mashbyte.com and more... You can check for confirmation.

Post inspired by: SaurabhDesign