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.
page elements add container
Pin on Pinterest
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:
Go to Dashboard > Design > Edit HTML.
Back up your template.
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>
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 -->
Click Save Template.
Go to Design > Page Elements to view the result. You should see a newly added section under the header.
page elements added
Now you can add all the widgets you want into the new container.
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.
That’s it, enjoy!
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.
page elements add container
Pin on Pinterest
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:
Go to Dashboard > Design > Edit HTML.
Back up your template.
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>
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 -->
Click Save Template.
Go to Design > Page Elements to view the result. You should see a newly added section under the header.
page elements added
Now you can add all the widgets you want into the new container.
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.
That’s it, enjoy!
Written by Blogger Partner
We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.
0 comments:
Post a Comment