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 26, 2007

Digg This Story

Three Columns Rounders 4 Template

Here, we cover the steps taken to change a Blogger Rounders 4 template into a three column template. Unlike the other Rounders templates, Rounders 4 has an additional picture in the Header which should be enlarged to accommodate the new blog width. When you are at Template -> Edit HTML, look for “Blogger Template Style”. If the Name of your template is “Rounders 4”, follow this guide to customize your template and add a third column or new sidebar to your Rounders 4 template.

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 2 Template;
6. Three Columns Rounders 3 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.


Other than the Header picture, 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. Since we have to expand the width of the Blog to include a new sidebar, these images will be changed and linked through an image server. We have created these new rounded corner images for this article. The new three column Rounders 4 Template will look like this:-

Three Columns Rounders 4 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 4 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/rounders4/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/rounders4/corners_main_top.gif") no-repeat left top;
padding:10px 0 0;
}
#main {
background:url("http://www.blogblog.com/rounders4/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/rounders4/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/rounders4/corners_main_top.gif") no-repeat left top;
padding:10px 0 0;
}
#main {
background:url("http://www.blogblog.com/rounders4/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:$bottomSidebarBgColor url("http://www.blogblog.com/rounders4/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/rounders4/corners_side_bot.gif") no-repeat left bottom;
padding:10px 0px 8px;
}

#newsidebar {
background:url("http://www.blogblog.com/rounders4/rails_side.gif") repeat-y;
}

#newsidebar {
color: $bottomSidebarTextColor;
}

#newsidebar h2 {
color: $bottomSidebarTextColor;
border-bottom: 1px dotted $bottomSidebarTextColor;
margin-bottom: 0.5em;
}

#newsidebar a {
color: $bottomSidebarLinkColor;
}
#newsidebar a:hover,
#newsidebar a:visited {
color: $bottomSidebarVisitedLinkColor;
}


Let us now customize the Header and the Footer. As mentioned, we had created new images for the Header picture as well as 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: #476 url("http://www.blogblog.com/rounders4/corners_cap_top.gif") no-repeat left top;


To this:-


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


Also change this:-


#header-inner {
background:url("http://www.blogblog.com/rounders4/bg_hdr_bot.jpg") no-repeat left bottom;


To this:-


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


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

/* Footer

Change this code:-


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


To this:-


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


And amend this:-


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


To this:-


#footer {
background:url("http://www.blogpulp.com/imagehost/images/563473306.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 4 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, go to /* Blog Header and insert under it 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 4 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

61 comments:

meeyauw said...

You are a genius. The footer is aligned (and I am embarrassed to say I never looked for that left justification myself). I have what I want! Thank you.

Little Robin Hood said...

You give me so much help. By using what you provided in your blog, I have improved my bloggers overall looks. Now I am going to change my daughter's blog into three column. Thank you.
have a look,
http://priscalim.blogspot.com
http://onlyamum.blogspot.com
http://full-time-mothers.blogspot.com

itsme.anoop said...

nice website
very informative

---------------------
admin
askanoop

Swee said...

Jim,
I have linked you to my site:
fortheclueless.blogspot.com

Tuki said...

Thanks, I'll try to transform my blog's template into 3 columns!! Do you know how can I change the background color of my post only for some words? thanks for your beautiful tips :)

meeyauw said...

Do you know anything about activating backlinks on this template?

http://help.blogger.com/bin/answer.py?answer=42552

In that link it talks about
blogger tags which are not on this template. But they are not even on the blogger templates either!

I really really really need to activate this or put code in somewhere according to those instructions.

Unless of course those instructions are worthless anyhow. The Google Blogger help group is NO help about this topic. I have tried and I keep following the backlink tag there.

Thank you.

bizwhiz said...

Hi Meeyauw

That article referred to the old classic template. If you want to activate backlinks, go to Settings -> Comments and choose "Show" for Backlinks.

bizwhiz said...

Hi tuki

You can insert the span tags before and after the text like this:-

<span style="background: ###### ">text</span>

The ###### is the color code.

Tuki said...

Sorry, I didn't mean me.. I'd like to close some text in a colored box (not only underline it). Thank you so much for your help :)

bizwhiz said...

Hi Tuki

That is the code to highlight the text, so that there is a color in the background of the text. Not an underline. But if you are thinking of text in a box with a border, that would be a table, which we shall cover in a separate article.

Tuki said...

Thank you very much! I'll wait for this article ;)

meeyauw said...

Hi again: that just doesn't work. I turn those things on and nothing shows up.

(I know this is a pain, sorry!)

Tuki said...

Hi, I have an other problem: it seems impossibile to me to set the same font size for post's text and sidebar text..i'm trying and trying. Can you help me, please? thanks again

bizwhiz said...

Hi Meeyauw

What doesn't work? Are you talking about the backlinks? I can see a "Links to this post" at the bottom of your posts. If anybody links to a post, that URL should be shown.

bizwhiz said...

Hi Tuki

A typical Minima template will have a variable called Text Font and this font will apply to both the post and the sidebar area.

If you are using a template customized by some other people, it could be that they inserted a specific font type under "body" or "sidebar". Go to these headings in the template and see if that is the case. Alter it if you want to.

bizwhiz said...

Hi Meeyauw

We have noted your problem on backlinks in Safari and Firefox. We may address that in a different article since they do not relate to this topic on Rounders 4 three column templates.

As for your question on stack overflow, it can happen when a program uses too much memory or has endless loops to its instructions. You have inserted many javascripts into your template. One of them could be causing the problem. Since these are all third party codes, you can't change them, but you can try to identify the probable cause by a process of elimination, removing the scripts one at a time.

meeyauw said...

Thank you! I was hoping that the error message would pinpoint the source of the problem. But I will trouble shoot the stuff and see what I come up with.

Marta said...

Thank you for the help! I learn some things whit your blog, but now i have a problem. I trying to change the picture header in rounders4 template...who can i do that?!

bizwhiz said...

Hi Marta

You can do another picture for the header to replace this:-

http://www.blogpulp.com/imagehost/images/51814045.jpg

You may need an image editor to size the photo to the exact dimensions. Host the photo in a server, copy that new URL and replace the above.

Daniel Gonçalves Maia said...

Yes! You are a genius! A selfmade blogger genius! Thank you very much. I'll ad a link to your Blog in my Blog if you allow me to. As for the header, I had removed all that part in my previous 2 column 4rounders and had ad an image acording to it's size designed by myself. I just replaced it for a resized one. It' just another tip, if what to had it.
Again, thank you very much.
If I can be of assistence (WineStuff), please fell free, I'll be glad to help.
Daniel Gonçalves Maia
http://danielgoncalvesmaia.blogspot.com

ekgheiy said...

Thanks for the tutorial!! I changed my blog to the three col layout; however, the additional sidebar is linked to one of my other sidebars. I was hoping to use three different colors, but when I change the color of the left sidebar (using the "Fonts and Colors" tab in the "Layout" settings), the bottom right one automatically changes also. How can I separate the two?

Also, if I choose to go back to the two column layout, what will happen to the items in the third column? Will they be automatically moved to the single sidebar of the new template?

Thank you much again!!

bizwhiz said...

Hi ekgheiy

You can change the background color -

#newsidebar-wrap1 {
background:$bottomSidebarBgColor

to -

#newsidebar-wrap1 {
background:#xxxxxx;

Insert the color code that you want. Similarly, you can change the text color -

#newsidebar {
color: $bottomSidebarTextColor;

to -

#newsidebar {
color: #xxxxxx;

As for converting from 3 columns back to 2 columns, or to another template with 2 columns, yes, the sidebar widgets will automatically be placed in the single sidebar.

ekgheiy said...

I can't thank you enough, but I'll say it again anyway: Thank you!!! :) That "Edit HTML" button is getting less and less scary the more time I spend on your site.

S.M.D. said...

This was really very helpful. I've been getting so irritated with blogger lately because it was giving me nothing but issues to try to change the template to a three column one, but your little thing here helped perfectly.

I do have a question though. What do you need to do to add another section to the left hand column. In Rounders there are two sections on the right hand side--the green section, and the white section. How would I go about adding another white section (since I changed the added column to green)? I want it to be able to have some separation between different things. The green sections would be for stuff pertaining to the blog (categories, quick links, etc.), and the white sections would be for other blog links and the like.

Thanks.

bizwhiz said...

Hi S.M.D.

You would notice in the template that the right side bar has a sidebartop and another sidebarbottom. To have another section in the left column, we can copy one of these and create another set of styles called newsidebartop or newsidebarbottom.

Adjust the margins and paddings to accomodate the new top or bottom section.

Add another <div id='newsidebartop-wrap'> in the body.

You can experiment with it. Observe how we added the modifications (in red) and you will have an idea how you can add one or a few more sections to your template.

The Author said...

Wonderful site, awesome info! I've changed my golf blog to three columns, replaced the header image with my own creation and love the overall look now:

http://sundaysoff.blogspot.com/

Two quick questions:

1) The left sidebar has little white corners? Don't know what I did wrong but going through the instructions a second time, I got the same result.

2) Any idea how I can make the header image link back to the home page again? THANKS SO MUCH!

Marvin

bizwhiz said...

Hi Marvin

1. In our example, we have the left sidebar with a white background and the corners are therefore white. You can change the corners in the newsidebar to these:-

http://www.blogblog.com/rounders4/corners_prof_bot.gif
http://www.blogblog.com/rounders4/corners_prof_top.gif

2. The title already links back to the homepage by default if you are browsing other pages. When you are at the homepage, there is no need to and Blogger has not enabled that.

khalifah_85 said...

thanks dude... :)

thats amazing.. i succed change my 2column blog to 3 column blog.. :)

good info ..

Steve said...

Great info. Even an idiot like myself can follow this stuff you have here. Thanks for making me look like I know what the heck I'm doing.

Blank Mind of Treizie said...

Wow..
You are very generous in giving step by step tutorials on how to do it.
It is very clear and easy to follow.

I am really wanting this to do eversince i created my blog. And i am having a hard time as i am not that familiar in html codes and i cannot do it by myself. And i am really thankful that i found your blog while browsing Google.

Thank you so much. I am going to bookmark your blog so that i can go back anytime i want to.

Blank Mind of Treizie said...

Hi again..
Just want to ask a question regarding the modifications i made in my blog template..

I moved the new sidebar and the sidebar to the left side and the main or the post vody to the left, then now i am experiencing breaking of template in my post body..

Please visit my blog so that you can check it and please tell me what i need to do to fix it..

By the way, i added you in my list of Noted Blog..:)

bizwhiz said...

You can add a left margin to the margin setting. For example, if you want to add 10px, it will be:-

#sidebar-wrap {
margin-left: 10px;
}

Blank Mind of Treizie said...

Thank you for the answer..:)

I configured it out already and made the necessary changes..:)

Anonymous said...

It worked perfectly. Thank you so much. You are a fricking genius!

earnnet said...

Your blog is a good guide for new bloggers like me. I have changed my blog from 2 column to 3 column. Thanks a lot. Have a look.

http://befitandfine.blogspot.com

I think the loading time has slowed a bit wheras I have not added more widgets.

I have also changed labels location from bottom of the post to below the post title. Everything is fine.
While adding labels I typed some in ALL CAPS and other labels first letter starting with capital letter. I want all the labels in the latter format. I tried retyping the label while editing the post but it is automatically taking the first typed type. How to set the whole labels in one format?

bizwhiz said...

Hi earnnet

If it is still a problem, remove that particular label or tag from all the posts. Then insert a fresh label. You can follow our guide to Change and Edit Multiple Posts.

Anonymous said...

Dear Sir,

im have trouble.
how can i remove space between adsense with my posting.
under clik here to read more.

http://pablo-trial.blogspot.com

thanks.

supi said...

Hi,
That was a great blog. Do you have any idea of how to place the leaderboard ad (google ad) just below the main blog pic..

thanks

Daly said...

Your post was most helpful, thank you.

I am only trying to change the width of the header and main post to 855px and 600px ( accomodate photos that are 500px wide):

#outer-wrapper {
width:855px;
margin:0 auto;
text-align:$startSide;
font: $bodyFont;
}
#main-wrap1 {
width:600px;
float:$startSide;
background:$mainBgColor url("http://www.blogpulp.com/imagehost/images/17905033752.gif") no-repeat $startSide

I widened the image on the main post and hosted on blogpulp.com but I don't understand why it doesn't expand??

I also uploaded a header that is 855px wide but the image is compressed ... to what appears to be 740px (as in the original template).

When I had FTP, this all worked when I resized the images and corners but I can't get it to work with custom domain.

Any suggestions or advice you may have will be most appreciated and save me from my frustration...LOL.

Gwen said...

Wow! Wow!! Wow!!!
Thank you SO MUCH! I was able to make this change in no time and it looks great! :)
I feel kind of bad asking for more, but would it be a lot of trouble to show the set-up to get the left hand column split into 2 sections, like the right hand column is, with the dark green background for the top bit and the white background for the bottom bit?
I know that I really should try to figure it out for myself - so please feel free to say you're too busy doing lots of other cool things for us newbie bloggers! ;)
Thanks again - your site is truly wonderful!
--Gwen

Graham Choo said...

Hey Bizwhiz,
Really appreciate what you've done. I've done some changes to try and accomodate my blog, but they're really amateurish.
I expanded the main body size in order to accomodate my posts, but it seems i can't find the code to manipulate the dotted lines in the main body portion. How do i expand these lines to fit the body?
Which codes do I adjust? Thank you

Graham Choo said...

Hi I forgot to post my blog link for you to see. Here it is:
http://temporaryblogfornow.blogspot.com/

h said...

WOO HOO! Thank you so much!

I'm doing the 3 column JIG!

Now I just have to rearrange things!

Kathy said...

Thanks! This worked! I tried another one but I think I kept not doing the right thing.

Today I focused and got it. I am putting you on my blog roll. I needed tweaking help like no other.

h said...

Your directions were awesome, and very easy to follow! Thank you so much!

http://eaandfaith.blogspot.com/

I was changing my blog around a bit, and I wanted to change some of the colors. MOST of them I figured out! I still have work to do on it tho!

I wanted to change the background to a different color, and I noticed the sidebar that I added with your information had an awesome border around it. The two other columns did not have that color and presentation to match yours.

Do I use the photo image links that you supplied to get those edges and colored border...or is there html that I'm over looking to change that color?

Arbitragemwppt said...

Hi
After on day trying all other instructions about changing my 2 columns template to a 3 columns... finally someone advised me to visit your blog... and the solution was so EASY.
THANKS!!!
And I even managed to put the new bar on the right side (I wanted it there instead)
Now... just 2 small problems:
=> The coulors don't change. I go to the colors and fonts tab... and nothing changes!
=> I would like the new side to have the colour of the old side bar and the old side bar to have the color of the new one. How can I do that if I can't change the colors?
Thanks in advance for your help and for the GREAT Blog.
Take a look at http://arbitragemwppt.blogspot.com
I'm new, blonde and a real dummie... but learning a lot with your help

Arbitragemwppt said...

Hi
Me again :(
Just saw the result and the layout does not work so well with the side bars on the left... so I went back to your layout.
Still a lot of questions:
=>The new side bar does not have the bottom bar as the old one. Can we had that bottom side bar to the new side bar?
=> I would like both side bars to have inversed colors. The new one with the old bottom side bar color on top and the olt top side bar color on the bottom. Is that possible?
=> I can't change any of the background colors on the layout. Is that normal?
=> How can I replace the image on the header background by my own image? Instaead of being on top as it is now...
Thanks a lot... sorry for the other "blondie" post... but working on the blog it's really better to have one bar on each side... but with the same configuration (top and bottom side bars) and differente colors
Thanks for your help on this (it's starting to be too long to change all this...)
Hope to hear from you soon :-)

Vhiel Romion-Vance said...

what about if you dont want to put the new sidebar on the left but instaed you want to put it on the right side or move both sidebar to the left. do you have any suggestions?

I appreciate any answer you can give..

thanks..

TreeWife 妈妈 said...

Thanks for the details. Great job ! I have a few queries :-
1) The header seems to have some background colour on the top of the image. What should I do ? How can I centralise the image both horizontally and vertically ?

2) The comments and label icon are aligned to the left towards the author and timestamp when I apply changes on the post layout such as including 'link to this post'. But inital layout of the footer was that the comments and labels were aligned to the right , separated from the authors and time-stamp Please advise.

Thanks ! Appreicate your guidiance.

Mrs. Magoo said...

Thanks! I'm not so great with HTML, etc, and everytime I try to do this I end up getting a blank space between my right (and only) sidebar and my posts; it won't let me add a sidebar to the left side. How can I fix this?
Thanks!

Cole said...

I love this! I started a new blog on Blogspot.com after having used regular HTML via the FTP method for years and while I was able to make minor changes in the new layout system, I was just too damned lazy to do something more! LOL

The 3 columned layuot will definitely work better for me, especially when I get to the point of customizing with my own header images and such.

Thanks a lot! Your link will be going on by sidebar for sure.

mimpi said...

Great job, I really love your tips. Could you provide the demo site of all the template you create? thanks.

adeeb said...

muchas gracias. thank you. terima kasih. now i have 3 columns rounders 4. thank u again.

adeeb said...

by the way, after i included the third column, the background color for my profile is white. how do i change it back to the green? thank u in advance.

karmabutton said...

Thank you so much! I get very overwhelmed with HTML!

Question: I made a three column layout for my Rounders4 template and one of the sidebars is a much farther distance from my main post bar than the other sidebar. Is there anyway to make everything justified? Thank you tons!!

karmabutton.blogspot.com

Divya said...

Awesome! Thanks for the detailed instructions, there are'nt many out there.

Cheers!
Divya

lifemarriagekids said...

you are such a big help for new blog dummies like myself..thank you thank you.

preethi ram said...

Hi author , I am happy using ur template . hey i like parchment and papel morado templates . if u can plz post the code of 3 column papel morado code.
thx,
preethi.

Carrie said...

So I added the three columns to my Rounders 4 template, but somehow the header-inner image is no longer supported because it's not showing up on my blog spot. I meticulously checked my code again and nothing seems to work... Help!???

Geraldo said...

Hi there, I'm trying to convert my blog from 2 to 3 columns but some gifs are not being able to load from the new place with a "Forbidden" message.
This is one gif:

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

This is supposed to be the new 995px gif for the corners.

Let me know. Thanks.

Ork

De said...

Help. It didn't work. I tried it a couple of times and checked letter for letter, etc. that I had it correct. I kept getting the same error message. "The new widget id "NewProfile" is invalid for type: Profile"

What does this mean and how do I fix it.

I absolutely love your site. You are amazing. I have done some of the other things you suggest and they worked PERFECTLY! Thanks for all of your help.

De