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:
<body>
<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>
</span>
<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'/>
</b:section>
</div>
<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'/>
</b:section>
</div>
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
<!-- 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'/>
</b:section>
</div>
</div></div> <!-- end outer-wrapper -->
</body>
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 w3schools.com
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.
<body>
<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>
</span>
<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'/>
</b:section>
</div>
<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'/>
</b:section>
</div>
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
<!-- 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'/>
</b:section>
</div>
</div></div> <!-- end outer-wrapper -->
</body>
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 w3schools.com
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.
