Making a 3-Column Template and More ...

>> Browse templatesMoney tips14 comments

Blogger Template Design: Tutorial 10

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.

14 comments:

Balázs November 16, 2007 1:51 pm  

Hi, it's a great tutorial, but I still don't understand how you created & uploaded the pages that are linked under the "guides" section.

Balázs November 17, 2007 12:39 am  

OK, I realized it's a simple linklist...

David Siregar May 25, 2008 2:29 am  

fahi, artikel kamu sangat membantu, apalagi buat aku yang pemula, tahnks

Yopi Bramiana Arts August 21, 2008 7:08 am  

Halo, really need help untuk paste code adsense dong... where to paste the code. plaese and many thanks dude

IMS October 01, 2008 2:19 pm  

Good tutorial, well explained.
To move one step further, I saw some template with 4 125 x 125 ads at sidebar, I just wonder how we can do it. A new tutorial on this will be grateful.

SoHo Meets SoLo October 10, 2008 9:18 am  

Hi! I'm using the "Columnus" template & I'd really like to move sidebar1 to the left of the blog posts. I've read the instructions but can't seem to find what I need to move it. Any suggestions?

Thanks in advance!

noor hasmah bte selamat April 23, 2009 4:05 am  

sir,

icant add another side bar.after i followed your instructions they will said:

We were unable to save your template
Please correct the error below, and submit your template again.
More than one section was found with id: sidebar. Section IDs should be unique.

Shana. June 12, 2009 3:06 pm  

I was able to add a second column just fine... but no matter where i put the code it always goes out to the far left.

I would like one column on the right and one on the left with the posts inbetween. I'm using the Blogger Template Style Name: Minima Black

any suggestions??

evenstrums June 25, 2009 8:51 am  

Shana, you can go here and set your Minima per your needs.

http://bguide.blogspot.com/2008/03/3-columns-minima-left-and-right.html

(pardon me, if this feedback dupes!)

evenstrums June 25, 2009 9:02 am  

Great tutorial. Easily grasped and understood. Kudos for making it un-complicated as it seems to be.

Now, I'm quite interested and very curious on how to make those extra footerbars at the bottom of the template (those 2 or 3 footers that are shown at the bottom of the template.)

Also, those extra boxes above or in-between sidebars on either side of the main content.

Thanks!

Dapur tutorial March 09, 2012 11:10 pm  

wow cool. thank's for Tutorial.

Angel Villa October 20, 2012 6:56 am  

Hi. This's such a helpful tutorial however, I don't get the sidebar part. Based on the template I downloaded from your site, everytime I paste the code for the 2 columns only, it doesn't work.
Iwould really appreciate it if you reply. thank you.

Zheng junxai5 July 20, 2015 12:55 am  

2015-07-20 zhengjx
tn pas cher
nike blazer pas cher
prada shoes
gucci belt
fitflops
michael kors handbags
chanel handbags
true religion sale
true religion outlet
coach outlet store online
ray ban sunglasses
burberry handbags
nike air force pas cher
cheap oakley sunglasses
ray ban outlet
true religion
fitflops shoes
ed hardy clothing outlet
polo ralph lauren uk
tory burch outlet online
jorda femme pas cher
gucci sito ufficiale
cheap oakley sunglasses
coach outlet
soccer outlet
oakley store
michael kors handbags
pandora bracelets
nike pas cher
gucci bags
michael kors bags
christian louboutin shoes
pandora jewelry stores
michael kors purse
replica watches for sale
oakley sunglasses
air jordan uk
kate spade
michael kors watches
mcm bags

Meiqing Xu September 01, 2015 8:33 pm  

1592meiqing
hollister,hollister co,hollister jeans,hollister.com,hollister ca,hollister clothing
oakley sunglasses
michael kors outlet
nfl jerseys
michael kors
true religion
michael kors
louis vuitton outlet
hollister co
michael kors outlet
oakley sunglasses wholesale
oakley vault
ugg australia
cheap uggs
coach outlet
rolex watches outlet
hermes birkin bag
louis vuitton outlet
toms shoes
fitflops clearance
louis vuitton
coach factory outlet
michael kors handbags
nike trainers uk
mont blanc pens
kate spade handbags
celine outlet
michael kors handbags
coach factory outlet
coach outlet