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 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:

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 the 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 pastes 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 the title or the sidebar then you may like our detailed tutorial on controlling widget display in blogger:

Need Help?

This post may look a little hard to implement but actually, it’s 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 🙂

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *