How to Integrate Google Custom Search into your Blog

searcherGoogle Custom Search is the best way to let your readers search your blog. It is just like giving the readers the power of Google search just this time the scope is limited to your blog alone. It is one of the most handy tool for each and every blogger out there. Its easy to setup and starts working the moment you put it in your blog. In this tutorial we will see how to embed a Google Custom Search Box into your blog and some tips related to it.



Demo
Some Thing You might want to Know

When a Blogger blog is created , a Custom Search Engine dedicated to it is also created with it. So technically speaking you might even not need to make your own Google CS Engine ( To Enable This just add a Search gadget from the Layouts ) . But wait here is the thing , there are some limitation attached to this search engine. Here is list of few


  • Can't access data related to search queries
  • No way to monetize the searches
  • Can't include the images from pages besides them
  • Sometimes results are not what you really want


  • With this said , it is would be far better choice to go with a Google Custom Search Engine rather than the inbuilt Search Engine for your Blogger blog

    Well there is another inbuilt way to search your blog , using the query parameter on the /search directory of your blog . To add a search box of this type ,add the following code in a HTML/JavaScript Widget.

    <form  action="/search"> 
         <input id="q" style="width:150px;" name="q" size="70" type="text" /> 
      <input value="Search" name="sa" type="submit"/> 
    </form> 


    The results are more graphical but the way it functions is a bit unknown and the results sometimes can be a little off-target. No data related to queries is available


    Now as we have seen how any other alternative is as good as Google Custom Search ,lets see how to implement it in your blog.

    Why is GCS Good ?

    Well some features that make it good awesome


  • Hourly Statistics about search queries
  • 5+ Styles to choose from
  • 6 different ways to show your results like Two Column , Two Page ,etc
  • Monetize your Search Traffic by connecting with AdSense
  • Options to link up with Google Analytics
  • Instant removal and Indexing options
  • Power to read your Readers brain ! (AutoCompletions)  
  • Fire specific results when particular URLs are searched 
  • Options to index all Images on your blog and make them searchable 
  • Result Sorting according to Relevance 


  • With so many features you might be asking whether its really free ..... Yes its all free to grab. There is a Business version available too but as thats for businesses !

    Finally How To put it in your Blog !

    Follow the Steps below and you will have running on your blog in no time

    Video Tutorial



    Steps

    1. Go to http://www.google.com/cse/manage/all and Click the New Search Engine Option in the Left


    Google custom search create

    2. Now Enter the details as asked and click the Next Button

    custom search first step of creation

    3. Select the style of the comment and click Next

    search second step look feel

    4. Copy the Code provided

    custom search copy code

    5. Add it into a HTML/JavaScript Gadget and Hit the Save Button
    add code in Blogger

    6. The Custom search has been setup for you and your blog is ready to be searched !


    This is the most basic version of the Google Custom Search , now lets get started with some customizing

    Note: For every change you make , 90% times you will have to put a new code in place , so I suggest you make all the changes and then only add the new code in your blog

    Getting the images to be Indexed

    Go to the Basics Tab and under the Search Preferences check the Enable Image Search option and Save Changes


    custom search image index option

    Monetize the stuff

    You can simply link your AdSense account with the Custom Search so that all the Ads that appear in the Search Results become a another revenue resource for you

    custom search integrate AdSense

    Autocompletions

    This is one of the most talked about feature out there . You predicting your readers mind ! If you enable it make sure that there is a free quota of 100 queries a day, beyond this they will fail



    auto completion in Google Custom Search

    How It Looks and the Layout

    The layout option and style of the search box can be easily changed by going in the Look and feel section


    look and feel change option in custom search dashboard

    Google Analytics

    Link up your Analytics account to see all your site search data in your GA Dashboard


    analytics linkup search

    Indexing

    In this section you have the ability to add or remove URLs from your Search Engine in a instant



    indexing instant removal search



    Promotions


    The ability to show a result which is define by you when a reader enters a specific query

    promotions

    Hope you found the tutorial useful , feel free to ask any question or share your thoughts on it.

    Written by Prayag Verma

    Find me on Twitter

    Email Newsletter

    Like what you read here in this post ?
    Get new posts delivered straight to your inbox

    Post a Comment
    Unknown said...

    good step by step guide,although i used search engine from site once you made reference to in your previous post related to customising google custom search

    Unknown said...

    How to show the results in the main page instead of the sidebar ?

    Awesome tutorial thanks for step by guide.

    Thats not a problem ,Just shared the way I would have done it

    Thanks Hammad

    Feel free to ask if you face any problems

    Hi there

    To display search results in a separate page , Select the Two Page Layout from the Look and Feel option.

    Now when you go to the Get Code option ,you will be presented with two set of codes ,

    One will be for the Search Box , that you will have to put in the HTML/JavaScript widget

    The other code will have to added into the Page of your blog , where the search results will be shown

    thnx for sharing this cool post

    You are in right time, well done, thanks a lot for the vital topic.

    Teach me please how I open the result in a new page just like you. I saw your old tutorial and its complicated and tricky. Now this is wonderful. I am creating my blogspot blog but yet finished. I've already installed it but it is taking too much time to load the page.

    So please help me with "open the result in new page and custom search box"

    Thanks a lot. Reznick

    Rahul Roy said...

    How to fix Height and width?

    Hi Rahul

    The width is auto adjusting in nature , so wherever you put the search box , it will adjust itself. I am not able to get the height thing , can you share your URL where you implemented it , that way I can understand better and resolve your problem faster

    Hi Trever

    I have added a video tutorial to this post which shows how to add a GCS box in the two page setup

    About different design , you can check out the post here http://www.stylifyyourblog.com/2011/07/customize-google-custom-search-box.html

    If you find anything difficult in that post , feel free to ask , I will be glad to resolve the query

    So glad for your reply. I visited the above link but I got confused. I believe your two page setup video tutorial will resolve my problem. Please release the tutorial as soon as possible.

    Hearty thanks Prayag.

    Please take a look at my blog. The search results not showing correctly. Half of the fonts not showing in search results page only. How do I fix the issue?

    Thanks.

    postingan yang bagus tentang"How to Integrate Google Custom Search into your Blog"

    Anonymous said...

    thanks alottt..... awesome site :)

    thanx a lot prayag..!!;)

    Anonymous said...

    hey prayag , ur tips are awsome , i just discovered ur blog and my blog is already a lot fire literally :)

    any ways , i really like ur stylify theme and implemented in my video blogging site ... but the problem is that videos are directly be seen in home page or main page instead i want to create just thumbnails of videos on home page and the read more button then should lead to actual video post ..... but users are able to play it directly on home page ....

    i can use page break module but since i have thousands of videos i cannot go to each post and create a page tag ... plus if page break is used its not showing thumbnails on home page ..... any idea .... i really love ur stylify theme over alll themes in the world and want to configure my vioe blogs accordingly ... any help ????

    Anonymous said...

    HELLO PRAYAG VERMA, PLEASE POST " HOW TO CREATE CSS MENU " STEP BY STEP, SAME AS WELL AS THIS POST. I AM USING CSS MENUMEKER BUT THIS SOFTWARE NOT CREATE PURE CSS MENU. PLEASE TELL ME ABOUT ANY PURE OR GOOD CSS MENU SOFTWARE.

    Mac Millon said...

    Goodevening PRAYAG,

    Your website helped me to search my blogspot in CUSTOM SEARCH.Thanks

    Eliz Frank said...

    Thank you Prayag,
    It was a great help as my old search button had stopped working.
    Cheers,
    Elizabeth

    Joseph said...

    Thanks for this nice post Prayag..! I've been looking for weeks for this and reached your blog. Everything fine..added GCS to my blog too: http://www.josephstutorialshop.blogspot.com