How to customize your blogger header

Sometimes you might be interested in adding some widget on the blogger header, but due to some restrictions it is not possible in an easy way. You need to remove the restriction first and then only you will be able to customize it. Here, I am going to post the method of customizing your blogger template.

Remove the lock form the header section

You might have noticed while arranging the page items in the layout that you are not able to add widgets in the header section of the page, this is because by default this section is in locked state. For adding widgets in this area it needs to be unlocked.

To unlock this go to Design> Edit HTML and search for the below line.

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

and replace it with the below statement

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

This new code will remove the limit of widget count in the header and will add a Add A Gadget link in the section.

  

Add new widgets and get their Ids:

Now go to the page elements and add your widgets with the help of add a gadget link. Arrange them as you want them to be appeared on the blog. The widget on the top potions will be on the left and the widget on the right position will come on the right side of header.

Once you are done with this get the widget ids of the newly added widgets, In case you don't know how to check widget ids check here. Understanding widget id and Section id in blogger

Add CSS Code  For New Widgets:

Now you have added widgets in the blog header but they are coming in horizontal position one on another. Your want them to be arranged in a sequesnce in a line they you have to add some css code for this.

Go to Template > Customize > Advanced > Add CSS and add the following code.

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

}

In the above CSS code you need to replace the widget ids which you get in the previous steps. Pay attention while doing this. You can set the width as per your need as long as the sum of all the widths, padding, margins and border of widget does not exceeds the width of header. In that case the rightmost widget will be pushed below the other widgets. Arrange these items accordingly.

Check your arrangement in the preview pane, your target must be to align the widgets in a way that they must look nice on the blog.