RealcomBiz
Pin It

Add And Display Google Custom Search Results On A Page

google custom search for making money
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! Default style, 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.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

4 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Hi My problem is to show the search result in a page by using custom search box in the menubar. I already have custom search box in my menubar. When I copy code from CSE by choosing only result option and enter my result page url, result doesn't show but the result page shows

    ReplyDelete
  2. Please cross-check your steps. I guess you are making mistake somewhere.

    ReplyDelete
  3. I need your assistance.
    i already have search box with custom css styling, i want to use that search box instead of above mentioned 'code 1', so how can i do that? please have a look on my blog to better understand it http://bollywood-full-hd-songs.blogspot.com

    ReplyDelete
    Replies
    1. Am afraid Google doesn't support custom search box unless your search box code leave room for integration of your Google publisher id, before you can use Google search result with a custom box.

      Delete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger