Monday, 13 May 2013

Add Two Page Google Custom Search in Blogger Blog

Hello Readers, In this article I will show you how to add two page Google Custom Search in to your blogger blog. Google Blogger is one of the most used blogging platform around and undoubtly Google is one of the biggest Search engines. Google provides a custom search engine for your blog which displays the most relevant search results for your blog. You must have seen many blogger templates having built-in Search box but they are not capable of displaying the relevant results and most of the times they return empty results. So it is recommended to use Google CSE for your blog. I have already posted its significance in my earlier post about adding Google Custom Search in your blogger blog. We will explore why and how to add two page Google CSE in your blog later in this article.
Google Custom Search

Google CSE offers a number of customized themes and ways to display the search results like overlay, full width, two columns, two pages etc. I used two columns and overlay search type in my previous blogger template and now I am using two page web search, which I think is the best approach to display the search results. In two page web search type you can add Google search box in one page and display the search display in the other page. In this way you can allow your ads unit to be displayed along with the search page and increase your impressions earnings. It seems to be a professional approach to display the search results because you have control over the URL parameter that sends the user query. We will discuss the URL parameter thing in detail in this tutorial. Let us see how we can add this two page CSE to our blog.

Recommended Articles:

How to Add Two Page Google CSE in blogger:

  • First of all Login to your Blogger Account and navigate to your Dashboard.
  • Click in the pages submenu from your dashboard.
  • Add a new blank page and name it search results. Do not write anything in this page, it will be used to display the search results.
  • Now open Google CSE in the next TAB or window.
  • Add a new Search Engine, in case you don't have. You can take the help of my article about adding Google Custom Search to blogger recommended above.
  • Now Click on Look and Feel tab in the Left Side bar. It will pop-up a window like this: 
Google CSE Layout

  • Click on Two Page layout type and then click on Save/Get Code.
  • It will Display a Text area containing the code for your Search box.
  • Click on the Search Results Details button, appearing just above this text area. It will pop-up a window like this:
Google CSE Search Details
  • Put the search results page URL in to the first text-box and a small URL parameter that will send the user queries, in the second textbox.
  • URL parameter could be named anything you like; I prefer the short name of my blog (UT short for UnzipTech). It will appear in the address bar whenever someone uses your search box along with the searched query.
  • Copy the Search Box Code and add this into your Blogger Sidebar. You can add a JavaScript/HTML gadget for adding this code.
  • Once you have added the search box now it is the time for adding the search results code to the page we created before.
  • Navigate to the earlier TAB and click on get code for the search results.
  • Copy the code and paste it in the Search Results page we created.
  • Save the page and click on View Blog.

TIP: Before adding the code to the page switch to the HTML/JavaScript version of the Page.
You have successfully added a two page Google CSE to your blog. You can check it by entering some query in the search box. It will display the most relevant results by searching in to your blog in the search results page. Make sure you hide this search results page in the menu bar. If you have any problem adding this element to your blog you can comment here, I will be glad to help you.

I recommend you to check out our blogging and SEO section for more cool tutorials and tips.

If you like my work; you can show your regards by hitting Facebook like button, following us on Google+ or Twitter, stumbling our posts on stumble upon or giving us a link back via the links below. Stay tuned for more tech updates.

Do you like this post? Please link back to this article by copying one of the codes below.

URL: HTML link code: BB link code:
author pic
Author: Mohammad Zafar Ahmad
Zafar Ahmad is PHP/Java Developer and a Passionate Blogger. He likes to write about Blogging tips, SEO tips, Blogger Widgets, Smart phones, Tablets and Online Earnings. You can find him on Facebook, Twitter or Google+

No comments:

Post a Comment