Scribd
Upload
346 views

Back Up Your Template: View Source Print ?

This document provides instructions for adding a new section in Blogger to use as a widget container. It describes how to insert section tags in the HTML template to create a new section, and then shows an example of adding a section below the header to contain horizontal navigation tabs. Styling can then be added to the new section using CSS.

Uploaded by

ediputra482571
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
346 views

Back Up Your Template: View Source Print ?

This document provides instructions for adding a new section in Blogger to use as a widget container. It describes how to insert section tags in the HTML template to create a new section, and then shows an example of adding a section below the header to contain horizontal navigation tabs. Styling can then be added to the new section using CSS.

Uploaded by

ediputra482571
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

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 doesnt 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:
view sourceprint?
1 <!-- New widgets container Start -->
2 <b:section class='NewContainer' id='NewC
ontainer'/>
3 <!-- 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:
1<div id='header-wrapper'>
<b:section class='header' id=
'header' maxwidgets='1'showad
delement='no'>
3 <b:widget id='Header1' locked='true' title=Your Blog
Title(Header)' type='Header'/>
4 </b:section>
5

6.

</div>

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

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

10.

Click Save Template.

11.
Go to Design > Page Elements to view the result. You should see a newly
added section under the header.

12.

Now you can add all the widgets you want into the new container.

13.

To style the section, you simply add a styling rule in CSS, like this:
view sourceprint?
1 #NewContainer {
/* add styling
2 declarations here
*/
3

14.

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


Thats it, enjoy!

<!-- New widgets container Start -->


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

<div id='headerwrapper'>
2 <b:section class='header' id='header' maxwidgets
='1'showaddelement='no'>
3 <b:widget id='Header1' locked='true' title=Your
Blog Title(Header)' type='Header'/>
</b:section
4
>
5 </div>
<!-- New widgets container
6
Start -->
7 <b:section class='NewContainer' id='NewCo
ntainer'/>
<!-- New widgets container
8
End -->

Gadget/Javascript
<!-- Dropdown menu Start -->
<div id="menu">
<ul class="level1">
<li class="level1-li"><a class="level1-a" href="#url">Home</a></li>
<li class="level1-li"><a class="level1-a fly" href="#url">Contact Us<!--[if
gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#url">Email</a></li>
<li><a href="#url">Telephone</a></li>
<li><a href="#url">Online Form</a></li>
<li><a href="#url">Snail Mail Address</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li"><a class="level1-a fly" href="#url">Resort<!--[if gte
IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#url">Ski Hire Facilities</a></li>
<li><a class="fly" href="#url">Main Ski Slopes<!--[if gte IE 7]><!-></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">Beginners Slopes</a></li>
<li><a href="#url">Intermediate Slopes</a></li>
<li><a class="fly" href="#url">Advanced Skill Levels<!--[if gte IE 7]><!-></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level4">
<li><a href="#url">Local</a></li>
<li><a href="#url">Nearby</a></li>
<li><a href="#url">With instructor</a></li>
<li><a href="#url">Snow boarding</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#url">Expert</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#url">Night Life</a></li>
<li><a class="fly" href="#url">Restaurants<!--[if gte IE 7]><!--></a><!--<!
[endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">Snow Hotel</a></li>
<li><a href="#url">The Snowman</a></li>
<li><a href="#url">Ice Cavern</a></li>
<li><a href="#url">Ski Inn</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a class="fly" href="#url">Car Hire<!--[if gte IE 7]><!--></a><!--<!
[endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">From Airport</a></li>
<li><a href="#url">In Resort</a></li>
<li><a href="#url">Multiple Resorts</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>


<li class="level1-li"><a class="level1-a fly" href="#url">Surrounding
Area<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#url">Where to go</a></li>
<li><a href="#url">What to do</a></li>
<li><a href="#url">Places of interest</a></li>
<li><a href="#url">National parks &amp; Museums</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li left"><a class="level1-a fly"
href="#url">Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#url">Money Exchange</a></li>
<li><a class="fly" href="#url">Resort Essential Information<!--[if gte IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">Lift Passes</a></li>
<li><a href="#url">Insurance</a></li>
<li><a class="fly" href="#url">Gear Rental<!--[if gte IE 7]><!--></a><!--<!
[endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level4">
<li><a href="#url">Boots</a></li>
<li><a href="#url">Skis</a></li>
<li><a href="#url">Ski Wear</a></li>
<li><a href="#url">Goggles</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#url">Ski Schools</a></li>
<li><a href="#url">Snow Report</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a class="fly" href="#url">Language<!--[if gte IE 7]><!--></a><!--<!
[endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">Austrian</a></li>
<li><a href="#url">German</a></li>
<li><a href="#url">French</a></li>
<li><a href="#url">English</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#url">Short Breaks</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li"><a class="level1-a" href="#url">Privacy</a></li>
</ul>
</div>
<!-- BloggerSentral.com -->
<!-- Dropdown menu End -->

<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 -->

#NewContainer {
/* add styling declarations here */
}
]]></b:skin>

You might also like