Add banner, Adsense or search box in header

A reader asked me how to add a search box on the right of blog title. I thought I’d share my answer in this post.

Actually, you can add anything inside your header -be it an ad banner, a search bar, social media buttons, Adsense ad or just about any widget you can get your hands on. But how?

header with search boxBy simply adding a new section in the header. A section functions as widget container and is represented by a dashed-lined box in the Layout and usually comes with an Add A Gadget link thingy. Once you get the Add A Gadget added in there, the rest is easy.

(Update: There is another way to Add widgets next to Blogger header, check it out.)

Here we go:

 

1. Adding a section (in HTML)

  1. Login to your Blogger account.
  2. Go to Template > Edit HTML.
  3. Back up your template.
  4. Make sure the Expand Widget Templates checkbox is UNCHECKED.
  5. Look for the following lines in your HTML code:
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
    <b:widget id='Header1' locked='true' title='My Test  Blog (Header)' type='Header'/> 
    </b:section>
  6. To add a section, insert the following code right under (after) it:
    <b:section id='header-right' showaddelement='yes'/>
    <div style='clear: both;'/>
  7. So the final code should look like this:
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
    <b:widget id='Header1' locked='true' title='Blogger Sentral Widget Showcase (Header)' type='Header'/> 
    </b:section> 
    <b:section id='header-right' showaddelement='yes'/>
    <div style='clear: both;'/>

You now have two sections in the header, the section with the existing blog title on top and the new section below it.

 

2. Styling the section (in CSS)

Position the sections side by side, by floating the section containing the blog title to the left,  and the new section to the right.

To achieve that,

  1. Locate this line of code (you are still on Template > Edit HTML page):

    ]]></b:skin>

  2. Add the following CSS code right before (on top of) the line.
    #header, body#layout #header {width:50%;display:inline-block;float:left;}
    #header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}
    #header-right .widget {margin:0;}

3. Installing the widget

Now it is time to add the banner, search box, Adsense ad unit or whatever. Do as you’d normally do when you want to install a widget,

  1. Go to Layout page.
  2. Click the new Add A Gadget link and add your widget.
    split header Note: The header wireframes may not appear side by side for Designer templates, nevertheless they should show up just fine on your blog.
  3. Save and view your blog.

4. Fine-adjusting the position

If the added widget shows up under the blog title (instead of on the same level, on it’s right), go back to the CSS code in step 2.2.

Change header(code line 1) and header-right (code line 2) widths. Experiment with different values until you get it right.


Enjoy!

269 comments to "Add banner, Adsense or search box in header"

«Oldest ‹Older 201 – 269 of 269 Newer› Newest»
free4articles September 14, 2011 at 5:49 PM    

I've followed the instructions from you, but why the increase below the widget? that I want the widget to be on the right, please advice .. my site www.free4artices.com

Greenlava September 15, 2011 at 12:21 AM    

@free4articles
Have you tried reducing header-right's width?

Kryn September 17, 2011 at 11:26 AM    

Thank you kindly for this tutorial. It is helpful to me and to many of us searching for the same guide.

Anonymous,  October 6, 2011 at 10:29 PM    

adding design and the style to the section is the awesome teaching that can be moderated by the blog communities!

Anonymous,  October 14, 2011 at 12:46 AM    

Thanks! Great Instructions!

Syscom Elco October 30, 2011 at 6:23 AM    

I've been struggling a lot to add a banner to my blog header, and with your great tutorial i've been able to do it in just a couple of minutes. This is a great article, and it deserves a google+ !

Janean November 3, 2011 at 2:12 PM    

please help! i have been messing around with mine for hours now, and read EVERY comment to try to fix it. I am looking to have the header and adsense share the space. it keeps staying below. thanks!
howikeepsane.blogspot.com

Greenlava November 3, 2011 at 8:27 PM    

@Janean
It looks like you've figured it out :)

Serat November 4, 2011 at 12:44 AM    

Greenlava, forgive me if I comment too long here. But your tutorial opens my eyes in a simple but enlightening way.

I spent two hours alone and forgot working on my tasks just to practice this. Repeatedly I employed the code and CSS and changed my blog template the as all my efforts were failed. And eventually I knew what's wrong with my steps. Guess what:

Step No. 4 Make sure the Expand Widget Templates checkbox is UNTICKED. U-N-T-I-C-K-E-D.

As a total newbie, I used to leave the three or four first steps in tutorials unread as they are usually 'standard': back up your template etc. But because of your present tutorial, I know now that I shouldn't have. :)

Once I edited the HTML again, this time the expand widget UNTICKED, A Gadget is ready to use although in blogger's new interface it is still under the blog title.

I haven't yet time to work on my blog 'cause I need refreshing after so many foolish reading of mine. :D

Thx,Greenlava.

PS: In case you want to check, my blog is newphonetracker.blogspot.com

Cebisan November 22, 2011 at 11:08 AM    

such a great info n wat a nice follow up. terima kasih [ thank you]. (^^)

Admin December 4, 2011 at 2:30 AM    

Thanks a lot! after some minor tweak I was able to place it right.

Movie Music Mazaa December 4, 2011 at 10:36 PM    

Thanks It worked for me

Live stream 24/7 December 8, 2011 at 1:39 PM    

How I can remove navibar from my blogger. any body can help me right now.

Greenlava December 11, 2011 at 12:56 AM    

@Live stream 24/7
Visit How to remove or restore Blogger navbar

Nirmal December 17, 2011 at 3:06 PM    

I have used this in my blog and I was successful. Thanks

joselito December 18, 2011 at 6:14 AM    

wazz up there...thanks

Anonymous,  January 4, 2012 at 7:53 PM    

Thanks mate! That was very helpful.

Arnel Cartoneros January 13, 2012 at 8:46 PM    

its a problem of the new blogger template we cannot divide the header section into 2.NO blog expert can do as of now even my master blogger

Lili,  January 24, 2012 at 3:56 AM    

Dear Greenlava,

I've tried everything I could to make this widget work, but I couldn't. I'm not the best at all these code-thing, but I understand things. However, when I put this code (exactly like how you wrote in the tutorial) to its place, blogger didn't let me save it. I really want to put something (actually a photo) to my blog. That's the situation: http://tinypic.com/r/13z95bc/5

Could you help me?
Lili

Greenlava February 1, 2012 at 1:04 AM    

@Lili
What is your blog URL?

Aimee - ItsOverflowing.com February 4, 2012 at 10:27 AM    

Does this work with the new version of simple template for blogger? I want an ad and a pic in my header. Thanks for letting me know if its worth continuing on this I've tried for an hour! My blog is www.itsoverflowing.com THnaks, Aimee

Greenlava February 5, 2012 at 1:13 AM    

@Aimee - ItsOverflowing.com
Maybe you would want to try another, easier way:
Adding widgets on both sides of Blogger header

ஆளுங்க (AALUNGA) February 7, 2012 at 3:24 AM    

Thank you!

Kulitan ng Pinoy February 18, 2012 at 6:30 PM    

wow! Thank you so much! it is working on my blog now. I've been looking to so many website but didn't help me because the tuts are very long and so confusing. Yours is very short and precise and not hard to follow. You can check my blog and see how it looks. hehehe.. Thanks so much and more power to you!!

許・美美 February 29, 2012 at 11:04 PM    

Thank you kindly! This works great~ And the fine-tuning was easy enough to do~ :3 Thanks again for the tutorial!

Sandister Tei March 23, 2012 at 9:49 PM    

Hi. How can I divide header into more than 2 parts? Thanks

Greenlava March 26, 2012 at 2:29 AM    

@Sandister Tei
Folow this tutorial: Adding widgets on both sides of Blogger header

Vande Mataram April 15, 2012 at 2:25 AM    

Not working for me, showing the right hand widget below the header widget.

www.ssbcrack.com

regards

Greenlava April 16, 2012 at 11:03 AM    

@Vande Mataram
I looks fine to me. I guess you've fixed it.

FarmVille Legends April 23, 2012 at 2:05 AM    

Wow nice tutorial, thank you so much, it worked for me..

sukrut vanani May 2, 2012 at 3:51 AM    

my banner is going below title.....tried to play with width but no luck

sukrut vanani May 2, 2012 at 6:43 PM    

sorry..i forgot to give my blog name in last comment its....

damn-topics.blogspot.com

sir..can you please help me to solve the problem..i am not able to add new widget side by side..it's coming below title,i experimented with width values but no success..:(

ODARA May 5, 2012 at 7:05 AM    

Hi Greenlava,

I'm having trouble adjusting the banner inside of my header. I added an html ad there and when I try to adjust the width it doesn't move. I'd like it to be in the top right corner of my banner. Can you let me know what I need to fix or if I installed it correctly? Here's my blog http://odara112.blogspot.com/ Thanks so much

Greenlava May 6, 2012 at 12:50 AM    

@ODARA
You have a broken CSS code due to a missing closing curly bracket. Fix this first.
Find this:
.post img {
padding:4px;
border: none;
.post blockquote {
margin:1em 20px;
}

and replace it with this:
.post img {
padding:4px;
border: none;
}
.post blockquote {
margin:1em 20px;
}

ODARA May 6, 2012 at 4:38 AM    

That fixed it!! Thank you so much ^_^ !!

korede May 11, 2012 at 4:48 AM    

thanks for this info. I wonder why blogger has restricted so many things. Are they trying to push us back to the advent of designing your website yourself before you can make a living out of the internet

Sandy May 18, 2012 at 3:53 AM    

Thank-you so much ^_^. This was very easy to follow. Though finding the </b:section part was a bit difficult since my header code was a lot bigger.

Shaun May 27, 2012 at 1:22 AM    

Hallo i have tried it again and now it works ;D
Ty for your helpful tutorials, you helped me in so many cases
TY i like your blog ;)

Best Regards

ODARA May 29, 2012 at 10:08 PM    

Hello, I have a question. If i wanted to add another widget inside my header how would I do that? Do i just duplicate the code? Here's my blog http://www.gimmethatglow.com/ I want to add a widget right underneath the "subscribe" area inside the header. I tried just adding the code underneath the ad but nothing happens.

Sam June 8, 2012 at 10:45 AM    

Thanks!!

unnama June 13, 2012 at 12:38 AM    

Hello Greenlava,

I am trying to place two widgets in the blogger header. one left to the header image and the other to right. ie, widgetLeft : HeaderImg : widgetRight

Everything looks fine in all the browsers otherthan IE, where the widgets are coming vertically under the headerImg one after tha other.I tried a lots of options adjusting the widths and going thru lots of sites like you mentioned in #240.. but no luck. If would be great if you could take a look.

http://smart-buddy.blogspot.com/

Greenlava June 13, 2012 at 11:50 PM    

@unnama
Try another method, see reply #240.

Khai AngeL July 16, 2012 at 2:34 PM    

Thanks a lot for the code.. i got mine work fine after reading the whole tutorials + comments..

took me like 1 hour or so q.q

www.khaiangel.com

jewel July 16, 2012 at 8:17 PM    

Thanks for share easy tutorial. i will try now in my blog.I all ready subscribed me in your blog for subscribe. Hope you continue posting such good tutorials.

vinod July 24, 2012 at 7:40 PM    

Adjusting 2.2 Code has done the Trick :) thanks for the awesome tutorial exactly what i was looking :)

belajar July 29, 2012 at 6:27 PM    

thanks for your tutorial..

J C August 28, 2012 at 11:49 AM    

Great ! Thanks a lot

Ipsita Sahoo September 24, 2012 at 8:04 PM    

I was exactly looking for this. Finally found this. Now i can easily add a search box in the space created

davis ka October 5, 2012 at 5:05 PM    

I was exactly looking for this thank you

Shooting Tomatoes October 5, 2012 at 8:16 PM    

awesome, thank you very much!

PRADESH K October 29, 2012 at 10:03 PM    

thanks & super for your tips

Travel With Katharine November 2, 2012 at 1:47 AM    

I've been looking all over for a instructions on how to do this. Thank you so much! Very helpful.

IpohMari November 16, 2012 at 12:18 AM    

thanks for sharing! great tutorials!

Anonymous,  December 1, 2012 at 12:28 PM    

Awsome thank you so much, i have been looking for this for a long time thank you again and wish you all the best :)

B A Thakor December 9, 2012 at 6:43 AM    

I PUT IT IN MY BLOG AND IT'S WORKING NICE.
Thanks a lot for this tutorial,
But I have a problem in my layout. In my header i can see " add a gadget" tab but I lost my " header title gadget " from my layout.

Gabriel Brezoiu December 29, 2012 at 7:24 PM    

Thanks a lot!

badal January 6, 2013 at 4:26 PM    

nice post!

Muzhafar A.Z January 20, 2013 at 3:21 PM    

Thanks a lot.. it's work.. done!.. i just change..
#header-right, body#layout #header-right
width to 470px and padding to 7px.. fits with my page header.

Gagan Masoun January 22, 2013 at 2:41 AM    

Your blog is a number 1 place to find anything related to blogging. You are just awesome man..@!!

encikarman,  March 12, 2013 at 6:55 PM    

hi bro,
I tried to install the widget, but the right header section comes below the title image.

try byk kali uboh padding, do jadi jugok. lagu mano nih?
tolong skit
http://ohmysukan.blogspot.com/

Greenlava March 12, 2013 at 7:51 PM    

@encikarman
Kecilkan skit lebar #header tu, cuba try test tengok width:45% jadi ko dok. Kalu tok jadi kkecik skit lagi.

Anonymous,  March 27, 2013 at 12:54 AM    

Sir i follow your instructions 100% but still banner is showing below the blog title . i also change header widths but nothing happens . please tell me any other method to fix it .

Jacqueline April 7, 2013 at 11:41 PM    

Thank you so much for another awesome tutorial, Greenlava! Worked like a charm for me. I've split my header into 2 sections and I'm extremely joyous and grateful for your help.
One question though... how to add a gadget container ABOVE the blog's header? You have a tutorial for a section below the header but none (am I right?) for the section above. Any help will be very appreciated. God bless!

elisa hunt April 10, 2013 at 6:54 AM    

I tried this and it worked great!! i have NO knowledge of HTML codes but this was a great tutorial. I even worked out how to move it more to the right with altering the width.
The only thing i found hard was finding the area of html where i needed to enter the code.
A quick google search told me to hit command F and enter it into the box.
Thanks for our hard work!

Jack Martin April 11, 2013 at 1:29 PM    

Thank You so much! I successfully managed to put a search bos on the left side of my blog. To put the box lower than the original position I just used
tags.

Jack Martin April 14, 2013 at 3:06 PM    

Thi was the only method that I found which worked. Thank you. Now I have put a search box in the header of my blog. It adds to attractiveness and also saves space for other widgets! :)

JNUEEQP June 30, 2013 at 5:44 PM    

Thank you so much dear :-)

smart October 19, 2013 at 3:21 PM    

thanks for the info it helps

«Oldest ‹Older 201 – 269 of 269 Newer› Newest»
Click to go to top Click to comment