Making a 3-Column Template and More ...

>> Browse templatesMoney tips74 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'/>

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

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

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

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

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

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

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.


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

Anonymous November 17, 2007 12:39 am  

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

Anonymous May 25, 2008 2:29 am  

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

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

Laila 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  


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.

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

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


Unknown March 09, 2012 11:10 pm  

wow cool. thank's for Tutorial.

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

Unknown July 20, 2015 12:55 am  

2015-07-20 zhengjx
tn pas cher
nike blazer pas cher
prada shoes
gucci belt
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

Unknown September 01, 2015 8:33 pm  

hollister,hollister co,hollister jeans,,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

Unknown November 30, 2016 12:27 am  

versace shoes
michael kors handbags
michael kors outlet
fitflops sale clearance
oakley sunglasses
colts jerseys
cheap nba jerseys
fitflops shoes
michael kors outlet online
asics shoes

raybanoutlet001 January 19, 2018 6:07 pm  

coach outlet online
coach factory outlet
true religion outlet
uggs outlet
clippers jersey for sale
coach outlet store online
oklahoma city thunder jerseys
dolphins jerseys
baltimore ravens jerseys
coach outlet

miki August 13, 2018 11:20 pm  

0814jejePeut-être que chaussure nike air pegasus 83 c'est le moment où Nike va identifier une chaussure de signature asics gel noosa tri 9 youth pour lui. Donc, ne jamais oublier de saisir les air jordan pour femme pas cher codes de réduction et les codes promo de Metropolis chaussure nike presto grise Discovery pour juste une excursion douce et incroyable chaussures nike cortez femme à Paris. Certains avec les étiquettes qui sont disponibles jordan homme nike sont Air Max 2011, Air Max 2009, Air Max acheter new balance france 90, Air Max 95, Air Max 24-7, Air cortez nike blanche femme Max 87, Air Max vent arrière et même Air Max 2012 printemps. basket nike roshe run bordeaux femme

abcfu September 14, 2018 11:48 pm  

0914jejeprada shoes
moncler outlet
christian louboutin outlet
nike shoes
hugo boss
converse trainer
jordan shoes
pandora outlet
coach outlet
asics shoes
true religion jeans
ugg boots clearance
christian louboutin outlet
golden goose

raj September 28, 2018 3:51 am  

Great work....I like it.

New Year 2019

Rehan January 31, 2019 11:19 pm  

Perfect template, thanks for sharing this idea.
Gud Mrng Images

Unknown February 21, 2019 4:44 am  

Perfect template, thanks for sharing this idea. here you can get more intreesting blog posts
click here

Unknown February 28, 2019 9:45 am  

Perfect post
Holi SMS 2019

Tumse March 08, 2019 1:17 am  

Awesome blogs really like it keep us updated by the same Also do check out mu blog as well from here English composition examples Its awesome your might like it if you do so drop a comment and let me know :)

Rabi March 11, 2019 10:59 pm  

Good tutorial, well explained.Keep sharing such informative articles. Video Marketing

Punith March 11, 2019 11:24 pm  

Nice explanation. Such a useful article. Also check out how to make Businessvideo production

Unknown March 18, 2019 3:22 am  

Nice Article.Awesome article and attractive post.Nice information an Effective posts.
this is a very helpful here

Rana March 19, 2019 11:57 pm  

really great post admin thanks for this post.
imo pc download
kinemaster for windows
jio tv for pc windows
mini militia apk old version
PUBG Mobile Lag Fix
icsee for windows
soul knight codes 2019
Love Nikki codes 2019
google duo for jio
duo for pc

tom March 23, 2019 1:01 am  

Download Mx Player . Free and safe download. Download the latest version of the top software, games, programs and apps in 2018.

Mx Player ,
Download Mx Player for pc ,
Mx Player for blackberry ,
Mx Player for Mac ,
Mx Player apk Download ,
Mx Player for wp,
Mx Player for pc download,
Mx Player pro apk download,
Mx Player for windowsphone,
mx player codec,
mx player codec armv7 neon,
MX Player for Chromecast
MX Player for tizen ,
MX Player for firestick ,,
download mx player for pc,
mx player for windows 7,
mx player download for windows 7 ,
mx player download for windows 8,
mx player for windows 7 32 bit free download,
best android video player,
mx player ac3,
mx player windows,
mx player for windows 8,
mx player free download for pc,
mx player old version,
pubg for pc

tom March 23, 2019 1:04 am  

Imo for PC is a free chat & instant messaging application which allows users to participate in video calls while sending and receiving text messages.
As this program is completely free to download, it can be a welcome alternative. ... Imo is also available for Android and for iPhone.

imo apk
imo for pc
imo for pc download
imo for mac
imo for blackberry
imo for windows 10
imo for apk
imo for chrome
imo for ios
imo web
imo login
imo beta online
imo for windows phone
imo for jio phone
imo for laptop
imo for android

admin March 25, 2019 4:12 am  

Kingroot for PC
Kingroot apk
Kingroot for ios
Kingroot alternatives
Kingroot for mac
Kingroot 4.0 apk download
Kingroot for marshmallow apk download
Kingroot apk for lollipop
Kingroot for samsung galaxy
Kingoroot for pc
Kingoroot apk
Kingoroot for ios
Kingroot old version
Kingroot for PC windows

Unknown March 31, 2019 1:35 am  

Thank you for the good writeup. It in fact was a amusement account it.Look advanced to more added agreeable from you! However, how can we communicate?
Breakup Status

Unknown March 31, 2019 10:52 pm  

Hello there, just became alert to your blog through Google, and found that it is really informative.I’m gonna watch out for brussels. I’ll appreciate if you continue this in future.A lot of people will be benefited from your writing.Cheers!
VTU Results

Unknown April 03, 2019 8:31 am  

Quality content is the secret to be a focus for the people to pay a quick visit the web page, that’s what this site is providing.
VTU Question Papers

Anonymous April 04, 2019 3:21 am  

Cara Melepas IC HP
Kode Rahasia
Service LCD
Komponen HP
Harga HP Android
Download SPD Spreadtrum

Anonymous April 04, 2019 3:29 am  

Factory Wipe Data
Service Center Samsung
Service Center Sony
Service Center Lenovo
Service Center Asus
Service Center Indonesia
Service LCD
Service iPhone

Anonymous April 04, 2019 3:39 am  

Memory Card
Konektor Charger
Firmware Android
Imei Null
Octoplus Samsung
Cara Baca Skema HP
Cara Flash HP

Anonymous April 04, 2019 4:45 am  

Cara Menghidupkan HP Mati Total Baterai Tanam
Baterai Tanam
Biaya Servis HP

Anonymous April 04, 2019 4:57 am  

Hard Reset
Imei Null Invalid
Volume HP
Buku Servis HP
Download SP Flash Tool

letsdothis April 12, 2019 6:11 am  

Modern Strike Online Mod Apk
THE PREMIER Real racing 3 mod Apk all cars unlocked download EXPERIENCEPowered by the remarkable Mint ™ 3 Engine, Real Racing 3 attributes detailed auto damages, completely functioning back view mirrors, and also vibrant reflections for truly HD auto racing. Take pleasure in a rich, next-gen game with one of the most innovative cross-platform social as well as competitive auto racing area ever before. Real Competing 3 provides all of it as well as presses the boundaries with every update.Real Racing 3 Mod Apk

หมูอวกาศ April 16, 2019 1:44 am  

โปรโมชั่นGclub ของทางทีมงานตอนนี้แจกฟรีโบนัส 50%
เพียงแค่คุณสมัคร Gclub กับทางทีมงานของเราเพียงเท่านั้น
สมัครสมาชิกที่นี่ >>> Gclub online

เพิ่มเงิน April 16, 2019 1:46 am  

เว็บไซต์คาสิโนออนไลน์ที่ได้คุณภาพอับดับ 1 ของประเทศ
เป็นเว็บไซต์การพนันออนไลน์ที่มีคนมา สมัคร Gclub Royal1688
และยังมีเกมส์สล็อตออนไลน์ 1688 slot อีกมากมายให้คุณได้ลอง
สมัครสมาชิกที่นี่ >>> Gclub Royal1688

datxoichecom April 19, 2019 6:26 pm  

datxoichecom April 30, 2019 2:38 am  

Thanks. Useful information and very inspiring.


Samira June 15, 2019 1:57 am  

Good Post.Checkout what is the best hoverboard to buy

Golden Slot Game June 17, 2019 2:13 am  

golden slot

jiowick June 24, 2019 3:41 am  

JioTV for PC
JioTV for PC
JioTV APK Download
Jio Cinema for PC
JioTV for Android TV

jacklinemelda August 29, 2019 5:15 am  

We are the best writing company providing Legitiate Custom Research Papers Services papers in discourse chapters. Some students have the expertise required to complete a disquisition but result to seeking Buy Research Paper for Nursing Help.

rohit008 September 29, 2019 5:13 am  

Amazing!!! I like this website so much it’s really awesome. I have also gone through your other posts too and they are also very much appreciate able and I’m just waiting for your next update to come as I like all your posts…

Happy Birthday Images
Happy Birthday Quotes
Happy Birthday Pictures
Happy Birthday Photos
Happy Bday Images

Florahmelda November 13, 2019 1:27 am  

Whether the Descriptive Essay Paper focuses on a single subject or compares two approaches, our Descriptive Essay Writing Service comes in with Unique Descriptive Essay Writing Format to complete the homework.

Legitimate Custom Research Paper Services November 20, 2019 5:23 am  

When deciding on the best Cheap Research Paper Services company you should consider Legitimate Custom Research Paper Service company to handle all your Custom Research Paper Services in USA.

myslot December 05, 2019 4:25 am  

ที่หนึ่งของเกมสล็อต xo ต้องสล็อตออนไลน์ slotxo ที่นี่

เล่นสล็อตxo ฟรีๆแบบได้เงินจริงเล่น slotxo ฟรีเครดิต

parks December 10, 2019 3:21 am  

Great article. This blog is filled with unique and high-quality articles.
KineMaster for pc
KineMaster for PC download
JioTV for PC
KineMaster for PC
JioTV for PC
JioTV for PC Download

ali December 23, 2019 5:08 pm  

دانلود آهنگ جدید
دانلود آهنگ جدید

mhoodang January 10, 2020 12:54 am  

เล่นง่ายได้เยอะ สล็อต joker แจกเครดิตฟรี slot online ที่นี่คลิก

hotel reservation January 15, 2020 5:07 am  

Toranj Hotel Kish is the perfect destination for leisure travelers. Clean and comfortable. Booking one of the best hotel in Kish island Now for up to 63% off

Daily Image Funda March 03, 2020 7:21 am  

Everything is very interesting to learn and easy to understand. Thank you for giving information

Best of Happy Birthday of Images

Dr. Smilez Dental Center March 05, 2020 3:52 am  

Dr Smilez provides solutions for all the dental problems. Visit Dr Smilez for any Dental Problems

Straighten teeth without Braces
Get Rid Of Black Spots on Teeth
Importance of clove for teeth
Best Places for Dental Tourism
Importance of brushing teeth
Best way to Restoring a Decayed Baby Tooth

snapseedforpc March 08, 2020 1:30 am  

its a wonderful post admin

JioTv for PC

JioTv for PC
Snapseed for pc online
Snapseed for mac
zapya for pc
JioTv for windows
JioTv for android

iran music March 15, 2020 5:44 am  

This is a great article thank you
Thankful داب موزیک

iran music March 15, 2020 6:21 am  

This is a great article thank you
Thankful Download Song

Night_Stalker March 16, 2020 12:16 pm  

very nice Blog.thanks for sharing this article! Great Post.بلیط - خرید بلیط هواپیما تیک بان - خرید بلیط اتوبوس - خرید بلیط قطار - چارتر

David Fincher March 21, 2020 1:21 pm  

Thank you for the good writeup. It in fact was a amusement account it.Look advanced to more added agreeable from you! However, how can we communicate?

iran music March 22, 2020 2:31 am  

دانلود آهنگ شاد

دانلود آهنگ جدید

آهنگ مهراب

myslot March 24, 2020 9:07 am  

หนัง The Odd Family Zombie On Sale หนังออนไลน์สนุกๆ ดูหนังเรื่องนี้ได้เลยที่เว็บดูหนังออนไลน์

Darren Demers April 07, 2020 12:54 am  

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. vintage pendant necklace , handmade dress shoes , pakistani anklets , embroidered potli bags , black embroidered belt , best women's belts for jeans , belts for your boots , latest gold bangles design

Amanda April 12, 2020 2:44 am  

دانلود آهنگ جدید

دانلود آهنگ جدید

دانلود فیلم

ehsan April 13, 2020 7:23 am  

دانلود آهنگ داریوش

98i90 April 26, 2020 4:43 am  

its very interesting ^.^
دانلود آهنگ
دانلود نوحه
آهنگ بی کلام

نیکی ایرانی April 26, 2020 10:43 am  

دانلود سریال

pavankumar May 08, 2020 5:29 am  

Awesome blog post. Wattpad Download for PC

sare May 15, 2020 1:57 am  

เกมเล่นสนุกๆ สล็อตออนไลน์ เล่นง่ายๆ เล่นสล็อต slotxo ฟรีเครดิต ได้เงินจริง เล่นเลยที่นี่ คลิกเลย

sare May 15, 2020 2:19 am  

สล็อตออนไลน์ เล่นง่ายๆ เล่นสล็อต slotxo ฟรีเครดิต ได้เงินจริง เล่นเลยที่นี่

sara May 15, 2020 3:45 am  

دانلود آهنگ محسن چاوشی طاق ثریا

دانلود آهنگ احمد سلو استرس دارم

Florahmelda May 19, 2020 11:12 pm  

Personal statement & editing services have become very popular for students searching for college admission writing services as they engage the best online Personal Statement Writing Services.