How To Connect Two Pages To Use Google Search Box?

The best way to provide easy navigation to your visitors is the Google Custom search engine for  blogs and websites. The best advantage of this search box is that it helps Google index pages of your blog easily and quickly into its database. The reason behind this is that all those pages searched and saved by this search box are automatically indexed and added to Google by robots. This search engine was recently introduced and it became so popular that posting on it became a must. This search box exactly looks 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.

You would have seen that we have a whole new page where the search results appear just to provide a our users with a lot more flexibility. You may have noticed that when the Search Results page loads, everything on the sidebar including the search box disappears and instead you then see a search box inside the top of the page. You can also create a search box like this by connecting two pages. Just follow this easy tutorial.

Note: Before you start, you must create a custom search engine. Read the detailed tutorial published on it:

Google Custom Search Engine Series

Part1: How To Create Custom Google Search Engine?

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 Connect Two Pages To Use the Google Search Box?

Part3: How To Make Money With Google Search Box?

Choosing the style

We suppose that you have read Part1 of this tutorial mentioned above and you are ready to connect two pages to use the search engine you just created.

1. Go To http://www.google.com/cse/manage/all
2. Choose the search engine that you would like to edit.
3. From the left menu choose "Look and Feel"
4. For layout choose "Two Page"
5. Now click Save & Get Code
6. Now don't close that tab and open a new tab and follow these instructions,

• Go to Blogger.
• Click Pages from the list menu.
• Create a new page and give it the title "SEARCH RESULTS"
• Leave it blank and click Publish.
• Now visit this page and copy its URL.
• Done! 

     7.  Go back to the first tab where you have the search box code.
     8.  Now click on the button which says Search Results Details and paste in the first box the URL of the SEARCH RESULTS page. See the screenshot below for our page,

In the second box where you are told to specify query parameter embedded in the URL of search results, you can use the default one i.e, "q" or you can replace it with any other name or your blog's short name.

     9.  After filling both the boxes, click "Save"
    10. You will see a big box containing a code for the search box. Go to Blogger > Layout > Add a Gadget and then choose HTML/JavaScript. Paste it inside the widget and drag it to the top-right position of your blog's layout as shown below,

    11. Now click on "Next: Get code for search results". Copy the code from the box that appears and got to your SEARCH RESULTS page inside blogger and paste this code inside the HTML editor section as shown below,

    12. Simply hit the Update button and you are all done!

Now go to your blogs and play with that million dollars worth search engine on the right of your blog to see how search results appear :)

Hide the Search Box and Social Networking Buttons

If you want to hide all the buttons, widgets, ads below title or the sidebar then you may like our detailed tutorial on controlling widget display in blogger:

• How to Show and Hide Widgets in Blogger?

Need Help?

This post may look a little hard to implement but actually its not. But still if any of you guys need help with this tutorial then let us know. Tell us if you need any more information regarding the Custom Google Search Engine. Peace and blessings pals :)