More Explanation about the Body Code

>> Browse templatesMoney tips3 comments

Blogger Template Design: Tutorial 9

In this tutorial I'll explain a bit more about some special commands that you'll see in the Body section of the code. Here's the sample code again below:

<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>

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

<div id='content-wrapper'>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>

</div> <!-- end content-wrapper -->

<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false' title='Blogger Template | JournalBlue' type='Text'/>

</div></div> <!-- end outer-wrapper -->


By default, each container has to be wrapped with the div tag and a b:section tag. Each div and b:section is 'named' with an identifier using the id command. The can be further classified into a 'class' using the class command. This identification and classification are useful as a reference when you want to style it later using CSS. In the CSS code, the id command is referred to using the # symbol and the class command is referred to using the . symbol. For example, in the CSS code, you might see #main-wrapper {...} or .sidebar {...} which are the codes to style the main-wrapper and sidebar. You can read further about these identification and classification in

Everything wrapped inside the b:section are the widgets (also called the Page Element). For example, inside the Header is a widget named Header1. Note that this widget contains the code maxwidgets='1' showaddelement='no'. The maxwidgets='1' means that the maximum widget the header-wrapper can have is 1 only. That means you can't drag a Page Element and place it below or above the Header. The showaddelement='no' means that the Add a Page Element button will not appear in the Header section.

In the main-wrapper, you only have the showaddelement='no' code which means that you won't have the Add a Page Element button there, but you can still drag other widgets and place it above or below the Blog Posts inside the main-wrapper.

In the sidebar-wrapper, you have the preferred='yes' code. This command will create the Add a Page Element button for you to add widgets. Plus, you won't have any limitations on how many widgets you want to add. As you already know, you can always drag the widget to any other wrapper as long as they don't limit the amount of widgets to be displayed in that wrapper.

In the footer-wrapper, there's no code following the id command. This means that you won't have the Add a Page Element button but you can drag any widgets into the Footer section.

Next Tutorial:
The next tutorial will show you how to add more sidebars, e.g. to make a 3-column template, or change their locations.


Davies Hall February 07, 2013 3:08 am  

Thanks for the article. Very interesting.
more info on the site

Hafiz Tri Handoko December 03, 2014 3:04 pm  

great turorial..
ponsel windows phone terbaik
daftar harga hp terbaru
hp samsung terbaru
hp android terbaik
hp nokia murah terbaru
hp nokia terbaru

Justin June 14, 2016 2:26 am  

The west Coast has dependably been the bleeding edge, the extrasensory of what is to come and in the end be acknowledged by the whole nation. In the event that anybody was found running in New York City back then, they would have been captured for escaping the scene or some likeness thereof of a crime. Car Title Loans