How To Connect Two Pages To Use Google Search Box?

Google custom search engine for websites and blogs is another way to provide easy navigation to your visitors and readers as well as make some extra cash out of Adsense. Its best advantage is that it will help Google to index your pages quickly. All those pages which are indexed by this search box function is automatically indexed by robots and added to Google's databases.  Its not just about Making money but about deep indexing and site navigation. After the introduction of Plus project, Google developers have transformed all services to look like Google Plus. They recently introduced a search box which looks exactly like Google's official search box. You can see it towards to top right corner of our site. If you insert a query inside the box and hit enter you will land on a different page where results are displayed.

We have dedicated a whole new page for search results in order to provide users with more flexibility. You may also notice that as soon as the search page loads, the search box at the top-right disappears and instead you see one inside the middle of the page. In order to connect two pages in blogger you will have to follow this easy tutorial.

Note before you may start you must learn how to create a custom search box and how to integrate AdSense into it. We have already published detailed tutorials on it which you may follow below:

Google Custom Search Engine Series

Part1: How to Create a Google Search box?
Note: Follow this part only to create the box, stop where it tells you how to add it to blogger. We will learn how to add it by connecting two pages in today's tutorial.

Part2: How To Make Money With Google Search Box?

Part3: Customize the Fonts and Colors of the search box
Note:-
You wont require reading this part if you want to use the latest Blue Look that the tutorial today shares.

Part3: How To Connect Two Pages To Use the Google Search Box?

Choosing the style

We assume that you have read Part1 above and you are ready to choose the GooglePlus style box.

1. Go To http://www.google.com/cse/manage/all
2. Click the control panel link next to your search box title
3. From the left menu choose "Look and Feel"
4. For layout choose "Two Page"
5. For Style choose "New! Default"  If you wish to customize the link colors on the search results page, click the customize button to make the changes

    6.  Click Save & Get code
    7.   Now do not close the window and open a a new tab and do this:

• Go to blogger
• Click Pages form list menu
• Create a new page and title it "SEARCH RESULTS"
• Write nothing inside it and click Publish
• Now visit this new page and copy its URL from browser address bar
• Done!

    8.    Now go back to the first window where you have the code for the search box.
    9.    Where it asks for Specify search results details paste inside the first box the URL of the SEARCH RESULTS page you just created. See the screenshot below for our page

Inside the second box where you are asked to specify the query parameter embedded in the URL of search results, you can keep it default or you can simply replace the letter "q" with your blog short name. If you search anything on our blog you will see MBT parameter appearing in the URL inside the address bar as shown below:

   10.  After you have filled the two boxes click "Save Changes"
   11. You will see two big boxes containing a code. Copy the code from first box which says "Paste this code in the page where you'd like the search box to appear. "  And Paste it inside a HTML/JavaScript widget and drag this widget to your blog layout's top-right position as shown below:
.
Note: In the above step we created a HTML/JavaScript widget by going to blogger > Layout > Add a Gadget and then chose HTML/JavaScript widget.
    12.  Now after you have positioned the search box the only part left is adding the second code inside your SEARCH RESULTS page. To do this copy the second code from the box which says "Paste this code on URL of Your SEARCH RESULTS Page, where you'd like the search results to appear".
Now go to your SEARCH RESULTS page inside blogger and paste the code inside the HTML section of the editor as shown below:

    13.  Hit update and you are all done!
Visit your blogs to see a million dollar worth search box right on your sidebar. Play with it to see how search results appear. :)

Hide the Search box and Social Networking Buttons

Your Page might also be displaying social networking buttons and Adsense Ad below title. In order to clean up the search page you must hide them and also hide the search box in the sidebar so that visitor may not see two box on one page. To hide widgets kindly read our detailed tutorial on controlling the widget display in blogger:

• Show or Hide widgets in Posts and Pages

Need Help?

This post may seem a little techy but believe us its really easy to implement. If you need any help or get yourself into any trouble just let us know pal. Let us know how did you find this tutorial and what else would you love to know regard Google powered Custom Search Engine. Take good care of yourselves. Peace and blessings pals. :)

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you Subscribe to our regular Email Updates!

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »