How To Put Google Custom Search Box In Your Blogs Header Section



In this post I’m going to show you an easy trick to add a Google Custom Search Box to your Blogger header area.I’m sure you have seen plenty of blogs (Including this one) with search boxes and other content in the header section.I think it makes good use of the free space in your header area and gives your blog a more professional look.If you dont have a Google Custom Search Box To Use,In a previous post i showed you how to get a Google Custom Search box for your blog Click Here for that post.

The search box will be positioned differently than it is in my header.To see a Demonstration of how it will look Click Here.


Adding the search box is easy here’s how its done :

How To Put Google Custom Search Box In Your Blogs Header

1.Click ‘layout’-> ‘Edit html’ for your blog.
(Tick The ‘Expand Widget Templates’ Box)

Blogger layout

 

edit html blogger

 

Expand widget templates blogger

2.Find the following piece of code in your blogs html:
(Click ‘Ctrl F’ for a search box to find the code)

 

<p class='description'><span><data:description/></span></p>

3.Paste the code for your search box directly Below the code above.

Before we finish : If you need more help or have an opinion or suggestion Please leave a comment Below.
To help you this is a Do-Follow Blog leaving a comment will also help your blogs Google rank.
OK Back to business ….

Example:


<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>

<—–YOUR SEARCH BOX CODE GOES HERE—–>

</div>
</b:includable>

Thats it !

Once you have added the code click save and your done.

Has it worked well on your blog?

11 comments:

  1. Hey,

    Thanks for this tip.

    What’s bad is the my Google Custom Search doesn’t fit in my blog and I had to make it so it opens in a new window. But thanks for writing this!

    ReplyDelete

     

    Replies

     

  2. Excellent, what a website it is! This webpage provides valuable facts to us, keep it up.
    My site – hindi sms

     

    Delete

  3.  

  4. This worked really great for me! I have been trying to find a way to put it in with the code that Adsense has given and you are the only blog that I have found showed me exactly how to do it. The only problem I am having now is getting the actual search to work! I don’t know why this has been so difficult for me. If you think you might know why the actual “search” isn’t working for me please let me know any tips! I added the other code that Google Adsense gives you the “Search Results Code” in a post…but that didn’t seem to help either. Thanks for any help! My website is crissylavery.com

    ReplyDelete

  5. Toronto GTA ElectricMarch 4, 2012 at 3:28 PM

    <—–YOUR SEARCH BOX CODE GOES HERE—–>

    pls give example of SEARCH BOX CODE. Or at least three first lines and three last lines of the SEARCH BOX CODE

    <—–YOUR SEARCH BOX CODE GOES HERE—–>

    ReplyDelete

     

    Replies

     

  6. You need to get a search box from AdSense or Google CSE here – http://www.google.com/cse/

    Delete

  7.  

  8. Toronto GTA ElectricMarch 4, 2012 at 3:57 PM

    thnx

    can I move or put a default or existing Search Box In my Blogs Header Section?

    It is there now http://torontoelectrical.blogspot.com/

    but I used #CustomSearch1 .widget-content {margin-top:-209px} to move it up there

    can I use your approach?

    ReplyDelete

  9. Partha Dutta BhowmickMay 24, 2012 at 4:51 PM

    But sir it goes below the header not in the opposite side. Can it be placed in the opposite side? My email add is parthasarathi108@gmail.com

    ReplyDelete

  10. i put the search box coding in header, it is working, but what my problem is it is very long in length. how to reduce the length, and put it to the right corner.

    ReplyDelete

  11. Sir the code did not work for me either

    i need a code that will stand beside each other

    ReplyDelete

  12. That’s what i was looking for to add search box in header.Its working perfectly. Thanks ..

    ReplyDelete

  13. thanks for your help

    ReplyDelete