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.

1	#sidebar-wrapper {

2	width: 220px;

3	float: $endSide;

4	word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

5	overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */

6

}

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:

view sourceprint?

01	#sidebar-wrapper {

02	width: 220px;

03	float: $endSide;

04	word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

05	overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */

06

}

07

08	/* additional sidebar start */

09	#sidebar1-wrapper {

10	width: 220px;

11	background: salmon;

12	float: $endSide;

13	word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

14	overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */

15	}/* 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.

1	#outer-wrapper {

2	width: 660px; <------ change to 880px

3	margin:0 auto;

4	padding:10px;

5	text-align:$startSide;

6	font: $bodyfont;

7

}

3. Change header-wrapper width

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

1	#header-wrapper {

2	width:660px; <------ change to 880px

3	margin:0 auto 10px;

4	border:1px solid $bordercolor;

5

}

4. Change footer width

Footer should be changed to 880px also.

view sourceprint?

01

#footer {

02	width:660px;  <------ change to 880px

03	clear:both;

04	margin:0 auto;

05	padding-top:15px;

06	line-height: 1.6em;

07	text-transform:uppercase;

08	letter-spacing:.1em;

09	text-align: center;

10

}

Change to HTML

Look for the following code in HTML:

1	<div id='sidebar-wrapper'>

2	<b:section class='sidebar' id='sidebar' preferred='yes'>

3	<b:widget id='Profile1' locked='false' title='About Me'type='Profile'/>

4	<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

5	<b:widget id='Label1' locked='false' title='Labels'type='Label'/>

6	</b:section>

7

</div>

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'/> 
</b:section> 
</div>

 <!-- additional sidebar start -->
<div id='sidebar1-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'> 
</b:section> 
</div>
<!-- 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 incyan,the old sidebar in pink and the new sidebar in yellow.

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




● Both sidebars on the left

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




● Main column in the middle

In CSS, change the sidebar1-wrapper float from $endSide to$startSide. 
In HTML, reposition the new sidebar code from after to before the main div code, like this:







01
<!-- additional sidebar start -->




02
<div id='sidebar1-wrapper'>




03
<b:section class='sidebar' id='sidebar1' preferred='yes'>




04
</b:section>




05
</div>




06
<!-- additional sidebar end -->




07
 




08
<div id='main-wrapper'>




09
<b:section class='main' id='main' showaddelement='no'>




10
<b:widget id='Blog1' locked='true' title='Blog Posts'type='Blog'/>




11
</b:section>




12
</div>







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:

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


Floats

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


Good luck and enjoy!