Adding New (Add a Gadget) Widget Section in Blogger Layout

How To Add New Gadget Container Section in Blogger Layout?

Hello Friends we are back with another easy tutorial post requested by one of our user. In This post we will teach you to add a widget container in the layout. With this two lines of codes you can add any widget in the section. You can add anywhere you like as per your choice.

Lets start adding the widget container to the existing template. Blogger Uses Sections in the theme to build the layout. This section is similar to HTML5 Section but blogger uses it's own name for the section Sections makes the layout of the webpage this are the areas like of your page, such as a sidebar, footer, separate advertisement section etc

Each Section in blogger theme has opening and closing tags A Section can contains only widgets To insert extra code within a section, split the section into two or more new sections and then you can add custom HTML And JavaScript Widget.

Section Attributes Table (Understand Blogger Section)

Section Attributes (<b:section>)
id	(Required) Same as HTML ID. A unique name, with letters and numbers only
class	(Optional) Common class names are “navbar,” “header,” “main,” “sidebar,” and “footer.” If you change themes later, these names help Blogger determine how to transfer your content.
maxwidgets	(Optional) The maximum number of widgets to allow in this section. If you don't specify a limit, there won't be one.
showaddelement	(Optional) Can be “yes” or “no,” with “yes” as the default. This determines whether the Page Elements tab will show the 'Add a Page Element' link in this section.
growth	(Optional) Can be 'horizontal' or 'vertical,' with 'vertical' as the default. This determines whether widgets within this section are arranged side-by-side or stacked.

Source: https://support.google.com/blogger/answer/46888?hl=en

Adding (Add a Gadget) Widget Section in Blogger Layout:

STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard

STEP 2: In The Left Side Bar You will find Template Section as highlighted in the image above Click on Template.

STEP 3: Click On Edit HTML.

STEP 4:  After Clicking on Edit HTML Now Search for your preferred location where you want the widget area to 
show in the site.

STEP 5:  Copy This Below Code at your desired location for example: If you want to add footer or header or seperate section

<div class="ABT_Gadgets_Section">

<b:section id='ABT_Gadget_Section' class='ABT_Your_Gadget_Class'></b:section>

</div>

Customization:

• The Orange Highlighted Text is for the ID Of the Section You can Use Anything you want but should be unique refer the table above. If you don't want to touch it then keep as it is.
• The Yellow Highlighted Text is for Class of the Section This is optional but it can help blogger to recognize the content in the section refer the table above to know more And If you don't want to touch it then keep as it is.

Hide Add a Gadget Link in the Layout:

If you don't want your section to allow other widgets any more then you should add this attribute to your section showaddelement="no"

<div class="ABT_Gadgets_Section">

<b:section id='ABT_Gadget_Section' class='ABT_Your_Gadget_Class' showaddelement="no"></b:section>

</div>

In future if you want to allow more widgets to the section and enable the Add a gadget link in the layout then just change the text in green color from no to yes or remove the green text completely.

Limit The Number of Widgets in the Section:

If you are using the section for Advertisement then you need only
one widget for Ad Code then you can use this maxwidgets="1"
in you section code

<div class="ABT_Gadgets_Section">

<b:section id='ABT_Gadget_Section' class='ABT_Your_Gadget_Class' showaddelement="yes" maxwidgets="1"></b:section>

</div>

Change the Light Blue text To Any number you like. By default we added maximum 1 widget in the section.

Styling The Section:

• You can also change the width and height of the section to fit to your template if you are using it in the complex locations like two sections side by side or 3 columns footer etc.
• You can also style the headings of the widgets inside the section.
• You just need the Id or class to Style the Section in CSS. 

Conclusion:

So We have added the section in the template finally Now After reading this post we know what section meant in blogger and how to use it in the template. 

If you want any customization or styling to the section then feel free to contact us we will try to help you.

That's It Thanks For Following our Tutorial '' Adding New (Add a Gadget) Widget Section in Blogger Layout  '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.

SHARE THIS