How to add widgets on both sidesof Blogger header

Another tricks in blogging is observable in some professional blogs where there are more than one widget found in the header section. In this particular application of css codes pushed some newbe to ask how to put it in their blog header. Or 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 cater those questions. It will  show you how to add your desired number of widgets in the header area, and arrange them in such a way that it's done horizontally.

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. Please unlock the header section

Maybe you've been through a lot of testings on how to apply this trick. However you cannot add widgets to the header section in Layout because it is locked. Blogger by default limits the header section to only one widget (the header).

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

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

Replace the above code with this:

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

What the new code does, is removing 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 bottom one will appear farthest to the right.

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

Now you’ve done adding 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%;
}

1. Change the widget ID 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, padding, 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.

2. See the preview pane while doing the adjustment, your aim is for the widgets to align nicely as pictured above.

3. Click Apply To Blog button when it's done.

My gratefulness is extended to bloggersentral for the information about blogging.

Enjoy Friends!