Adding a column (sidebar) to Blogger template

In this tutorial we will attempt to create an additional column or sidebar to Minima Blogger template layout. We will add an exact copy of the existing sidebar (in pink). The main column, which contains post area will be left intact.

As you can see in the layout, header, main and sidebar wrapper are elements contained inside outer-wrapper. In order to add a sidebar, you have to increase the outer-wrapper width to accommodate the new sidebar. You also want to increase the width of header-wrapper and footer-wrapper, for uniformity.


Figure 1: A basic blogger blog layout


I will split the code changes into two parts -CSS and HTML.

To start doing the changes:

  1. Login to your Blogger account.
  2. Go to Dashboard > Design > Edit HTML.
  3. Back up your template.
  4. Follow the instructions below.  

Change to CSS (style sheet)

Follow these steps:

1. Add the new sidebar code

Look for this code in the stylesheet, this is the styling for the existing sidebar.

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */

What you will do is copy the whole code, paste it immediately after the existing code, and then rename the element to #sidebar1-wrapper, like this:

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */

/* additional sidebar start */
#sidebar1-wrapper {
  width: 220px;
background: salmon;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}/* additional sidebar end */ 


2. Change outer-wrapper width

Outer-wrapper is the container for sidebars (and main). To ensure proper fit, it needs to be increased with the same amount as the new sidebar, which is 220px. So the new outer-wrapper width should be 220+660=880px.

#outer-wrapper { 
width: 660px; <------ change to 880px 
margin:0 auto; 
font: $bodyfont; 


3. Change header-wrapper width

To align header with the newly added sidebar, header-wrapper too need to be increased to 880px.

#header-wrapper { 
width:660px; <------ change to 880px 
margin:0 auto 10px; 
border:1px solid $bordercolor; 


4. Change footer width

Footer should be changed to 880px also.

#footer {
  width:660px;  <------ change to 880px 
  margin:0 auto;
  line-height: 1.6em;
  text-align: center;


Change to HTML

Look for the following code in HTML:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>


That is the code for the existing sidebar. To copy the sidebar, do the following:

  1. Copy the code and paste it immediately after the existing code.
  2. Rename the div and b section id’s. The div id must be the same as the id in the CSS which is sidebar1-wrapper.
  3. Delete the widgets in the new sidebar code.

The end result should look like this:

<div id='sidebar-wrapper'> 
<b:section class='sidebar' id='sidebar' preferred='yes'> 
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/> 
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/> 
<b:widget id='Label1' locked='false' title='Labels' type='Label'/> 

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


Positioning the sidebar

To change the positioning of sidebar, following the instructions below. I have colored the elements so you can easily spot the difference in positioning -main is in cyan,the old sidebar in pink and the new sidebar in yellow.

● Both sidebars on the rightadditional column 1 You will get this arrangement if you follow the above codes.


● Both sidebars on the leftadditional column 2

In CSS, change the main-wrapper float from $startSide to $endSide and the sidebar-wrapper from $endSide to $startSide.


● Main column in the middleadditional column 3

  1. In CSS, change the sidebar1-wrapper float from $endSide to $startSide
  2. In HTML, reposition the new sidebar code from after to before the main div code, like this:
    <!-- additional sidebar start --> 
    <div id='sidebar1-wrapper'> 
    <b:section class='sidebar' id='sidebar1' preferred='yes'> 
    <!-- additional sidebar end -->
    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

Applying to other templates

The changes above is  for Minima template. For other templates the names of the container elements may be different.

To apply to other templates you need to identify the container elements that correspond to the elements that we changed in Minima. Follow these steps:

  1. Look for elements that have width property (e.g. width: 220px;) in CSS.
  2. Compare the width values to figure out which name corresponds to which part of the layout in Figure 1.)
  3. Try to play with the values and observe the changes in Preview.
  4. Once figured out, find the corresponding id (e.g. <div id='sidebar-wrapper'> ) inside HTML section.


  • Most other templates don’t use $startSide and $endSide variables. In that case, just replace $startSide with left and $endSide with right.

Good luck and enjoy!

80 comments to "Adding a column (sidebar) to Blogger template"

Unknown July 29, 2009 at 3:43 AM    

merci beaucoup ;)

Greenlava July 29, 2009 at 3:42 PM    

You're welcome LavaBlogger. Do come again...

Giorgia July 30, 2009 at 11:37 PM    

Thank you so much...It's an extremely useful article.
Just one thing...I can't enlarge the margin between left side bar and main wrapper...
Thanx :)

Greenlava July 31, 2009 at 9:21 AM    

Hi Giorgia,
Just add margin-right inside #sidebar1-wrapper.

Unknown August 9, 2009 at 1:33 PM    

i have added the new sidebar as the instructions above, but i failed to declare $endSide and $startSide. by the way, my main column has displaced. what should i do now?

Greenlava August 9, 2009 at 4:52 PM    

If your template doesn't use $startSide and $endSide variables, just replace $startSide with left and $endSide with right.

none August 10, 2009 at 1:47 PM    

Giorgia, with regard to margin between new #sidebar1-wrapper (left) and the main, I added as follows: margin-right: 10px;
Additionally, I found that I also needed to increase the the Outer Wrapper, Header Wrapper and Footer Wrapper by the same 10px. (This will maintain the margin between main and right sidebar.)

HardCodeDev August 14, 2009 at 7:45 PM    

Thx, I use your tutorial and aply in my blog :P .

(i am spain , sorry inglish)

Greenlava August 14, 2009 at 10:18 PM    

Hi J.Antonio,
Browse around for more tips, and do click the Spanish flag to translate to Spanish.

Shanna Whiseant August 19, 2009 at 7:27 AM    

Great information, I just totally revamped my blog with your article and comments. Thanks!

Greenlava August 19, 2009 at 12:38 PM    

My pleasure SWhiseant...
Come back for more tips.

MAT,  August 22, 2009 at 1:43 PM    

How do i css style the widget titles in the new sidebar? the first sidebar uses H2 styling i think for the title of the widgets. i copy/pasted the h2 code beneath and renamed W2, but i don't know where to use the command for this new sidebar? its minima template

Greenlava August 22, 2009 at 7:24 PM    

The widget titles in the new sidebar will follow the existing widget titles styling.
But if you want to style them differently, you can use inline styling, for example:
from this:
< h2 class='title' >< data:title/ >< /h2 >
to this:
< h2 style="font-variant: small-caps" class='title' >< data:title/ >< /h2 >

Inline styling has to be added to each widget h2 tag.

Etymology September 7, 2009 at 4:01 AM    

Thank you a lot! Your tutorial allowed me to successfully create that additional sidebar I've been trying to figure out how to create for months! Good work!

Greenlava September 7, 2009 at 11:41 AM    

Matis and Simone,
You're welcome. To browse all tutorals click All Posts tab on the navigation bar.

Rebecca October 18, 2009 at 8:18 AM    

Hi GL - me again,

Excellent instructions once again!

My original template has the old sidebar (pink) on the left whereas your illustrations above have the old sidebar on the right. I would like to keep the old sidebar on the left. I'm having a problem rearranging the html/CSS to get my old sidebar (pink) on the left, the main (cyan) in the center and my new sidebar (yellow) on the right.

No matter what I do I end up with both sidebars on the left?

Any solutions?


Greenlava October 18, 2009 at 10:06 PM    

Add the new sidebar HTML code before main wrapper:
sidebar1-wrapper <<< with float:right; in CSS

Good luck

Rebecca,  October 19, 2009 at 3:55 AM    

Woot! It worked! One more thing....

The text within my main wrapper (my blog posts) runs too close to my new sidebar on the right. There is hardly space between where a blog post ends and the sidebar text begins.

Can I change this to look more uniform with the left sidebar which has plenty of space between the end of the sidebar text and the beginning of the main text?

Greenlava October 19, 2009 at 9:37 PM    

Add in margin-right: 30px; inside # main-wrapper in CSS. This right margin will push the blog posts to the left.

Rebecca,  October 20, 2009 at 4:05 AM    

Excellent! Looks perfect. Thanks...

Cindy October 20, 2009 at 11:04 AM    

I just added a 3rd column to my blog using your instructions! I am so excited...I tried two other tutorials, but obviously yours is the one that made it the most clear to me...and I am NOT very computer literate!

Greenlava October 20, 2009 at 11:09 PM    

Well done

You might want to push your posts area slightly to the right to make it evenly centered between the two sidebars.
Just add in margin-left: 15px; inside #main-wrapper in CSS.

D' Cottage Crafts Inahaiqal October 24, 2009 at 10:06 PM    

after endless attempts, I finally made it...

Tqvm for the guidance!

Greenlava October 25, 2009 at 12:41 AM    

You're welcome inahaiqal. Terimakasih kerana kunjungi Blogger Sentral.

Inahaiqal October 26, 2009 at 11:10 AM    

Can you assist me, I did not have the gadgets in my middle side bar. I use main, new side bar, old side bar.

Any code that I miss?

Greenlava October 26, 2009 at 4:28 PM    

I guess you've figured it out yourself, 'cause I see gadgets all over the place :)

Rebecca October 31, 2009 at 6:45 AM    

Hi Greenlava -

I would like to add a widget created for websites by Facebook to my sidebar but it's wider than my sidebar. Is there a way to change the width of the widget so it fits without scrolling and without changing the width of my sidebar?

Here's the html:
[iframe scrolling="no" frameborder="0" src="" allowtransparency="true" style="border: none; width: 235px; height: 420px;"][/iframe]


Greenlava October 31, 2009 at 8:53 PM    

You sidebar width is 175px, so I think changing the iframe width to 170px should do it.
[iframe scrolling="no" frameborder="0" src="" allowtransparency="true" style="border: none; width: 170px; height: 420px;"][/iframe]

Rebecca November 1, 2009 at 5:24 AM    

Hi GL,

I tried what you suggested and it actually made it smaller so I increased the width instead and it went back to the original size. Then I tried changing both witdth and height - nope.

I sent an email to the creator of the widget to see if they have any ideas....or if you have any other ideas, I'm game.


Rona November 14, 2009 at 6:15 AM    

Hi Green Lava,

I followed your instructions, and they worked! They were quite easy also. Thanks!

I just have a question about my blog description, which is now running towards the right side of the page after adding the second side bar. In other words, it doesn't look centered like the title.

I have looked at the html, but I'm too afraid to touch anything without help. Do you know what I should do?


Greenlava November 14, 2009 at 2:11 PM    

Cam de la Ron,
You're welcome. I see you've fix the description.

Rona November 15, 2009 at 2:23 AM    

Hi GreenLava,

Yeah, I kind of figured it out a bit. The picture at the top is bigger due to my changes, and I don't know if that is a good or bad thing.

Thank you for checking my blog. My blog is still a work in progress, but, once I have worked on it a bit more, I plan to have a 'favorite blogs list'. Would you mind if I put you (your blog) on it?


Greenlava November 15, 2009 at 9:58 AM    

Cam de la Ron,
If you ask me, I would prefer the picture to be shorter, so that a portion of your latest post can be viewed even without scrolling down.
Include me in your favs list? Please do...and thank you.

Mark Spencer Reynolds November 23, 2009 at 7:58 PM    

THANKS Greenlava!!! Very helpful tutorial!

graceonline November 26, 2009 at 12:27 PM    

Ever since I discovered your tabs tutorial, you've been my go-to hot-spot for tweaking my blog. Thank you for all your good work. Now a question. Before I found you, I had converted my 2-col blog to 3-cols using another tutorial. You taught me how to make sticky pages, but they still look a lot like blog posts. Is there a way to remove one of the sidebars so they don't look so much like another post page? I've removed all the widgets, but I haven't figured out how to expand the main post section to the right for just those pages.

Greenlava November 26, 2009 at 10:57 PM    

Have read Creating static pages in Blogger?

Rona November 28, 2009 at 1:55 AM    

Hi GreenLava,

It's been a while since my last post here, but I did what you said in reference to the shortening of the photo on my blog. It looks a lot better I was also hoping you could tell me how to stretch the header (and the three columns below it) to 988px wide?

Thanks, Cam

Greenlava November 28, 2009 at 2:12 PM    

Cam de la Ron
Read How to change blog width.

Tor Christian Eilertsen November 29, 2009 at 7:02 AM    

Hi, again- 4 more questions for you: 1) I am using the TicTac Blue template and when I click Edit HTML I can`t seem to find the "Change to CSS (style sheet)". Why is this? Can I follow the toturial without change to CSS 2) Can you publish a "how-to-make-a-test-blog", so that it`s possible to work on a test-blog before changing the original blog? 3) I am trying to make a classifield- page based on google groups. Need tips on implementing this on my blog, e.g based on RRS-feed. and 4) I want go implement a MMS-blog so that readers can post their pictures on my blog? Do you have any tips (maybe a tutorial?). Blog is . Thank U in advance, and look forward for your reply/ help on one/more of theese questions.

Greenlava November 30, 2009 at 2:37 PM    

Tor Christian Eilertsen,
1. Use Ctrl+F to search for #sidebar-wrapper etc. You need the CSS part because it determines the elelement widths and positioning.
2. Making a test blog is easy. Just create a new blog, using similar template (TicTac Blue), publish a few test posts and add some basic widgets.
3. I don't understand this question.
4. I'm afraid it's not possible for readers to post images in Blogger.

Anonymous,  November 30, 2009 at 10:13 PM    

thank for you reply

Anonymous,  December 1, 2009 at 5:46 AM    

AWESOME!! Easy to follow and gets the expected results. Thanks so much....

Greenlava December 1, 2009 at 11:36 AM    

My pleasure GuiltyMom...

The Cotton Coalition December 17, 2009 at 10:39 AM    

I want to make my middle blog posts section wider and move the left and right sidebars further to their sides. Can you please help me with this?

Thanks so much for the great & easy info!

Greenlava December 17, 2009 at 8:17 PM    

The Cotton Coalition,
I have a post on that subject How to change blog width.

tech December 26, 2009 at 9:00 AM    

great one

kaffirgirl January 5, 2010 at 4:14 PM    

I really love your template. Is there a way to make something similar to yours? Thanks.

Greenlava January 5, 2010 at 11:59 PM    

My base template is The Professional Template from OurBlogTemplates, but this template has a problem with comment form. You might want to try The Professional Templates II, where the problem is rectified.

aazek May 25, 2010 at 6:45 AM    

one of the very few blogs that is very interesting and informative.

Greenlava May 25, 2010 at 11:25 AM    

Hey thanks for the compliment :)

Dr Joy from Attract Men August 3, 2010 at 11:24 PM    

This is one powerful information. Unfortunately I am not technically gifted and will therefore take my time to apply them.
But thanks for sharing this great knowledge. It will do wonders for us all.

Anonymous,  September 9, 2010 at 4:51 PM    

hey again. i wanna try this one out...but i couldn't find the #sidebar-wrapper in the HTML or CSS. i've already searched for it but still nothing. I use the Awesome Inc. from the template designer.

Greenlava September 11, 2010 at 7:34 PM    

For Designer template, there a easier way to add a sidebar. Go to Design > Template Designer > Layout.

NAMASTE October 2, 2010 at 10:27 AM    

thank you... very helpful to my blog..

blessings and good health to you...

Zeeshan October 5, 2010 at 2:47 AM    

I just come to to your blog today and i want to say one thing your are giving the best help on Blogger. why i haven't read your blog previously. Instant Bookmark

Greenlava October 6, 2010 at 1:32 AM    

@Blogger Tips and Tricks
Thank you...and do come back.

Winona November 27, 2010 at 6:35 AM    

Hi, thanks for having these easy to understand directions to common questions. My problem: I can't find the code for sidebar or outer wrapper. Any suggestions? Thanks.

Greenlava November 27, 2010 at 5:36 PM    

Is this for ocxbar2010 blog?
"Add" your sidebar by going to Design > Template Designer > Layout and choosing one of the prefab layouts.

Kaamil December 16, 2010 at 12:17 AM    

Thank You Very Much Greenlave, for the wonderful post.
I tried using this on my blog, but it sort of disarranged everything. Could you tell me if I can add a 3rd column or should I leave it as it is? Thank You.

Greenlava December 16, 2010 at 3:52 PM    

You're welcome.
I'd say just leave as it is. The header and footer background images kind of "preventing" you from changing the blog width.
But if you still interested in adding another column, I suggest you try Template Designer. You can customize almost every part of your layout in there -no. of columns, widths, include/omit footer etc.

Joshua Stuck January 22, 2011 at 3:20 AM    


Im trying to place a bit of text in the left margin of my blog. The text will include a hyperlink. So far I've placed an image of the text I want in that place, but I'd prefer to place actual text so it can contain a working hyperlink. the code that placed the image was:

.content {background: url(IMAGE URL HERE.png) no-repeat 20px 150px fixed;}

I tried integrating:


into that code in place of the image URL but no luck. Could it be just a Z index issue why its not showing up? I haven't the faintest. Any ideas?

Greenlava January 22, 2011 at 3:13 PM    

@Joshua Stuck
First of all you can't put a hyperlink to a background.
Why don't you try putting the hyperlink inside a Text or HTML/Javascript gadget,and then fix-position the gadget.
Try this:
1. Create gadget, add in the hyperlink, then Save.
2. Find the gadget ID
3. Go back to edit the gadget. Add this snippet on top of the rest of the content:
[style type="text/css"]
#widgetID {position:fixed; left:10px; bottom:50%;}

Unknown March 3, 2011 at 1:46 AM    

I don't understand what it is to "Change to CSS"

btw love the site, subscribed some time ago

Greenlava March 3, 2011 at 2:32 PM    

Change to CSS is the change you have to make in the stylesheet section of your template.
Anyway I see your template appearance is solely based on background images. It's like adding texts to one big picture. So even if you add another column, the picture stays the same as what you are seeing now - one main column with a sidebar.
You are pretty much stuck...unless you change the template of course.
If you change to a Designer Template, you can add sidebars, footer etc. without even touching HTML.

Pingkan April 2, 2011 at 9:32 AM    

Hey, GreenLava can you please help me?

I want my blog can be showed like this So, I add "display: none;" on my #sidebar-wrapper, but fails. It only shows empty space (used to be sidebar), the posts are still in left, and footer has gone.

What should I do so my blog can be showed like ? This is my blog


Greenlava April 4, 2011 at 9:43 AM    

@Nduk Pingkan
I'm happy to see you've done it, all by yourself. Great.

Pingkan April 9, 2011 at 5:51 PM    

yeah, I used Template Editor at the end :)

btw, don't you realize that Web Fonts on Template Editor have a bug (or something)? when I changed font from default to web fonts, it showed blue screen after I tried to load the blog. is it a bug?

sorry for starting this out of topic comment. just want to make sure. thx before.

Greenlava April 12, 2011 at 11:36 AM    

@Nduk Pingkan
I'm not sure what it is.
Maybe you want to try using another method:
Using custom/nonstandard fonts with Google font API

igoodhealthi July 5, 2011 at 8:46 PM    

GreenLava can you please help me with

how do i change my html code in the sidebar section so that that all at end right sidebar the shortest one would be set in front of all the rest so that to take the place of the existing post area and move every thing else to the right so that the thinnest sidebar is first from the left, post area second from the left, and the third smallest sidebar would be third from the left, and the remaining 2 smallest last one all the way to the right.

Thank You in advance.

my html code

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
border-left:1px solid $bordercolor;
border-right:1px solid $bordercolor;
border-bottom:1px solid $bordercolor;
width: 970px;
margin:0 auto;
font: $bodyfont;

#crosscol-wrapper {padding:0 auto;margin:0 auto;}
.crosscol .widget {margin:0 0 10px;padding:0px 0px 6px 0px;border-bottom:1px solid $bordercolor;}

#main-wrapper {border-right:1px solid $bordercolor;
width: 620px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

#sidebar-wrapper {
width: 200px;
float: $endSide;
word-wrap: break-word; /* fix for long tjavascript:void(0)ext breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

#sidebar2-wrapper {border-right:1px solid $bordercolor;border-left:1px solid $bordercolor;
width: 60px;padding:0px 10px;margin-left:10px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

#sidebar3-wrapper {
width: 20px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

.main2-wrapper {padding:0 auto;margin:0 auto;width:auto;float: $startSide;
word-wrap: break-word; overflow: hidden;}

/* Headings
----------------------------------------------- */

h2 {
margin:0.5em 0 .75em;
line-height: 1.2em;

/* Posts

Greenlava July 12, 2011 at 7:36 PM    

Sorry for late replying. Your comment went into the spam box.
To move the smallest sidebar (#sidebar3-wrapper) to the left, you need to change both CSS and HTML.

1. For CSS it's easy, just change the float of #sidebar3-wrapper from float: right; to float: left;.

2. For HTML, you have to rearrange the column divs. The original is arranged like this:
[div id="main-wrapper"]....[/div]
[div id="sidebar-wrapper"]....[/div]
[div id="sidebar2-wrapper"]....[/div]
[div id="sidebar3-wrapper"]....[/div]

you want to put sidebar3 on top, like this
[div id="sidebar3-wrapper"]....[/div]
[div id="main-wrapper"]....[/div]
[div id="sidebar-wrapper"]....[/div]
[div id="sidebar2-wrapper"]....[/div]

make sure you backup your template first.
Good luck

loulaVINTAGE August 19, 2011 at 10:08 PM    


I love the format of this post- you seem to explain things so well!
I have, however had a little difficulty making my left sidebar a floating sidebar. I am using the 'simple' template by blogger. I cannot find the pieces of code within my html which I am required to change. (I can't find '#sidebar-wrapper' anywhere!) please help?!

Greenlava August 21, 2011 at 2:45 AM    

Read reply #54.

Mobile Shop August 22, 2011 at 12:59 PM    

look at my blog
i cant able to add sidebar for adding gadget at left side of my blog... i hv followed ur process bt i cant get the code which u mention..........plz help me

Greenlava August 26, 2011 at 9:27 PM    

Read reply #54.

Yash hooda October 2, 2011 at 12:22 PM    

thanks for your usefull post, i done with a single step, keep it up, thanks

Yviemarie December 19, 2011 at 6:30 AM    

I have the new blogger templates which have differewnt you know how to add/reposition the columns with the new set-up? I cant find any help online! Instead of (hashtag)sidebar etc it has .content-outer etc.

Im going crazy here!

Greenlava December 19, 2011 at 7:27 AM    

You are using Designer Template right? Adding colums is very easy. Just go to Design > Template Designer > Layout and select a layout in there.

Sandy March 24, 2012 at 3:34 AM    

I haven't tried repositioning the sidebar yet but so far this tutorial has been really easy to follow and very helpful. Thanks very much for posting this ^_^.

zainal March 7, 2013 at 2:48 PM    

good tutorial , nice info !!

TNPSC Exam Questions August 12, 2013 at 12:53 PM    

Nice! Thanks for this post.