How to add a widget to the header in blogger

Many blogger templates will have a feature that allows you to add an extra widget to the header section. The single column structure templates will not have this feature.

In this tutorial I will tell you ‘How to add a widget to the header section’ in blogger.

We have to make some simple changes to the template. Don’t worry; I will help you through this. Before making any changes “please backup your template”.

Follow these steps:

1. Log in to blogger dashboard.
2. Go to template. Click “Backup/Restore”. Click “Download full template”.
3. After downloading your template, click “Edit HTML”.
4. Search /*Header or /*-----Header (something like this).
5. Now below it add this piece of code.
.header-left{ display: inline-block; height: 35px; width: 350px; float: left; } .header-right { display:inline-block; float:right; }
6. Find <b:section class=’header’ id=’header’ maxwidgets=’1’>  and replace it with 
<b:section class='header-left crosscol' id='header' maxwidgets='2' showaddelement='yes'>
7. Now search for </header> and add the below code before the header.
<b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'> <div style='clear:both;'/>
8. Find ]]></b:skin> and before it add the following CSS code.
.header-right { display:inline-block; float:right; width:400px; }
9. Now save your template and see the layout of your template, you will find an ‘Add a Gadget’ box to the right of your header.
10. You can make changes to the font-size, width, float and other parameters according to your template.

If you have any genuine problems regarding this post please feel free to contact.

Print Page