How to Add Widget Section Above the Post in Blogger

How to Add Widget Section Above the Post in Blogger

The codes and process is almost the same if you want to add one, two or more widget section. For this;

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

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

3. Paste you new b:section code just before it. Like this:-

   <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;'/>
   <b:section class="main" id="main" showaddelement="no">...</b:section>

4. Click save template.

Here also if you want to add two widgets section side by side just above the post widget; then follow the instructions below;

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

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

2. Search for ]]></b:skin> in the template editor and add the CSS code below just before it for displaying them side by side. You can also add this in a style tag in your template too.

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

3. Save the template.

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