Adding Additional Widget Section/Container in a Blogger

To Widget Section or Container is the zone at layout where we can add the widget.Sidebar is too one Widget or Section Container.It is essential to add Section in Blogger if there is not place to add Widget.Mostly 3rd party Downloaded Template lack the container but if template is awesome and it lacks container then it is better to drop it no it is better to add section or container there.Lets see how to add Section or Container in Blogger.

For adding Section or Container decide where you want to add it in Layout.Is it below the header or above the header or in footer.Today we will add Section container above the header just for example.

Section/Container Codes.

To add the section just we need to add this one line code in Blogger XML as our Wish

<!-- Container name here -->
<b:section class="SectionClass" id="SectionUniqueName" />
<!-- BloggerRounder.blogspot.com -->

In SectionClass replace with the name of container and in SectionUniqueName replace with the unique name.It should not be repeated.If you want to add more container add more section codes given unique name individually if it is repeated blogger is give error message.

Adding Section on Blogger Xml.

For Example we will add container above header for understanding.

1. Go to Blogger Dashboard>Template or Design>Edit HTML
2. Find this codes(Header Container code as we are installing container above header so we will place the section code above header container codes.)

   <div id='header-wrapper'>
       <b:section class='header' id='header' maxwidgets='1'>
   <b:widget id='Header1' locked='true' title='Blogger Rounder Test Page (Header)' type='Header'/>
   </b:section>
     </div>

3. This is header code of Blogger Rounder test page which is different from yours.
4. Where,
   • Line 2 is header container code so to add container above header just add Section/Container code which we get from above just before line 2 codes.
   • If you want to add container below header then just add the Section/Container codes below line 4.
5. Click on Save Template.
6. Go to layout there you can see a new container above or below header(Depend where you kept the section codes)
   
7. If you want to style the container for adding background,changing font etc. then just add CSS like this.

   #SectionId {
   /* CSS Codes in this lines*/
   }

8. In SectionId change it with its unique ID.Or you may find container/Section id From here.If you don’t know how to add CSS in Blogger then learn from here.
9. This was just for adding container below or above header you can add as much as container or section as your wish.

Enjoy.

Admin of Blogger Rounder
Shirshak is the Administrator of the Blogger Rounder who thinks he will die next to Blogger. He is Completely devoted to Blogger and thinks Web Designing will makes is career.You contact using contact form from navigation tab to him.You can find him in Twitter.

Subscribe for free
Thanks for visiting Blogger Rounder.We can subscribe to Blogger Rounder'^s by RSS feed or email updates.