Adding a section (with Add a gadget link) in Blogger layout

A  section is an area in Blogger layout that acts as a widget/gadget container. It is sometimes mistakenly addressed a page element. In Design > Page Elements tab, you can identify a section by the presence of an Add A Gadget link.

To add a widget, simply click the Add A Gadget link in your preferred location and proceed with selecting a widget. But what if your preferred location doesn’t have an Add A Gadget link? In other words there is no widget container there.

Well we can always make one, by adding a section tag in template HTML. Here is the code:

<!-- New widgets container Start -->
<b:section class='NewContainer' id='NewContainer'/>
<!-- New widgets container End -->

You are free to change the Id and class names.

In this tutorial we will add a section under the header. This is a perfect place to put horizontal navigation tabs. Here are the steps:

1. Go to Dashboard > Design > Edit HTML.
2. Back up your template.
3. Since we are placing the new section under the header, we need to find the header code:

   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title=Your Blog Title(Header)' type='Header'/>
   </b:section>
   </div>

4. Paste the section code right below the header code, like this:

   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title=Your Blog Title(Header)' type='Header'/>
   </b:section>
   </div>
   <!-- New widgets container Start -->
   <b:section class='NewContainer' id='NewContainer'/>
   <!-- New widgets container End -->

5. Click Save Template.
6. Go to Design > Page Elements to view the result. You should see a newly added section under the header.

   

7. Now you can add all the widgets you want into the new container.
8. To style the section, you simply add a styling rule in CSS, like this: 

   #NewContainer { 
   /* add styling declarations here */ 
   }

   And place it before ]]></b:skin> line in your template.

9. That’s it, enjoy!