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!

May 22, 2007

Digg This Story

Three Columns Rounders Template

This article is specifically catered to those using the “Rounders” template and wish to add a third column or another sidebar to their current template.

If you are using 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 2 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.


Briefly, the reason why templates like Rounders, Scribe, No. 897, etc. are special is because of the background images. To see what these images are, right click on any part of your Blog and view the picture. In the case of Rounders for example, 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. They were uploaded onto the blogblog.com server and linked to your Blog.

If you want to expand your Blog to 3 columns, 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 the purpose of this tutorial, we have created new rounded corner images and uploaded them onto a free image server for you. You can follow the instructions here and include a third column on the left. The result is this picture you see.

Three Columns Rounders 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 Template

Scroll to the part where you see this:-

#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/rounders/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/rounders/corners_main_top.gif") no-repeat left top;
padding:10px 0 0;
}
#main {
background:url("http://www.blogblog.com/rounders/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.

What we want to do is to 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/rounders/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/rounders/corners_main_top.gif") no-repeat left top;
padding:10px 0 0;
}

#main {
background:url("http://www.blogblog.com/rounders/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/rounders/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/rounders/corners_side_bot.gif") no-repeat left bottom;
padding: 10px 0 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.

Scroll to these 2 headings:-

/* Blog Header
/* Footer

Change the top corners:-

http://www.blogblog.com/rounders/corners_cap_top.gif


To this:-

http://www.blogpulp.com/imagehost/images/1008314701.gif


Also, change the bottom corners:-

http://www.blogblog.com/rounders/corners_cap_bot.gif


To this:-

http://www.blogpulp.com/imagehost/images/196653871.gif


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;
}


After that, scroll to somewhere near the bottom of the script 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 may click “Preview” to see the new layout, and if you are happy with what you see, click “Save Template”. If you don't want the profile on the left, you can remove that page element after that. You have now three columns in your layout!

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 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

75 comments:

Nigel said...

Wonderful, thank you -- just what I was looking for. It worked perfectly.

Alpesh said...

Wonderful job and thanks a lot for same. It worked perfectly well LoveQuoteandpoems

Alpesh said...

Hi would you like to cross linking your quotes blog with mine. It will be beneficial for both of us. I will be working hard on it. If interested mail me at alps07atgmail.com

pearl said...
This comment has been removed by the author.
Nigel said...

Thanks so much for pointing out the problem with my blog. I have fixed it now -- appreciate your help very much.

Mike Shekleton said...

I'm having trouble figuring out how to fit the rounders in for the No. 565 template. I'm a newbie when it comes to CSS/html, and I'm just not having any luck trying to add in the right code. If you have any time, I'd appreciate a hand :) Thanks.

econdo.blogspot.com

bizwhiz said...

Hi Mike Shekleton

The guide here is for the Rounders template. We have not done one for No. 897 or 565 template. Perhaps we'll do one in due course.

BlogmasterPg said...

Hi, Jim I'm Blogmasterpg from Italy: today I'm testing my translation widget flat you helped me to do, but it did'nt work. So the others flag translators in my blogs don't works and i test your and so it does't good. I don't know if the google server is momentaney disabled, or the script is changed, but I allow to you to control it. By to your Italan web friend, Max.

bizwhiz said...

Hi Blogmasterpg

What is the message you see? Is it a message like "your query looks similar to automated requests from a computer virus or spyware application"? If it is, it could be that you have used it too many times. Wait a while or enter the characters to continue.

I just tried with mine. It works fine. So it might be temporary.

Thomas Hamburger Jnr said...

Hi Jen
I have nominated you for a Thinking Blogger's Award - on the grounds that you give an awful lot of thought to explaining quite technical issues in easy-to-understand language!
More details on my blog.
Best wishes
THJnr

Amit said...

I love your blog and some of the tricks have been very helpful. I was wondering if you knew of a way to change the way 'Archive' expands.

Take a look here: http://cross-cut.blogspot.com/

When you go to this link, the "Archive" secion expands/opens to show all the posts for the current month (May). Is there a way to keep the same format for the "Archive" but not have the current month open? So, it'll show all the months closed by default (including the current month), and only when a user clicks on the month, does it expand to show all the posts.

I'll appreciate it if you can come up with a trick for this.

Thanks.
-Amit

Steve Allen said...

Brilliant. Finally, something for the rest of us... THANK YOU!!!! So, I will implement this tonight... My next question then is, CAN YOU MAKE TABS (LIKE A WEBSITE TAB - TO LINK TO A CERTAIN TOPIC LIKE NEWS, PICTURES, ETC.) AND ALSO HAVE A THREE COLUMNS... DO YOU HAVE ANYTHING ON YOUR WEBSITE FOR THAT? Thank you so much!
Steve

bizwhiz said...

Hi Amit

When you click the Archive page element, you have 3 options. The first is "hierarchy", which is what you see, with the posts of the current month displayed.

The second is "flat". Choose this to show the months only. In your case, this is probably what you are looking for.

The third is "dropdown menu". For those who would like to save space on the sidebar, this is ideal.

bizwhiz said...

Hi Steve Allen

Yes, we'll come up with an article on that soon. Thanks.

sophie said...

Thanks for your helpful tutorials!!
I have a question: can I put an image next to the search bar, instead of the search button? how can I do?
yhank you very much :D

Amit said...

Thanks again for the prompt response.

Yes, I was aware of the three different options for the "Archive" and I don't want to change that.

I was wondering if it was possible to tweak the FUNCTIONALITY of the "hierarchy" type so that it does NOT display the posts for the current month, just like it does not display posts for the previous months.

Basically, all the months (including the current month) are toggled to "close" and only when a user toggles them to open, do the posts become visible.

I think this will probably involve some code modification in the widget.

Thanks anyway.

-Amit

Isaias Malta said...

I was applied the tip and was working perfectly! Thanks for the detailed tutorial.

bizwhiz said...

Hi Sophie

The guide in Add Blogger search box now includes a section on replacing the search button in the search bar with an image.

Anonymous said...

Thank you very much Bizwhiz!!!!
Your tips always work so good and
your blog is very helpful for me :)
Thank you again

Sophie

Anonymous said...

Excellent! thanks for you tutorials!!
I'm trying to create a vertical list of images in my sidebar, every image is a link to my recent post..but it doesn't work..you can see an example of what I'd like on www.latartinegourmande.com
Thanks!

Sandy

nixstor said...

Thanks for the info. I have been trying to figure this out for the past one week, and was doing all sorts of stuff until I landed on yout blog. Your blog post helped me for the most part. I am trying to figure out 2 things

1) I scaled the header to 995px but the rounders4 header is being rendered as vanilla green

2) How to set the color of the right side bar to some thing else? for example similar to left side bar and main wrap

I am trying to figure out meanwhile and will post if I figure out.

bizwhiz said...

Hi nixstor

To set the background color, go to the relevant part of the template to insert a background color code.

For example,

#sidebartop-wrap {
background:#99bb55

indicates that the color of your top sidebar is #99bb55. If you want a different color, change this color code to something else. Or, if you want the newsidebar to have this color,your code will look like this:

#newsidebar-wrap1 {
background::#99bb55

You can set the background colors of your Header, main post or footer in the same manner. Just locate the style and add the color code.

You may refer to the HTML Color Code Chart for the color codes.

nixstor said...

I just figured that all the colors were set in the first variable section. Thanks for the color code and chart.

bizwhiz said...

Hi anonymous

If you want to create image links, you may see how it can be done in Hyperlinks and Image Links (II).

nixstor said...

bizwhiz,

I am trying to get my blog (http://nixstor.blogspot.com) right side bar viewable in IE6.0/7.0. I made sure that the java script settings are enabled and even tried disabling firewalls on XP & 2000. Can any one point me in right direction if this is a blatant issue? Just to add, even before I changed the code and had only two columns the side bar was not viewable in IE6.0 and 7.0 on XP and 2000.

bizwhiz said...

Hi Nixstor

Maybe it has nothing to do with the settings in IE. Instead, look at what you have put in the right sidebar. For example, if you have inserted some form of advertisements, try removing that and see if the right sidebar is viewable in IE. Otherwise you may want to check what other third party codes you have added. There may be a conflict somewhere.

Info4BeingRich said...

This is really nice. I have benefitted with your help and have finally set my template to three columned.

Okaye said...

Fantastic tutorial! It was very easy to follow along. Thank you so much!

Now if I could only find such simple instructions for adding adsense to my posts.

bizwhiz said...

Hi Okaye

You may want to check out our article on adding Adsense either just above or underneath each post.

Jee said...

Well,this is my first time in modifying the blogger html.Quite happy with the outcome. Thanks 2u! But u can see that my new left sidebar is not perfect. How do I amend it and also, how do I change the font in my Blog Archive to black again?

Jee - www.internetmillionaires2b.blogspot.com

bizwhiz said...

Hi Jee

Maybe you want to amend the #main-wrap1{ to this:-

margin:15px 0 0 15px;
padding:0 0 10px;

You have added the 15px to the padding instead.

As for the link color, under Template->Fonts and Colors, there should be a setting for link color or visited link color. You can change it to black.

Eric Phuong said...

Thank you very much for your tips on how to change the background and sidebar colors.

I use Minima template as yours. After changing the colors for it by adding background-image: url(http://xxx) to #outer-wrapper{ and body { parts, there is a vertical line appearing appx in the middle of my blog.
Could you possly help me to clear it, please? My blog is http://ezones.blogspot.com.

Your help will be very much appreciated

bizwhiz said...

Hi Eric Phuong

Have you resolved your problem? We viewed your blog using both IE and Firefox browsers and did not see any vertical line in the middle. Maybe you can let us know where it is so that we can take another look.

Dr. Shock said...

It worked only the colors of the background are wrong I am using rounders two and the images on the image server are for rounders. Were can i find the images for rounders 2?
Thanks and regards,

Walter

Elly said...

Even I, a French native person, managed perfectly ! Thanks a million times :-))

bizwhiz said...

Hi Dr Shock

Do you have a photo software? As explained in the guide, we did not do the images for Rounders 2, 3 and 4, but we described how they can be done using the Rounders template as an example. You can extend the width of the corners and upload the new images on to a free server. Maybe when we find more time, we might create the new images and update the article.

Dr. Shock said...

I found the solution for the right color for rounders 2, but header and footer are to small (http://vdbroek.blospot.com) can't find width for header and footer in template, thanks walter

Dr. Shock said...

No it must be the rounded corners the old ones aren't broad enough, were can I find the images for rounders 2?
thanks walter

Dr. Shock said...

Not much help here. I enlarged the graphic my self and placed them on Flickr, everyone planning on making a three column lay out with rounders 2 is welcome to use them, the url's are:
Bottom
http://farm2.static.flickr.com/1328/777965284_a2f55e54fc_o.gif

Top:
http://farm2.static.flickr.com/1093/777965252_2bc36fec82_o.gif

hautenature* said...

hello, for some reason the right sidebar is following up the main wrapper and not acting as a side wrapper. Could you take a look at my blog: http://hautenature.blogspot.com and give me some troubleshooting advice? Much appreciated.

bizwhiz said...

Hi hautenature

Yours is a modified Rounders4 template. The widths may be slightly different from Rounders template which we used in this example.

The reason why both sidebars appear on the same side is because they are currently set to the left.

Change to this:-

#sidebar-wrap {
float:right;

Also, both widths are at 200px. In our guide, we used a width of 240px. You can stick to 200px but you would need to alter the margins or reduce the outer-wrapper width.

As for the corners, we mentioned that the URL for the rounded corners are different. In your case, the corners for the sidebars to be inserted in the newsidebar-wrap1 and 2 are http://www.blogblog.com/rounders4/corners_side_top.gif and http://www.blogblog.com/rounders4/corners_side_bot.gif

hautenature* said...

bizwiz,

i made all the changes that you suggested, still the sidebar is pushed to the bottom........would you please give it another look.

bizwhiz said...

Hi hautenature

We applied your stylesheet changing these:-
.sidebartop-wrap {
.sidebartop-wrap2 {
.sidebarbottom-wrap1 {
.sidebarbottom-wrap2 {

to these:-
#sidebartop-wrap {
#sidebartop-wrap2 {
#sidebarbottom-wrap1 {
#sidebarbottom-wrap2 {

It looks fine when we viewed it. Up till now, we do not know what caused the problem in your template. We are also figuring out whether the chunk of thisnext stylesheet that you have inserted has any effect on it. Since we will have to get a Rounders4 template to work on, you might want to switch to your original backed up template in the meantime.

hautenature* said...

Thanks a million. I will be reverting back. Your advice is very appreciated.

hautenature* said...

funny enough though, I had a suspicion that posting videos from youtube actually was the culprit.

Kate said...

I also use to my blog. Cool! I like it. Thanks so much.

Shoutycrackers said...

Got it! Thanks so much. :)

Rational Staff said...

Great instructions.
I use "harbor" on my blogs.
Think this will work on it?

Lary

bizwhiz said...

Hi Rational Staff

We have not done a guide on Harbor template. Looking at the background image, we thought it is nicer to have only a left sidebar. But we'll try it out and if it is nice, we'll post an article on it.

Félix González said...

Hi Bizwhiz:
I made all changes according to tutorial and I could see the new layout by clicking ¨"preview" and it was fine for me, but I could not save the template. It gave me the following message: HTP04 NOT FOUND.

I have been trying some many times but now I got the same message when I click preview and when I try to save the template .
I closed my blog and started all over again in different hours but I get the same answers. My 2 Columns rounders template is still working properly.

Can you help me on this?

Félix González said...

By the way of the comment before, let me tell you tha when I open my 2 columns rounders template and I click Edit HTML and Preview, it shows the preview sight. Something is wrong. What could be the error?

bizwhiz said...

Hi Felix

We are unable to find a reference to this error in Windows and Blogger and a search of "HTP04 NOT FOUND" in Google revealed no hits. Is there something more to this message? We find it strange too, especially since you are able to preview it and the stylesheet settings should therefore be ok.

meeyauw said...

Thank you so much for this! I was using a 3 column Rounders4 but it was not standard like this one is. I am thrilled and finally I have the blog I want.

Oh, except for one thing: and this problem was in the other 3 column: in the post footer, all the items (the "posted by", date, permalink, comments, etc) are right justified. Since I am an obsessive type person, I would like it left justified. Is there any way to do this?

Thank you again. You are great and you are on my Starred Items Reader and on my blogroll!

bizwhiz said...

Hi Meeyauw

We have now am article specifically on Three columns Blogger 4 template. The text alignment code for the Footer has also been included in the article.

koushal said...

I am really thankfull to you I was looking for it from so long and I have made my blog more good with it
here is my new updated blog
http://hot-vedios.blogspot.com/

J said...

Great job, thanks for this detailed and simplified tutorial. Keep up th great work!

Branlaadee said...

I love the site and your tips are wonderful! Everything is clearly explained and easy to follow.

I have 3 questions about the Rounders and Rounders 4 3rd column.

1. In Rounders 4, it was built in that you could change the colors of the sidebar boxes. In the "Fonts and Colors" section you could easily change the colors on the bottom box and top box. In Rounders, there isnt a section in the scroll menu for the bottom. Is there still a away to customize this area? Your article on changing the sidebar widget colors doesnt change the whole box.

2. In Rounders 4, the left box colors were tied into the bottom box on the right side. Anyway to have it's own easy change color/font commands?

3. Is there a way to add more "boxes" to the left hand menu?

I had changed from Rounders 4 to Rounders because I liked the background color better, but now I think it may have been a mistake if I cant change the bottom box colors.

Sorry this was so long, and thank you for all the work you have put into this site.

bizwhiz said...

Hi Branlaadee

1. In Rounders, there are no separate variables for the bottom segment of the right sidebar. If you want to change the color, you can got to #sidebarbottom and replace the $mainBgColor with a color code.

2. In Rounders 4, the left sidebar has this:-

#newsidebar-wrap1 {
background:$bottomSidebarBgColor

Again, if you want to change the color, replace $bottomSidebarBgColor with a color code.

3. Adding more boxes is possible but will involve creating new CSS classes and style definitions and re-adjusting the margins and paddings.

Branlaadee said...

Thank you for the quick answer! I have the feeling I'll be around here often. I love playing with the blog templates more than I actually like writing in the blog. LOL

WillThink4Wine said...

Marvelous! Cheers to you :-)

Gabe said...

Hey guys. Thanks so much for this tutorial. It was awesome. Question for you. I changed the header to align center like you said at the end of the post, but I'm using a image as my header. I can't get it to center. It is still aligned to the left. Any suggestions.

Thanks,
http://findingtheeast.blogspot.com/

James Ketchell said...

I just wanted to say thanks for such a detailed explanation on how to make these changes. Great resource that will definitely be in my bookmarks for months to come!

Woman with a Hatchet said...

Thank you. This was exactly the walk-through I was looking for.

Michelle said...

Great directions. I was able to change my rounders template into a three column page. I have a few problems with the changes. My header photo is now cut and when I edit page elements in layout, I cannot access the right column. Can you help?

Jessica said...

I am so glad to have stumbled across this site. I was desperately looking for a rounders 3-column template, but they all had issues with the headers.

Thank you so much for sharing this! :)

Adam said...

Thanks so much for this thorough explanation. You are the first to actually walk through how to do it, not just offer a download to an altered template. I learned a lot from this, thanks again!

Zachary said...

This is exactly what I was looking for. It worked out very well on my blog.

Bapa Jali said...

This is great...

I'm a beginner in blogging, do not know anything about html codes but after I edited my template using this tutorial: it works...thanks, in a million...

But I have some problems:
1. my header's edges, the left and right bottom corners are perfectly match with it's upper corners...how can I edit it...?

2. how can I change my sidebars background color...?

3. how can I edit the space between two sidebars...?

again, thanks in a million...
-edwin, http://visit-indonesia-euy.blogspot.com-

Aurora said...

Thank you so much for the help! I love having three columns. It seems like I have more room. This is an awesome blog!

looking4good said...

Wonderful! I'm very happy because I spent a lot of time to get my three columns round blog and I had always problems. With your easy and complete instructions I could get what I wanted... Congratulations ! Surely I will follow your site looking for new tips to improve my blog. Well you deserve a link in my blog. I already put it in my blogroll. Thanks for everything. From Portugal my best regards.

Wendy Sue said...

Hi, I tried your 3 column rounders and it worked beautifully. However, I find that there is many wasted spaces with all the huge margins by the sides. Would like to ask you what can I do to eliminate those margins to optimize on spaces.
Also, was wondering if you know why there's extra spaces after I added Paypal button. Tried searching solution in other forums but none seem to work until someone suggested that it could be due to something in my web page style but I can figure it out at all

Wendy Sue said...

I just realized mine didn't actually turn out exactly the same as the screen shot at the beginning of this post. Only mine turn out with a big margin and lots of wasted spaces. What did I do wrong?

Dibs said...

Hello, I've been using my 3 columns Rounders template successfully till just now! For some reason the right hand column now shows below the posts! The only new thing I did today was add an You Tube video to my post! Can you help?

http://chitra-ammas-kitchen.blogspot.com/

Dibs said...

I managed to fix the problem as well! I went into the HTML section, and reduced the width of the video by 25 points!!

Cookie said...

wish i'd had the success that everyone else seems to have had. i was not able to get this work as it produced an error about NewProfile not being a valid ID. never could figure it out. and my header image chopped off the rounded corners. back to the boring template for me.