Change Columns on Blogger Template

Oct 2, 2016 | Blogger Tutorials

This tutorial explains how to change the position of your sidebar/column.

Caution! When you change the layout, you will temporarily see your sidebar in the wrong place. Make sure you read all of the directions prior to making changes.

1. Go to Template and select Customize.

Custom Blogger

2. Select Layout.

3. Select your layout choice and click Apply to Blog.

When you setup a new layout, your sidebar will likely overlap your posts.

Blogger Sidebar Overlap

 

Adjust Sidebar Alignment

4. To fix the sidebar alignment, go back to the Customize screen and select Adjust Widths.

5. Change the site width to 1140px. The recommended sidebar width is 340px to 360px, but you can
adjust this based on the widget sizes in your sidebar. If you’ve selected a layout with two sidebars,
your width will be much smaller.

6. Click Apply to Blog.

Fix Dashed Lines

Some templates have dashed lines between the posts and sidebar. When you change layouts, you may find that you want to remove the dashed lines or add the dashes along the opposite side. The directions below describe how to modify the CSS code in the template.

7. Go back to the Customize screen and select Advanced.

8. Scroll down and select Add CSS.

Copy the code below and paste it into the code window.

Code to remove dashed line completely

.main-inner .column-center-inner {
padding: 0 $(main.padding);
border-right: 0px dashed #ddd;
}

Code to add dashes to left of blog posts

.main-inner .column-center-inner {
padding: 0 $(main.padding);
border-right: 0px dashed #ddd;
border-left: 1px dashed #ddd;
}