Integrate simple blog search with Google Custom Search result page.

Everybody knows that whenever we want to search for something on the Internet then obviously Google Search is the first thing we think about. As Google Search engine is one of the best Search Engines over the web. And if you want to list your website or blog on the top of Google Search Results, then nothing is more interesting than that. Well its a part of good SEO to get your blog listed on top of search results. And Google Custom Search Engine for your blog or website also plays a great role in doing this. So, here I will discuss about Integrating Google Custom Search with Simple Search box of your blog's template.

Create Google Custom Search Engine for blog:

First of all, you need to create a custom search engine for your blog, so that you can get search results for your blog's queries within your blog. You need to follow below link to create your blog's Custom Search Engine.

http://www.google.com/cse/manage/all

At the above link Follow these steps:

• Click on New Search engine, fill up your blog/website details and click Next.
• Choose a default style and click Next. You can change this look and feel at laterstage from control panel.
• At the third step you will get your code for CSE, don't take this code. Click on Look and Feel link to customize the design and search result page integrity.
• Now you will be redirected to Look and Feel page.
• Choose a layout as Two Page layout and style as Default as shown in below image.

• Now click on Save and get Code buttons. Which will lead to the code page which consist of two codes. one for the search box and other for the search results page.
• Here you need to put the URL of your search result page. 
• Pause this step when  you see the below Image. As you need to create Search Result Page.

Create a page to display Custom Search Results:

• Go to your Blogger dashboard and click Pages.
• Click on Add New Page and name this page as SearchResults and publish it. Do not put anything on this page's content section.
• Now view this page and get its URL. It will be like http://www.pctricksblog.com/p/searchresults.html
• Now copy this URL and place it in the URL field as shown in above image, and Click Save Changes.

Now your Custom Search Engine is ready. You need to just place the code to your blog to use this search engine to display your search results.

You will find two codes on your control panel page for Custom Search Engine. One for Search Box and other is for Search Results Page as shown in below Image. The javascript code is same for both, so you should add this javascript code only once before </head> in your blog/s template.

Add code to search results page:

•  Go to Blogger Dashboard >> Template.
• Place the JavaScript code just before </head>
• Now, Go to Blogger Dashboard >> Pages >> Search Results Page.
• Paste the code for Search box and Search Result Page in the page's content section. Adding both codes will place the search box above the search results. So that users can easily change their search query.

 Now you need to Integrate this Search Result page with your simple Search box.

Integrating simple search box with Google Custom Search:

•  You need to make a small change to your template. When you use simple search for any query, then by default for blogger search, the search form's action parameter for query is /Search as it is displayed in Search result page's URL as-

 http://www.pctricksblog.com/search?q=micromax 

•  So you need to replace this /search with your search page URL's part after your site's address. As shown in below image.
  

•  Save your template and you are done.

Now try searching some term with simple search box and it will be shown in your Custom search Page with Google Search Result.

I would love to get your feedback and queries.