Search This Blog

Monday, November 12, 2018

How to Add a gadget/widget section inside 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='i88.ca (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’.