Adding widgets on both sides of Blogger header

This tutorial is in response to requests from readers. Some readers asked how to add a widget on each side of the header as pictured below, while others asked how to place multiple widgets on the right side of the header.

This tutorial will answer both questions. It’ll show you how to add any number of widgets into the header area, and arrange them in any way you like (as long as it’s horizontal :) ).blogger widgets on left and right sides of header

It’s an improved version of my previous tutorial on similar customization: Add banner, Adsense or search box in header, as it doesn’t require the addition of a new widget container i.e. section.


1. Unlock the header section

You probably notice that you can’t add widgets to the header section in Layout. The reason for that is because it is locked. Blogger by default limits the header section to only one widget (the header).

Fortunately we can unlock it pretty easily. Go to Template > Edit HTML > Proceed and look for this line:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

replace it with this:

<b:section class='header' id='header' maxwidgets='' showaddelement='yes'> 

What the new code does is removes the widget count limit, and adds the Add-A-Gadget link in the section.


2. Add widgets and get the IDs

Go to Layout page and add in your widgets via Add-A-Gadget. Arrange them according to how you want them to appear on the actual blog. The topmost widget here will appear farthest to the left on the blog, and the bottommost one will appear farthest to the right.

unstyled header section

Once the widgets are saved, check the widget IDs by following this tutorial: How to find Blogger a widget ID. You need to know the IDs so you can address the widgets individually when styling them in the next step.


3. Add CSS code

By now you’ve added the widgets in the header, but they are stacked on top of each other. In this step you will make the widgets appear side by side, add margins or paddings etc. Note: The horizontal layout will not be reflected in Layout page i.e. the widgets will still appear to be stacked vertically.

  1. Go to Template > Customize > Advanced > Add CSS, enter the code below and press Enter key. Or you can paste it right before ]]></b:skin> in Edit HTML.
    .header .widget  { 
    border: 1px solid; 
    display:inline-block;
    *float: left; 
    height: 200px; 
    overflow: auto; 
    margin: 10px 5px !important;
    vertical-align: top;
    }
    
    .header #Header1 { 
    width: 50%; 
    } 
    
    .header #widgetID1, .header #widgetID2 { 
    width: 20%; 
    } 
    
  2. Replace widgetID with the widget ID you get in previous step. Pay attention to the width property -you can set the widths to any values as long as the sum of all the widths, paddings, margins and borders of the widgets do not exceed the width of the header section. Otherwise the rightmost widget will be pushed below the rest of the widgets.
  3. Look at the preview pane while doing the adjustment, your goal is for the widgets to align nicely as pictured above.
  4. Click Apply To Blog button when done.

Enjoy!

37 comments to "Adding widgets on both sides of Blogger header"

MUXLIMO November 20, 2011 at 11:47 PM    

Whoa! great unique tips here! thans for sharing, Bro!

Arham Sukardi November 21, 2011 at 6:20 AM    

Thanks for sharing..
very useful

BlogBizTutor November 21, 2011 at 10:47 PM    

Like this post...
Thank you...

Anonymous,  November 22, 2011 at 1:24 AM    

I just hope bloggers would not put widgets with heavy scripts (aka bandwidth suckers) up there beside their headers. If I encounter such blogs, I would quickly leave and read some other blogs.

Redron November 22, 2011 at 10:17 AM    

How do we make the label page like your picture on right with short description

hosting reviews November 25, 2011 at 11:07 PM    

I read this article. I was very impressed by its contents.))

nicole November 26, 2011 at 9:43 PM    

i have my header and i added to pictures, but like you said.....they are one on top of another. i tried to follow your steps but it didnt work to get them all side by side....help! it's driving me insane, lol.

Greenlava November 27, 2011 at 2:41 AM    

@nicole
You forget to add in the CSS code (step 4).

Unknown November 27, 2011 at 4:58 PM    

Thanks for the great tip. I have applied it to my blog
http://frenchclassified.blogspot.com/
But when my partner looks views on her wider screen pc the widget on the left is on the top, not on the side.

Greenlava December 1, 2011 at 6:23 PM    

@Steve
You've made a mistake here:
.header #widgetIDImage9, .header #widgetIDHTML9 {
width: 20%;
}

Try this instead:
.header #Image9, .header #HTML9 {
width: 13%;
}

Unknown December 1, 2011 at 6:37 PM    

Thanks for that Greenlava.

The header is now in-line on my partners larger screen, but has just got the width and hight slide adjusters showing on the left hand gadget, which is no big deal.

Anonymous,  December 7, 2011 at 4:45 PM    

How can I get my widgetID? Sorry if I sound stupid.

Greenlava December 11, 2011 at 12:52 AM    

@Anonymous
Just click the link given in step 2.

WhenUC December 16, 2011 at 4:12 PM    

Nice topic i like its

souno April 5, 2012 at 11:59 AM    

Very cool and amazing post

Unknown April 13, 2012 at 10:56 AM    

awesome codes -- been looking for an easy one like this! However, I have a problem -- I want to add a search bar beside my header image, but the search bar ends up being placed at the top instead. How do I get it to be aligned at the bottom, beside my header image? (My header is 500px in height) Thank you!

Greenlava April 18, 2012 at 11:15 AM    

@Ru-chan
You can try replacing:
vertical-align: top;
with
vertical-align: bottom;

jazzofthufeil May 11, 2012 at 9:19 AM    

Thank You verymuch for the tutorial :)

Reetesh September 15, 2012 at 6:15 PM    

Thank you for sharing this neat trick! I got the alignment right on my blog only with some peripheral tinkering :)

One interesting observation I made is that it does not seem necessary to specify the widgetID; the template still interprets the CSS correctly...

Taste and Flavours October 6, 2012 at 4:19 PM    

Thank you so much! I'd been trying to do this for so long :)
take a look how it looks on food blog :)
www.TasteandFlavours.com

Electrician and Electrical Contractor in Toronto October 25, 2012 at 3:23 AM    

Greenlava, thank you!

Did you use the same approach to put tabs and search box on one line (on bloggersentral.com above)?

Home SEO Tools Escape Tool ... search box

I tried to put mine using this tutorial but failed

pls give codes to put tabs and search box on one line like on your blog

thx

Greenlava October 25, 2012 at 10:55 AM    

@Electrician and Electrical Contractor in Toronto
We have another tutorial for that. Please use the search box and search for "search box".

maw2214 November 13, 2012 at 9:20 PM    

good and brilliant post,,,very useful tips..keep sharing your wonderful tutorials broder..

thanks.
BLOGGER HEROE,Tips and Tricks For Blogger,widgets,Templates

Unknown January 17, 2013 at 12:47 AM    
This comment has been removed by the author.
Jo Jo February 18, 2013 at 5:10 AM    

Hi, Could you help me? In IE, the header images don't appear aligned, but in chrome, they do. http://fusianliving.com/

Jo Jo February 18, 2013 at 5:31 AM    

hi I think I have managed to fix it now.. thanks!

Frontlier February 20, 2013 at 7:07 PM    

This is very useful tutorial. I tried this and the other original one tutorial by is not working for me. I have tried this on my test blog http://cenzen.blogspot.com/(if worked thinking of using on my other main blog) but as reported before, the widgets to the right comes below the blog title.

I have read almost all comments and tried your suggestion there but still with no success. Please help me!

Greenlava February 24, 2013 at 12:26 AM    

@Jirel Lila
You have an unclosed CSS declaration group. Find these lines in your CSS:
}.post-body img, .post-body .tr-caption-container {
padding: 0px;
.header .widget {

If look carefully, there is a missing closing curly bracket "}" after "padding: 0px;". Adding the missing bracket should fix the problem.

Admin March 6, 2013 at 6:29 AM    

amazing tips!!! thank you!!! you saved my life

Lisa March 19, 2013 at 4:04 AM    

THANK YOU!

Anonymous,  May 27, 2013 at 3:19 PM    

working gr8 man

Anonymous,  May 27, 2013 at 3:19 PM    

ur trick is very usefulllllllll

Unknown June 1, 2013 at 9:36 AM    

I loved your tutorial!

I just have one question-- my header(s) seem to be very far away from the rest of my blog. Any idea how I can decrease this margin?

Thanks!

loveatourlighthouse.blogspot.com

Unknown June 1, 2013 at 10:25 AM    

Disregard my last comment. I figured it out! Thanks for the tutorial again.

Anonymous,  June 13, 2013 at 11:25 PM    

Dear bloggersentral,plz help me .I'd like to add 1 widget below my each body post .My blog which is yen sao .thanks for helping .

Greenlava June 15, 2013 at 2:31 AM    

@sao yen
Under each post on homepage? That can't be done using Blogger's gadget.
But if if it's a third party widget, you can and it direct into your template.

Anonymous,  September 12, 2013 at 4:52 PM    

Very nice. It worked for me without a problem. But you need to make some adjustments in order to fit widgets at Header section..

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.