Add And Display Google Custom Search Results On A Page

This tutorial am about to share with you is only applicable to the google custom search box, and not the one you added via layout/page elements. google custom search engine is another way of creating an easy navigation for your readers. A question was ask by one of my readers that, is it possible to show search result on a page? But am telling you it is possible with this tutorial. To see the demo of this search box and how it works, look at the top right hand corner of this site and insert a query in the search box to see what we are talking about.
Before proceeding we assume you must have read how to create a google custom search box, after that, the first step for you is to create a search results page

How To Create A Search Results Page

• Log-in to your blogger dashboard (using the new blogger interface) to avoid confusion.
• Go to "Pages" > "New page" > "Blank Page"
• Enter Search Results as your page title and leave the content box blank.
• Click "Publish", view your page and copy the url from your browser address and save it in a notepad.

How To Get Google Custom Search code

• Go to http://www.google.com/cse/manage/all
• Click on "control panel" next to your search engine title.
• Click "Look and feel" link from the list of options at the left hand side.
• Choose "Two page" from the layout options as shown below

• For more customization, click "Customize", if you don want to use the New! Defaultstyle, you can choose from the varieties of options.
• Click "Save & Get Code..."
• Enter your search result page url which you copied in the first step, into where you are ask to "Specify search results details" as shown below.

• Click "Save Changes" after you have filled the two space.

You will be given two code in different box as shown below, now let's move to procedure in applying the codes.

How To Apply Code 1 

• Open new window and go to your blogger dashboard
• Click on "Design" > "Page elements" > "Add a Gadget"
• Choose "HTML/JavaScript" from the list, copy and paste the "CODE 1" in the content box.
• Click "Save", and position your search box to your desired location.

How To Apply Code 2

• Now go to your search result page inside your pages editor, to edit it.
• Switch to "HTML" mode, copy and paste "CODE 2" in the html box
• Click "Publish", check your blog to see your google cse working perfectly well

Hope you enjoyed this post? If so, take few seconds to share it, and don't forget to subscribe to this blog now, and receive our latest/hot post directly into your email, even if you are offline. 

Posted in: Blogger Widgets