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)

 Affiliate Reporting

<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 ....


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


Thats it !

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

Has it worked well on your blog?

Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative

If You Enjoyed This Post Please Take 5 Seconds To Share It.


  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!

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

  2. 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


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


    1. You need to get a search box from AdSense or Google CSE here -

  4. thnx

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

    It is there now

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

    can I use your approach?

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

  6. 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.

  7. Sir the code did not work for me either

    i need a code that will stand beside each other

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


Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.

Hire Us