How to Add a gadget/widget section in the header of Blogger

How to Add a gadget/widget section in the header of Blogger

One of the great places to add ads or a search box is at the right side of your blog’s logo or name. For this, you will need to add a new gadget/widget section in the Blogger template.

For this follow the instructions below;

1. In the template look for this code;

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

2. Just after closing <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> paste the following b:section tag like this;

   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='blog demo blogger (Header)' type='Header'>...</b:widget>
   </b:section><b:section class='header-right' id='header-right' showaddelement='yes'/>
   <div style='clear: both;'/>

3. Now search for ]]></b:skin> in the template and add the below CSS code just before it. You can also add this in a style tag in your template too.

   #header {width:50%;display:inline-block;float:left;}
   #header-right{width:40%;display:inline-block;float:right;}

4. After this click ‘Save template’.

Adjust the widths in the CSS code according to your blog’s style and layout. Remember the main code for adding a new gadget/widget section is one that is given at the top. All you need to do is find where you want to add this code and how you want to customize it.