May 27, 2011

How To Create Google Custom Search Engine?


Google-Custom-Search-EngineWhen it comes to crawling the internet or a website nothing can surely beat Google's searching technique. Blogger Templates that are found in various designs and colours often have custom search boxes in it, which I am sure you might have observed are incapable of displaying the relevant results. These search boxes by default are limited to their ability of searching each and every word of your blog. The best solution is to use Google Custom Search Engines (CSE) that are extremely efficient in digging out the most important data from your blog and displays it to the visitor. This increases the number of pageviews and page impressions of your blog because the reader is kept engaged in reading more and more. Further you can easily integrate your Google AdSense Ads to your Google Custom Search box, which again increases your blog revenue for every click made on the search results. An Example of such search engine can be found below every post of this (MBT) blog. So lets create and install a beautiful Google Search box for your blog.

How To Create a Custom Google Search Engine?

  1. Go To Google CSE
  2. Hit the create custom search engine button
  3. Fill the form as shown in the screenshot below,

set up your google search engine

   4.   The Click the next button and choose the Design for your search engine. You can click the "Customize" button to edit the colours and look.

customize-the-look-and-color

   5.  Hit the next button and then click the "Look and feel" link on the next page as shown below,

CSE-look-and-feel

It will bring you a page where you will find three layout options i.e Full -width, Compact and Two Column as shown below,

Google Search Engine Layouts

  • If you wish to add the search box just below posts as I have done on my blog then choose Full-width
  • Or if you wish to display the box and results on the sidebar then choose compact
  • Else if you wish to add your search box to your sidebar and display the search results above the post title then choose Two Column

  6.  Finally hit "save & get code" button and jump to the next part of our tutorial.

Add Google Custom Search Engine To Blog Posts

To add the search engine just below your blog posts as we have done on MBT then please follow the steps below,

customize Google Custome Search Engine

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Click the Expand Widgets Templates Box
  4. Search for <data:post.body>
  5. Just below it paste your Blog Post Search Engine Code (Full-width)
  6. Save and you are done!
  7. View your blog to see it appearing just below posts.

Add Google Custom Search Engine To Blog Sidebar

  1. Go To Blogger > Design
  2. Choose a HTML/ JavaScript Widget
  3. Paste your Sidebar Search Engine Code (Compact or Two Column) in it
  4. Save and you are done!
  5. View your blog to see it working just fine

Changing your default search box to Google Custom Search Engine Box is an important step that you must take as early as possible. You will see the difference in your analytics the next week. In the next post as shared below you will learn to integrate your AdSense Ads to your Custom Search engine and increase your Adsense earnings.

Hope you liked it! :)





If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

58 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. great work mbt, now we can customize google search button also.
    i thing it is more powerful than default search engine.
    and eagerly waiting for a post on avatars also.

    ReplyDelete
  2. Sorry mohd_ for disturbing you,problem solved for avatars,now you have no need to write an post on it..

    Regards

    ReplyDelete
  3. @karan

    No problem buddy. But I still need to post one on it as I have not shared it as yet and I have some beautiful designs for it which I hope you guys will like a lot. :>

    ReplyDelete
  4. for code CSS we can make own (custome)
    we just take the code for action and others...hihi
    like that lah...hohoho (confused explained) LoL

    ReplyDelete
  5. Is this legal, the customisation of the button? Also I'd like to ask you what you heard about the blogger bar? We should keep it on our sites? It is enough just to have a link to blogger?

    ReplyDelete
  6. @beben

    You made me confused though. :p Didn't get your question?

    @Lucky
    It surely is legal because the customization is provided by Google itself.
    For the blogger thing, I have heard that they have redeveloped it and given it a new look with web search form but I don't know if they can impose it as a must on all bloggers to display it at the top. Doesn't make sense.

    ReplyDelete
  7. @Lucky

    Forgot about the link. I think we should add a "Powered by Blogger" Link in our blogs at least

    ReplyDelete
  8. hmm .. What can I edit it again?

    so .. what's the difference from google code and the code manually? *to quality SEO*

    ReplyDelete
  9. Hello,

    What if we need the search engine to appear only in post pages? With your method explained above it is appearing on homepage too under all posts.

    Thanks....

    ReplyDelete
  10. @Mari
    The above custom search engine was made available by Google to web masters so that Google could better index the website data as well as help the website visitors to get the most relevant search data. It is indeed a SEO must.

    @Hetal

    Oh I am sorry I forgot to mention that. to show the search engine only on post pages, simply enclose the search engine code between these lines,

    <b:if cond='data:blog.pageType == "item"'>

    PASTE SEARCH ENGINE CODE GOES HERE

    </b:if>

    ReplyDelete
  11. @Mohmd, is there a way, I can add Google costume search box at the siderbar (compact) and also to the blog posts?

    ReplyDelete
  12. @Felix

    You can use the same code as many times as you want. :>

    ReplyDelete
  13. @Mohmd, thanx 4ur prompt response, so that means after I create the GSE, obtain the code (compact) then implement it. I can re-modify the same GSE, obtain the code (full-width) and implement in post pages but in the same blog: OR should I create another different GSE for one at the sidebar and another at the post, meaning two GSEs but placed in different positions to track where searches are mostly done. I have currently implemented the (compact) in my blog but my my allies say they'll prefer both (compact, full-width) for easier searches, how do I go about this when using a single GSE??

    ReplyDelete
  14. @Felix
    Forgive me for the late reply pal.
    When you change the visibility mode of the search engine then of course coding will change. Yes you are absolutely right, You will have to create a separate CSE. This will better help you in monitoring the CTR. Hope this was clear. :>

    ReplyDelete
  15. CSE changes to layout options - Thursday, June 16, 2011 - have resulted in the inability to carry out a date range search by adding, for example, '&as_qdr=d5' to search string. Do you know how I would do the equivalent search in the new environment?

    ReplyDelete
  16. If you are using your Taz template. How do you place that in your search section you provided?

    ReplyDelete
  17. This comment has been removed by the author.

    ReplyDelete
  18. Hi buddy...i want to place search box just under the header...just like yours....how can i do that...plz help me...thanx...

    ReplyDelete
  19. Adding a custom search engine in your website is a good idea. You should really consider it.

    dentist seo

    ReplyDelete
  20. Mohd.
    Excellent post ,i was waiting for this post since many months but surprised how I missed it ...nonetheless good i asked u the other day otherwise i would have wasted more time looking here and there....ur way of explaining things are simply GREAT !!!
    HATS OFF !!
    THANKS THANKS THANKS ....
    :)

    ReplyDelete
  21. This article is novel, I really love it. I also have some ideas written in my article, you can have a look if you have the interest. We can also discuss different topics.
    Archie Manning Jersey
    Deuce Mcallister Jersey
    Jabari Greer Jersey
    Jonathan Vilma Jersey
    Malcolm Jenkins Jersey

    Morten Andersen Jersey
    Rickey Jackson Jersey
    Roman harper Jersey
    Sedrick Ellis Jersey
    Bobby Hebert Jersey

    ReplyDelete
  22. I never know Google CSE can limit the search to a particular website. I always thought it was just an extension of Google. Now that you shared this trick, I'm seeing a lot of possibilities.

    - seo outsourcing services enthusiast

    ReplyDelete
  23. very nice informative article
    the points disscussed are quite important to be considered
    Website Design Perth

    ReplyDelete
  24. i have two cse's and I would like a drop down menu beneath the search bar that you can select which cse to use. Do you know how to do that. Specifically, I'm looking for code. Thanks.

    ReplyDelete
  25. Small bits of content which are explained in details, helps me understand the topic, thank you!


    Search Engine Optimization

    ReplyDelete
  26. I chose 2 columes which I wanted the result to be show above the post, not in the top of the post, actually above it, where do I put the code it offered me?

    div id="cse" style="width:100%;"></div "

    ReplyDelete
  27. i want the search result to be displayed like yours. please give detail procedure.

    ReplyDelete
  28. Hey,

    i need help...ive place code in html wigets but it doesnt seem to search any blogs.

    ReplyDelete
  29. This comment has been removed by the author.

    ReplyDelete
  30. @Movie Kang You want to add Two Column sidebar search box like this blog?

    So after placed code in html widgets, Go to Blogger > Design > Edit HTML >>Backup your template >> Click the Expand Widgets Templates Box. Now search <data:post.body> and paste the below code below it.
    <div id="cse" style="width:100%;"></div>

    If it's not work so search <div class='post-header'>

    and paste <div id="cse" style="width:100%;"></div> below.

    I hope it's will work :)

    ReplyDelete
  31. thanks brother it helps me. my blog is http://inamsoftwares.blogspot.com/ and its working on it.

    ReplyDelete
  32. This is very impressive! I can't wait until webGL is more widely adopted, so we can have MUCH faster, hardware accelerated 3D.logo design

    ReplyDelete
  33. I followed the procedure as stated in blog post Google custom Search engine for many times. But I could not find it working over my blog. A message loading is appeared below the post. Please guide me in this regard

    ReplyDelete
  34. Hi I Am Rashid Shah, Maine Try Kiya Magar Its Not Work Please Help Me.My Email: sahirajaan@gmail.com
    Website:http://freelibrarybook.blogspot.com/

    ReplyDelete
  35. Thanks for the information.

    Also found simple way on how to customize the search engine in www.zakyri.com

    http://www.zakyri.com/2012/06/how-to-customize-search-engine-in.html

    ReplyDelete
  36. hi..

    dude i wants same search box like you. which "Display the search box in one area and the search results in another area - Two column" like your website.

    And I am trying since 2 hr but it is not working properly. when i add that "Two column" layout it doesnot work when i click on search button.

    Full-width layout is working but it is showing result bellow search box - check here on my website -( http://www.wildhacker.com )

    And when i used default search widget, its work fine but bad luck we cant custmized it.

    please help me dude...thanx in advance.
    (niketan237@gmail.com)

    ReplyDelete
  37. how to customize the css?

    looks messy in my page here's the demo >> Music Video

    ReplyDelete
  38. @JeLBee Hub
    muhammad bhai jan i have a same problem plz checkout Check out screen shoot.

    ReplyDelete
  39. I love "mybloggertricks.com" and all the posts.

    My site "24xhtml.com" is down after implementing this custom Google search feature. Please can you help me, if I have done anything wrong.

    Regards,
    Regina Sarkar
    24xhtml.com

    ReplyDelete
  40. This comment has been removed by the author.

    ReplyDelete
  41. Hi is a there a way to add the cse to the mobile blogger template

    ReplyDelete
  42. hello friend i want to promote my site again www.flysad.com
    which is full of hidden tips and tricks so remind it

    ReplyDelete
  43. Thanks a lot friend... I have successfully put a functional search engine in my blog (bloggingtipsandtrix.blogspot.com).this post is great.
    More power!!!!!!!!!!!

    ReplyDelete
  44. I think taht

    is


    because I cant find in my template.

    ReplyDelete
  45. Excellent post. I was checking continuously this blogs and I’m impressed! Very helpful information specially the remaining part I care for such information much. I was looking for this particular info for a long time. Thanks and best of luck.
    Outsourcing SEO Services

    ReplyDelete
  46. Where should I implement the code to get the search box in the mobile site at www.topxsongs.com/?m=1 And please help me with the code to make the search box sticky on my site at www.topxsongs.com

    Thanks -- Ramesh

    ReplyDelete
  47. I am always failed to create this one, I tried every time but result fail

    ReplyDelete
  48. I have added it on my blog, but ads are not displaying..! what would be the problem? please help..

    Vivek
    How To Find Your Lost or Stolen Phone Using Android Device Mnanager

    ReplyDelete