Making a 3-Column Template and More ...

Blogger Template Design: Tutorial 10

• Tutorial 9: More Explanation about the Body Code
• Tutorial 11: Starting Your Own Blogger Template
  

One of the most basic desires after becoming a Blogger's blogger and using the standard template for a while is having the urge to find a 3-column template. So, here's a simple and straight-forward tutorial on how to do this yourself without going through too much of code tweaking.

This tutorial is prepared assuming you understand the stuff covered in Tutorial 8 and Tutorial 9, which explain the basics of the Body section of the code.

What we'll be doing to change or add sidebars is simply tweaking the XML code directly from the Blogger Edit HTML page WITHOUT turning the Expand Widget Templates on. This means that the Body section at the end of the code won't be shown cluttered with detailed algorithms for widgets and post data. It'll be as simple as it can be, which is definitely a good thing :).


Adding a Sidebar to Make a 3-column Template:

When you scroll down to the Body section, the code might have something that looks close to this example below (note that you can have slightly different variations of this code for different templates):

Example of a 2-column template:

<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='sidebar1' 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 -->

The above shows a 2-column-template code within a wrapper called the content-wrapper which contains the main-wrapper (which contains the Blog Posts) and the sidebar-wrapper.

To make another sidebar, what you need to do is simply go to the Edit HTML page and without turning on the Expand Widget Templates box, paste another block of sidebar-wrapper code (shown above in red) before or after the main-wrapper block. For example, to make the Sidebar-Main-Sidebar column, place it before the main-wrapper. Notice in the example below that the id of the 1st sidebar-wrapper is sidebar1 and the id of the 2nd one is sidebar2.

Note: You also have to make sure that the width of both Sidebars and the Main blocks will fit inside the content-wrapper and that the CSS code is properly written for the Sidebars to lay next to each other. Some common mistakes are that one or both Sidebars will fall below the Main block.

Example of a 3-column S-M-S template:

<div id='content-wrapper'>

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

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


Changing the Sidebar Location:

If you want to change a sidebar location to make a 3-column template with a configuration of Main-Sidebar-Sidebar for example, what you need to do is place the sidebar-wrapper block where you want it to appear.

To do this, simply go to the Edit HTML page and without turning on the Expand Widget Templates box, cut the 1st sidebar-wrapper code and paste it in between the main-wrapper and sidebar2 blocks. See the sample code below:

Example of a 3-column M-S-S template:

<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='sidebar1' preferred='yes'>
</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 -->

Now you basically know how to add or change sidebar locations. They're that simple!

***************************************
Next Tutorial:
The next tutorial is on how to start your own Blogger template.

 Subscribe