Create A Three Column Blogger Blog Template

Customizing your Blogger Blogs (Part 2)
How to create a three column blogger template from a two column blogger default template.

As promised, I will teach my readers the tricks I did with my blog. Well, just to clarify I am not a professional in this area. I am simply teaching people what I know based on my experience.

I used to have the Minima Strech template having only two columns. I felt it was so boring and the space is too limitted for the more decorated blog I want to have therefore I search on how I can turn my blog from a two column template to a three column template ( I did this when blogspot hasn’t launched the new blogspot 3 column templates yet, now it’s everywhere). Also, because I want to learn the tricks in designing my own blog so I can change anytime I want to.

First of all you should Download your full template first before doing any changes so that when you can revert back to your old template if something went wrong while you were customizing your blog.

Here is the what you should do.

Step 1: Go to your Edit HTML tab from your customize your blog page.

Step 2: Go to your Edit Template page click on the Edit Widgets Template button.

Step 3: On your keyboard type control F and look for the #sidebar-wrapper.

Step 4: At the end of the sidebar-wrapper code paste the following codes:

}#newsidebar-wrapper {
width: 205px;
float: left;
margin:10px;
padding: .8em;
border:2px solid #d36254 transparent;
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 */

REMINDER: The size indicated in here with regards to width, padding, margin and borders are based on what you see here on my blog. You can change the size depending on what you like for your blog. Same goes with the color, change the color scheme to your liking.

Step 5: When you’re done the codes should look like this:

/* Outer-Wrapper
———————————————– */
#outer-wrapper {
width: 970px;
padding: 10px;
border: 2 px solid #d36254
margin: 0 auto;
background-color:#ffebc5;
background-image: url();
background-attachment: fixed;
text-align:left;
font: $bodyfont;

#main-wrapper {
width: 515px;
float: left;
margin-left: 1%;
float: left;
border:20px solid #d36254 transparent;
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: 180px;
float: right;
border:2px solid #d36254 transparent;
padding 170px;
margin: 1px;
border: 20px solid transparent
font-color: #000000;
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 */

}#newsidebar-wrapper {
width: 205px;
float: left;
margin:10px;
padding: .8em;
border:2px solid #d36254 transparent;
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 */

Tricks in changing the sidebars placement/location.

If you want to have your blog having the main wrapper at the center, keep the floats and codes as they are. If you want to have all the sidebars on the right side of your screen change the float placing on the newsidebar-wrapper to right or left.

By doing so you will change the placement of your sidebars. Just always remember when doing changes click the preview first to see if that is what you like before saving and download your original templates first before saving your new template.

Good luck!

If this post helped you I would appreciate if you just leave a comment out here. I wanna see how your blog looks like and leave a comment on yours too. Thanks!

Happy Blogging!

Share Your Thoughts Here

Here's something else you can read

2 Comments

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.