How to Add Widgets to Your Blogger Header’s Sides

How to Add Widgets to Your Blogger Header’s Sides

     

Many Blogger users wonder if they can add widgets in the header area to enhance the look of their blog site. You can actually create a free blog out of it Well you can also, thanks to this tutorial by Greenlava.

                                

·         Unlock Header section

Blogger, by default, only allows one widget on the header. It is locked, which is why you can’t add more widgets there in the Page Elements or Layout for those who are using the new interface.

You can unlock it with this step:

Go to Design > Edit HTML. (for old interface users)

Go to Template> Edit HTML. (for new interface users)          

Find this code below:        

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> Then change it with this one:

     

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

The new code removes the count limit of the widget and adds the Add-A-Gadget link in that section.

·         Add the widgets and get IDs

Go to Page Elements then add your widgets through the Add-A-Gadget. You can arrange it to wherever you want it to appear on your blog site. Topmost widget will appear farthest to the left while bottommost widget will appear farthest to the right.

Save the widgets and check their IDs. Knowing the IDs will get you to address the widgets individually when you want to style them.

      Add the CSS code

After adding the widgets, they are still stacked on top of each other. This will help you relocate them around the header area.

Reminder: The horizontal layout will not be reflected in the Page Elements.

Go to Template Designer > Advanced > Add CSS (for old interface users)

Go to Template > Customize > Advanced > Ass CSS (for new interface users)

Copy  the code below:               

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

}

Then paste it before             

]]></b:skin> in Edit HTML.

Replace the widget ID with the ones you got in the earlier step. You can set any values to the width as long as the sum of all widths, borders, paddings, and margins of the widgets don’t exceed to the number of width of the header. If it exceeds the header width, the widget at the rightmost area will be pushed below the rest.

While you adjust your widget sizes and locations, preview them first so the widgets align properly.

Click Apply To Blog when you are finished.

 

MARVIN BEA is a blogger, webmaster and musician from the Philippines. His interests include arts, photography, travel, fitness and health.