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