Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Jul 24, 2007

Digg This Story

Three Columns Rounders 2 Template

We had written an article on converting the Blogger Rounders template into three columns. Since the graphics for the Rounders 2, 3 and 4 are different, we shall in this article discuss specifically the changes to be made if you want to insert a third column into your Rounders 2 Template. If you are unsure as to what your template is, go to Template -> Edit HTML and look for “Blogger Template Style” and follow this guide if the Name is “Rounders 2”.

For other templates, please refer to our articles and guides on:-
1. Three Columns Denim Template;
2. Three Columns Dots Template;
3. Three Columns Minima Template;
4. Three Columns Rounders Template;
5. Three Columns Rounders 3 Template;
6. Three Columns Rounders 4 Template;
7. Three Columns Sand Dollar Template;
8. Three Columns Scribe Template;
9. Three Columns Thisaway Template (I);
10. Three Columns Thisaway Template (II).

Note: Some sites offer free three-column templates for download. If you are starting a new blog, you may look up these sites and use their templates. However, if you have an existing blog and merely want to expand the template to include another column, our guides would be helpful. What we do is to take the standard Blogger templates and show you how to add a new sidebar. This approach gives you total control over the changes, and if you have bookmarked this page, you can revisit it in future should you want to reverse the changes. It is also a safer method, since there could be a few out there who may introduce malicious scripts or blog virus into their customized templates without you knowing.


Let us reiterate what we mentioned in our earlier articles. In the Rounders 2 template, if you right click on the Header to view the background image, you will see the corners_cap_top.gif or corners_cap_bot.gif which account for the rounded corners. These corners have a fixed width of 740px and are linked to your Blog via the blogblog.com server. To expand the width of the Blog and include a new sidebar, these images will have to be changed and uploaded onto an image server. Otherwise, you will not have the rounded corners or may see that the background images do not fit into a wider layout.

For this tutorial, we have created new rounded corner images and uploaded them onto a free image server. The new three column Rounders 2 Template will look like this:-

Three Columns Rounders 2 Template

Before you begin to do anything, remember to backup your template. Go to Template -> Edit HTML. Click the “Download Full Template” link to save a copy of your template.



Rounders 2 Template

When you are logged in, go to Template -> Edit HTML and scroll to these lines:-


#outer-wrapper {
width:740px;
margin:0 auto;
text-align:left;
font: $bodyFont;
}
#main-wrap1 {
width:485px;
float:left;
background:$mainBgColor url("http://www.blogblog.com/rounders2/corners_main_bot.gif") no-repeat left bottom;
margin:15px 0 0;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
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 */
}
#main-wrap2 {
float:left;
width:100%;
background:url("http://www.blogblog.com/rounders2/corners_main_top.gif") no-repeat left top;
padding:10px 0 0;
}
#main {
background:url("http://www.blogblog.com/rounders2/rails_main.gif") repeat-y;
padding:0;
}
#sidebar-wrap {
width:240px;
float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}


The template defines 3 wrappers, namely:-

#outer-wrapper – referring to the entire blog
#main-wrap – referring to the main Blog Posts
#sidebar-wrap – referring to the right sidebar.

We shall include a left sidebar and name it newsidebar. The above code will therefore be changed to this (note the portions in red).


#outer-wrapper {
width:995px;
margin:0 auto;
text-align:left;
font: $bodyFont;
}
#main-wrap1 {
width:485px;
float:left;
background:$mainBgColor url("http://www.blogblog.com/rounders2/corners_main_bot.gif") no-repeat left bottom;
margin:15px 0 0 15px;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
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 */
}
#main-wrap2 {
float:left;
width:100%;
background:url("http://www.blogblog.com/rounders2/corners_main_top.gif") no-repeat left top;
padding:10px 0 0;
}
#main {
background:url("http://www.blogblog.com/rounders2/rails_main.gif") repeat-y;
padding:0;
}
#sidebar-wrap {
width:240px;
float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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-wrap {
width:240px;
float:left;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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-wrap1 {
background:$mainBgColor url("http://www.blogblog.com/rounders2/corners_side_top.gif") no-repeat left top;
margin:0 0 15px;
padding:10px 0 0;
color: $mainTextColor;
}

#newsidebar-wrap2 {
background:url("http://www.blogblog.com/rounders2/corners_side_bot.gif") no-repeat left bottom;
padding:10px 0px 8px;
}

#newsidebar h2 {
color: $postTitleColor;
border-bottom: 1px dotted $postTitleColor;
}


Let us now deal with the Header and the Footer. As mentioned, we had created new images for the rounded corners of the Header and Footer based on this new width of 995px.

Look for this in the template:-

/* Blog Header

Amend the image locations from this:-


#header-wrapper {
background:$titleBgColor
url("http://www.blogblog.com/rounders2/corners_cap_top.gif") no-repeat left top;


To this:-


#header-wrapper {
background:$titleBgColor
url("http://www.blogpulp.com/imagehost/images/44575234.gif") no-repeat left top;


Also change this:-


#header {
background:url("http://www.blogblog.com/rounders2/corners_cap_bot.gif") no-repeat left bottom;


To this:-


#header {
background:url("http://www.blogpulp.com/imagehost/images/346852006.gif") no-repeat left bottom;


Now look for the footer style definitions in your template:-

/* Footer

Change this code:-


#footer-wrap2 {
background:$titleBgColor
url("http://www.blogblog.com/rounders2/corners_cap_top.gif") no-repeat left top;


To this:-


#footer-wrap2 {
background:$titleBgColor
url("http://www.blogpulp.com/imagehost/images/44575234.gif") no-repeat left top;


And amend this:-


#footer {
background:url("http://www.blogblog.com/rounders2/corners_cap_bot.gif") no-repeat left bottom;


To this:-


#footer {
background:url("http://www.blogpulp.com/imagehost/images/346852006.gif") no-repeat left bottom;


We shall also change the layout editor to cater to the new sidebar. Scroll to where you see this:-

/** Page structure tweaks for layout editor wireframe */
body#layout #main-wrap1,
body#layout #sidebar-wrap,
body#layout #header-wrapper {
margin-top: 0;
}

body#layout #header, body#layout #header-wrapper,
body#layout #outer-wrapper {
margin-left:0,
margin-right: 0;
padding: 0;
}

body#layout #outer-wrapper {
width: 730px;
}

body#layout #footer-wrap1 {
padding-top: 0;
}

Update:

Replace all of the above with this:-

/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper,
body#layout #header-wrapper,
body#layout #footer-wrap1 {
width: 750px;
}
body#layout #main-wrap1,
body#layout .main .widget,
body#layout .main .Blog {
width: 400px;
}
body#layout #newsidebar-wrap {
width: 150px;
margin-top: 5px;
}
body#layout #sidebar-wrap {
width: 150px;
margin-left: 25px;
}


Next, scroll to somewhere near the bottom of the template where you see this:-

<div id='main-wrap1'><div id='main-wrap2'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div></div>

<div id='sidebar-wrap'>


Add the portion in red above the div id='main-wrap1'. The segment should look something like this:-

<div id='newsidebar-wrap'>

<div id='newsidebar-wrap1'><div id='newsidebar-wrap2'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div></div></div>

<div id='main-wrap1'><div id='main-wrap2'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div></div>

<div id='sidebar-wrap'>


You can now click “Preview” to see the new layout, and if you like what you see, click “Save Template”. If you don't want the profile on the left, you can remove that page element after that. Refresh your page to see your new Three Columns Rounders 2 Blog.

Align Header Title and Description

Update: We have a more detailed guide on alignment of the Header Title, Description and background image. In the article, you would learn how to move these to the center, or towards the left or right of the Header. Check out the guidelines at Header Image and Title Alignment (I).

In the Rounders template, you would notice that the Header title and description are aligned to the left. If you want that to be in the center of the page, insert the text-alignment code (shown in red).

#header {

text-align: center;


Align Post Footer elements to Left

We noticed that the Post Footer elements e.g., Posted by, timestamp, comments, backlink icons, are aligned to the right in the Rounders template. If you want to align these elements to the left, change the text-alignment code (shown in red).

.uncustomized-post-template .post-footer {
text-align: left;
}


Note:

The Rounders 2 template we are working on is the present version available on Blogger. If you are using the old Blogger templates, or any other template, the style names may be different. For example, #header-wrapper may be called #head-wrap. If you are unsure, you may source the net for a guide specifically for your type of template. Otherwise, you may want to understand the way we change this template and adapt it to yours. As long as you backup your current template, and Preview the changes made, it should be alright for you to try some changes.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

48 comments:

Anonymous said...

Excellent!!! It works beautifully! Thank you!!!

jamesforex said...

Hi, I has been follow your instrucion and everything goes well. Thank you very much!.
But I had change the header, side bar and body color. So the problem came out, the corner bolder? cannot find where to change the color? Please have look. whether can be done or not?
my blog: www.metaforexcapital.com

bizwhiz said...

Hi jamesforex

The corners are images. In the template, you will see corners gif and if you enter that image url into your browser, you will understand that the edges appear rounded because of these images.

To change them, you will have to redo these images using an image editor software. Save the image into your computer, open the software and replace the color with something that suits your template. Save the new image and upload that onto a free server. Finally, replace the corner image URL in the template with this new image URL.

Joe Bartolotta said...

Hello, I have a question and I am hoping you can assist. I used your direction on how to change the blogger template named Rounders 2 from 2 column to a 3 column layout with success. I would like to change the background color of the new column to match the other (existing one). Can you tell me where to look in the code to find out how to change the color so my blog matches? I'd like to have both sidebars be the same color in addition to the header and body being different as well. Just fyi, complimentary colors, not contrasting ones in case you are wondering. Thanks in advance if you can assist me with this request. By the way, your site does offer some fantastic tips.

bizwhiz said...

Hi Joe Bartolotta

If you want the new sidebar to have the same background color as the top sidebar on the right, change:

#newsidebar-wrap1 {
background:$mainBgColor

to this:-

#newsidebar-wrap1 {
background:$topSidebarBgColor

Bryan Eaddy said...

Your blog is awesome! I tried the 3 column edits and it worked perfectly. I will continue to use, and refer your blog to others.

Bryan Eaddy
http://mycomputeraid.blogspot.com/

Ishwar said...

Awesome - have been searching everywhere for this. It works like a gem. Great explanation

Ishwar said...

Have a slight problem on my blog after I tried this.

Best explained by taking a look at it. http://gawdlevelmarketing.blogspot.com

The main framework for the body of the post has mysteriously shifted towards the right. If you notice the right edge of all posts are cut. Can you help me in setting this right? Thx a ton

bizwhiz said...

Hi Ishwar

It is because you changed:-

#main-wrap1 {
width:485px;

to:-

#main-wrap1 {
width:465px;

You can change it back to what we stated in our guide and you should see the rounded corners.

Ishwar said...

Well as usual - it works!! thanks a ton. your blog is absolutely the best on blogging

blmahon said...

Thanks so much for the info on how to change this template. Check it out http://brandimahon.blogspot.com.

Ishwar said...

Hi ,

I would like to change the background color of my left side bar. Have already created the 3 column template. Can I change it from white to something else?

Thx

bizwhiz said...

Hi Ishwar

Change:-

#newsidebar-wrap1 {
background:$mainBgColor

to:-

#newsidebar-wrap1 {
background:#000000

Insert the relevant color code under #000000. Can look at the Color Code Chart for the color code.

Ishwar said...

color code chart is fantastic dude!! havent yet decided which color - but this helps a lot - thx

The Red Queen said...

I love the three column template. Thanks!

I would like to change the new column so that it is the same color and font styles as the right column. I've already changed the background, but where do I change the fonts, etc? And can I set it up so I can just change the colors and fonts in the layout section of blogger later?

Thanks Again

Hilal said...

You guys are brilliant! Thank you so much! It was a painless process, just hope those rounded corner images stay hosted forever :)

sandy said...

Hi bizwhiz,
Thanks for your blog & wealth of information. It is very useful for new bloggers like me.

I want to add a newsreel kind of page elements to my blog. Basically I have a RSS feed & i want to display it in one of the sidebar / @ the bottom of page. It should rotate continuously.

How I can do this? Currently I am using 3 column Rounders-2 template.

Once again, thanks a lot.

Sandy

Imran said...

Hi,
I worked on modifying to 3 column template (for Rounders 2) and it worked beautifuly.. Great!!..
What I want to do next is reduce the width of the left and the right column so that the center column (content area) gets more space. Any help on this topic is highly appreciated...
Thanks in advance!

RV said...

Hi, thanks for a superb tutorial!!

I have a small problem though. Everything works great, except that I lost the upper (rounded) corners from the header and footer!! In your code, the background (http://www.blogpulp.com/imagehost/images/346852006.gif) contains only the lower corners.. Any help would be great!

You can check my blog and see what I mean here: www.g-koodi.net (it's in finnish but the design is the same lol)

Thanks!

Ms Pink said...

What a great help and timesaver!
I've been tweaking my html a little every time I've had a chance, but this did everything i wanted within minutes!

One problem though...I have an orphan sidebar hanging on. How do I get rid of that???

www.pinkygrahamcracker.blogspot.com

Evan Rummel said...

hi i am having problems. i want to expand the body to 600 but everytime i do that, the text doesn't expand. instead a white box is added to the right of the body. i'm not really sure how to describe it any better than that. any help on expanding the body so that i can fit more text rather than a skinny body section??

ER

DNB said...

Hi there. It does indeed work perfectly, but I have come across a slight problem, to do with the layout editor wireframe. As I have added widgets, the footer and the add page element for the footer have disappeared beyond the bottom of the layout editor page and I cannot now access it. If i add any more widgets then the ones already at the bottom will disappear also. I have hosted a picture for you to see what I mean, here

http://tinypic.com/view.php?pic=99g9sn&s=3

I have double checked the code and can see no mistakes. could you possibly point me in the right direction for fixing this. I would also like to thank you for all the help your blog has given me in setting up mine. A wonderful resource for tips and beautifully explained. Keep up the great work.

The Times Observer said...

Thank you so much! I have been going crazy going to other blogs that just gave very confusing instructions to someone like me who has little to no html coding experience. Thank you so much, it works great!

Now I have to work on the layout of my blog, but I'm happy.

timesobserver.blogspot.com

Dette said...

This is awesome!

I previously used your instruction to change my Scribe template to have 3 columns. I have been looking to change my template scheme altogether, though - and have decided on the Rounders 2.

But I've made several changes to the HTML templates (including hacks and widgets) and was wondering if I will lost all those edits when I switch?

I think I need to switch to Rounders 2 in blogger first, and then come back here to add the 3rd column, correct?

Thanks in advance - I've already added your button to my front page. You guys are the best!!

www.danceofmotherhood.blogspot.com

Anthony J. Privoznik said...

I used the Three Column Rounders2 instructions and they were very easy and the change looks great.

I am having one problem that I wish some advise on. If you review my blog http://pinkvizor.blogspot.com you will see that the new third column (in pink) is showing some white at the corners. You also see some red at the corners on the blog title. Can these be removed with the correct color assignment? Also, how can I correct the arrow colors on the sidebars and blog posts. Any suggestions would be greatly appreciated.

Ryann said...

Thank you for this site! I adore my new blog! But I do have a question. The pictures on my sidebar are mysteriously shrinking and I cannot figure out why. Only one picture remains large which was the original size. Any suggestions would be most welcome!

www.terryrye.blogspot.com

Эльвира said...

thank you - i did it!

Rachelle said...

This tutorial worked awesome! I love my new blog layout. One question - how do I change the other page elements (link, archives, etc) on the right hand side of the page to be the same gray as the "About me" and the new side bar? I followed the directions to change the left hand side bar to that gray, but can't figure out how to do it on the right. Thanks!

reprehriestless warillever said...

Thank your for this tutorial.

It was detailed and easy to implement.

I am still having one issue, however. Even after changing the header alignment to "center," it is still left-justified.

Any ideas?

http://warillever.blogspot.com/

trinie said...

how do i put "show quick editing" icon in the template?

Wendy said...

Thank you for this. very easy to do with your well written post. I have a question. In rounders 2 how can i change the orange arrow on the post titles to a different color? It clashes with the color scheme!
Thanks again,
Wendy

Denise Sawyer said...

I need HELP! This code worked wonderfully! I added it to my blog and it looks GREAT...except...
I need to do something about those stinkin' corners! I changed the colors a bit and now it looks funny. My blog is at www.thecentsiblesawyer.
blogspot.com could you take a look and give me some feed back? PRETTY PLEASE? (I am currently working on it so if you don't see it there go to http://sawyertestblog.blogspot.com/
Thanks a billion-zillion for any help you can give!
I've been working on this for WEEKS and your tips have helped sooo much!

Denise
The "Cent"sible Sawyer

Michael Gorsline said...

Wow. I can tell two things from the 20 min I've spent on your blog so far. First I will be a frequent visitor. Second, I've got a lot of reading to do. Thanks for a great site.

Lollipop Goldstein said...

This is such a fantastic post. I've used the directions myself and recommended it to so many people who like it on my blog.

I started a new blog and tried to use the directions today, but I can't get one thing to work. The header and footer aren't rounded. They are a rectangle instead. These directions worked on other blogs, so I'm wondering what I'm doing wrong.

http://awarenessbridges.blogspot.com/

Thank you!
Mel

Prince of Design said...

bizwhiz,

I do not know whether this is in your control, but the three-column rounders corners images for the header and the footer are not working anymore. They were for about a month, but now they are gone.

I have multiple pages using your template changes and now the header and the footer are just boxes of color.

Can you help me to get these to display again?

Thanks!

infins said...

This is fantastic.
I have done adding a column but the problem is, the corner image is not right. How to change the color for the corner image so that it blended with background color?

Anonymous said...

Is this site also owned by you? http://gayabo.blogspot.com/2008/06/three-columns-rounders-2-template.html. If not, the person is taking all your information word for word as if it belongs to her. Your few days added onto your "month long" vacation seems to have escalated into nearly a year.

Rachel said...

this is great!! I didnt try it yet. but so helpful!!!!!!!!!!!!!!!!

Luvvie (aka Queen IG) said...

Your guys TRULY rock!! Worked like a CHARM!!

Pam Triick said...

Excellent instructions! I've been searching for (easy) instructions to move columns. I would like the larger, main column on the left and the 2 smaller columns on the right. Can you help? One of my blogs I would like to change is hotbulletins.blogspot.com. Thank you!

Abass said...

Thank you for that. It really helps. But I just wanna ask you something. Is there a way to expand the blog's body throughout the page or to reduce the sace on the sides. If you go to my blog, you will see that on the right and left hand side there is quite a lot of space, Is it to possible to get rid of this space or reduce it? Thank you.

Mayor of CLAYCORD said...

I love the 3 columns, thanks! Question though, my header lost it rounded edges, is there any way I can get them back?

here is my blog for you to take a look.

www.claycord.com

Thanks!

Penelope said...

I just followed your instructions but I must have made a mistake somewhere. You will see that there is some HTML on the top part of my actual blog:

www.trialsofpenelope.blogspot.com

Do you have any idea what I did wrong?

Thanks so much!

Ikow Designs said...

Hi! Thanks for the tips on changing Rounders 2 to thee columns. It worked perfectly.

Now I would like to make both of the sidebars wider and reduce the space between them and the main body. When I try to do this, the left gap stays the same and everything shifts to the right, knocking the right sidebar down to the bottom. Is there a way to change the sidebar with, but still keep everything centered?

Thanks for your help!

Chris

Made in China said...

I have been trying to do this (I am not technical) and I get an error message: Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "div" must be terminated by the matching end-tag "

any ideas??

Thanks,

Julie

devon said...

hi,
this worked wonderfully. the only issue i have is that now when i upload a photo in the header, it only stretches across two columns (center and right). any idea how to fix that?
thanks,
devon

Melanie said...

When I try to Preview it says
"The new widget id "NewProfile" is invalid for type: Profile"

Tried with Rounded and with Rounded 2 and both do the same. Tried to figure it out myself and can't.

Suggestion? Thanks!
~Melanie

Tasha said...

The blog in question is www.dealfanatic.blogspot.com

I keep getting the error "The new widget id "new-profile" is invalid for type: Profile"

I'm so not a programmer and I have been at it for a bit now. PLEASE HELP or I just might pull the plug on this blog!! Ok, not really but a little guidance would be lovely :-) thx