Custom Search Box

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 :

google custom search to header

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

blogger layout (12)
blogger edit html (11)
blogger expand widget templates (10)

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?

Similar Posts

How To Put Google Custom Search Box In Your Blogs Header Section
Informative
73
Useful
82
Easy To Read
91
Fact
88
Reader Rating0 Votes
0
84