How to Add Widget Section Below the Post in Blogger

How to Add Widget Section Below the Post in Blogger

It’s great if you have a separate widget section just below or above the post widget in Blogger. After backing up your template;

1. Go to Blogger dashboard > Template > click ‘Edit HTML’.
2. Look for the following code;

   <b:section class='main' id='main' showaddelement='yes'>

3. Just after closing the b:section main paste your new widget section codes like this;

   <b:section class='main' id='main' showaddelement='no'>
   <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>...
   </b:widget>
   </b:section>
   <b:section class='main-bottom' id='main-bottom' showaddelement='yes'/>

4. Click ‘Save template’.

If you want to add two widgets or section side by side then follow the instructions below;

1. At the step-3 in the above instructions paste two b:section tag like this;

   <b:section class='main' id='main' showaddelement='no'>
   <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>...</b:widget>
   </b:section>
   <b:section class='main-bottom-left' id='main-bottom-left' showaddelement='yes'/>
   <b:section class='main-bottom-right' id='main-bottom-right' showaddelement='yes'/>
   <div style='clear: both;'/>

2. Search for ]]></b:skin> in the template editor and Add following CSS code for displaying them side by side. Also, ou can add this in a style tag in your template too.

   #main-bottom-left {width:48%;float:left;display:inline;}
   #main-bottom-right {width:48%;float:right;display:inline;}

3. Save the template.

Change the width in the CSS code until you get it right according to your template.