Tutorial 9 MORE EXPLANATION ABOUT THE BODY CODE

MORE EXPLANATION ABOUT THE BODY CODE
Blogger Template Design: Tutorial 9
 Tutorial 8: The Body Section of the Blogger Template Code
 Tutorial 10: Making a 3-Column Template and More ...
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:
<>
< id="'outer-wrapper'">

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

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

< id="'content-wrapper'">

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

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

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

< /div>

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

< /div>

< /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 classcommand 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 themain-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'. Themaxwidgets='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 theHeader. 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.

Anda Sudah Baca Yang Ini? :