The Rounders Three Column Template Mod. ~ The Blog Doctor.
Loading...

The Rounders Three Column Template Mod.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

Many bloggers have been hampered by the absence of three column templates in the Official Blogger stables. They feel that the two column templates fail to exploit the wide screen resolutions on today's monitors. One solution is to increase the width of the blog. However, merely increasing the width does not provide space for additional widgets or advertisements which can be done by using a third column.


Increasing the width of the template also has it's limitations if your blog has an audience using lower resolution monitors. A solution to this is to use a Fluid width template which resizes to match any standard monitor.


The Rounders Template has graphics making up its' rounded corners. Hence adding an additional column means that you have to download, resize these graphics and upload them back. I have been able to do this as you can see below :




You can see the demo here. I have kept the first column as the posts column as it is important in search engine optimization. Here is the method for those of you wishing to customize it more for your own blog........



THE MAKING OF THE THREE COLUMN ROUNDERS TEMPLATE


WIDEN THE TEMPLATE


The first step is to increase the width of the template. To do this first go to Template---->Pick New Template----->Check the radio button for the 'Rounders 3' Template and click Save. Remember to backup your first template before this.


Then go to Edit Html subtab of Template tab and scroll down to this code :

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 680px;
.......
}

Increase the width to whatever you want keeping in mind the monitor resolution of your viewers which you can get from Google Analytics.


Then scroll down to this code :

#main-wrap1 {
width:450px;
......
}

#sidebar-wrap {
width:200px;
float:right;
.......
}

Change the widths of the above two columns to your specifications. Leave space for your third column. Change the float:right property to float:left for the sidebar-wrapper.



DEFINING THIRD COLUMN


To define a third column add this oode just below the above code :

#rightsidebar-wrap {
width:200px;
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 */
}

This column width should be such as to occupy the remaining space.



CREATING THIRD COLUMN


Now that the third column has been defined above you have to add code in the <body> of the page to create it. For this scroll down and paste this code :

<div id='rightsidebar-wrap'>

<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='sidebartop1'>
<b:widget id='HTML1' locked='false' title='Rounders Mod by :' type='HTML'/>
<b:widget id='Text1' locked='false' title='ABOUT THIS TEMPLATE' type='Text'/>
</b:section>
</div></div>

<div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>
<b:section class='sidebar' id='sidebar3' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='Poll1' locked='false' title='Template Features Wishlist :' type='Poll'/>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
</b:section>
</div></div>

</div>

Save Template.



RESIZING THE GRAPHIC ROUNDED CORNERS


You have to download and resize the rounded corner images to match the widths you have specified for the columns.


If you want to maintain the same width as in my demo blog you can download the template file and the graphics here.


After resizing the images upload the images to Photobucket.com or to your account at Googlepages and paste their links in the CSS code to form the background images of the blog column corners.


Enjoy!

28 comments:

Anonymous said...

Basically I understand the concept and instructions however I believe the original template has been modified and your version is old needs updating
Thank you

Vin said...

Anonymous,

What parts have been modified?

Arbitragemwppt said...

Hi Vin
tryed to download your rounders template, but whe I go to preview gives me this error message:
Mensagem de erro de XML: The document type declaration for root element type "html" must end with '>'.
I just made a copy past from your model... and always get this error message :(
Can you help me figure out what it is?
thanks

Vin said...

Arbitragemwppt,

Extract to your PC the XML template file from the zip file. Login at Blogger.com and click Layout link on Dashboard. Click Edit Html subtab of Layout tab.

Above the Template Code box click Browse button. Explorer window will open. Navigate to where you stored XML file and select it and click Open.

Then click Upload button.

Arbitragemwppt said...

if I upload... i'll loose all the widgets... and there are quite a few (not as many as yours)...as you can see inhttp://arbitragemwppt.blogspot.com
And being blonde and begginer... I really need the easiest way to add the third column and... keept the widgets :-)I can send you the original layout XML if it helps...
Paula

Vin said...

Arbitragemwppt,

You can try to backup widgets first so that you can add them later.

OR you can also try to add template by keeping widgets intact while changing Layout template.

Ms. KT said...

Having problems creating the 3rd column? And expanding the picture in my header. HELP

vin said...

Ms. KT,

More details please! Exactly at which step are you having problems?

Wezz said...

I'm trying to add a third column, but it's not working. After copying all the code you gave into the html, this is the error message I get when I click on preview: "Your request could not be processed. Please try again."
Help please??

Vin said...

Wezz,

That is a connectivity error. You were unable to connect to Blogger servers which could be due to a variety of reasons.

Try again after some time/from another PC/from another connection/from a broadband connection/connect at less busy times like late night.

Wezz said...

Hi Vin, I did that and this time it accepted the changes. I have the extra column now, but it shows up left below the column that is already there. I would like it left of the blog post section. How do I do that please?

Wezz said...

okay, I understand why I need to keep the blog post section on the left side of the screen for the search engines, but my new second column should be next to the existing one, not below it. Help??

Vin said...

Wezz,

Some reasons for one column being below another :

Content in the column is wider than the width of the column. Like big width pictures, long links and wide videos.

Failure to close a div tag.

Incorrect positioning. Like giving a float:left property instead of a float:right.

The outer column which contains all the columns is smaller than the combined width of the contained columns. Try increasing width of outer column in such cases by increments until the fallen column rises.

Use the latest browser versions : IE8/Firefox3 etc.

GodivaRides said...

Hi Vin,

I've spent countless hours searching for a 3 column "rounder style" colour pkg.

I'm having challenges implementing the coding and my header blocks are cut up.

Here's what I changed:

outer wrapper to 1080
Main to 485 w/25 px margins
sidebar wrapper 235 w/25 px margin
3rd column R sidebar same as above

My final step is to add the body code, but I get these errors:


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


I'm new, so my blog is blank, so it's not a big deal to start over. I lost some widgets when I downloaded another pseudo 3 col Rounder and then had to delete others as I was trying to implement your codes, as I kept getting error messages.

Before I added content, I tried to understand and set up) the Adsense, feedburner and maybe this was too ambitious? Do you have a 3 column Rounder 01,

Help, I can barely see anymore!

godivarides

Vin said...

GodivaRides,

Download the template files :

http://ezeeblog.googlepages.com/RoundersThreeCol.zip

and load them. Then just alter the widths to customize.

BlessedMommy said...

i'm trying to upload a header and center it, but I can't center it, please help!

Vin said...

BlessedMommy,

What is the blog address?

BlessedMommy said...

OOPS vickicaruana.blogspot.com....I don't think I added the ".blogspot", my bad, sorry!

Vin said...

BlessedMommy,

The width of your picture is 768px while the header is 995px. Resize picture in image editor and reupload to header.

The Crowleys said...

The Widgets in the original sidebar have a dotted line under the title and the widgets in the new sidebar do not. It's a small difference, but it bugs me! =D How do I add the dotted line??

Vin said...

The Crowleys,

I see a line under the widget titles now. Try clearing the cache.

The Crowleys said...

You do?? Under the title for the Slideshow, Kayleigh Anne Freeman and Labels? I see lines between the list items in the Labels, but not under the titles.

I tried clearing the cache, both through the Options menu & using CTRL refresh (using firefox), tried opening it in IE and I even went over to my other computer and opened it in IE & Safari there and I don't see lines. I must be missing something - sorry, I'm a newbie!

Vin said...

The Crowleys,

My bad! I was looking at the wrong sidebar. This is the code for the one having the underlines :

#sidebartop h2 {
line-height:1.5em;
color:#223344;
border-bottom: 1px dotted #223344;
margin-bottom: 0.5em;
font: normal bold 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
}

For the new sidebar just put new sidebar name in like this to make new code :

#leftsidebar-wrap h2 {
line-height:1.5em;
color:#223344;
border-bottom: 1px dotted #223344;
margin-bottom: 0.5em;
font: normal bold 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
}


which paste just below previous code.

ebed_adonai said...

Thanks for your advice, friend...^_^

thesikaleon said...

hello VIN

my blog is http://www.greekschat.net

I tried to make rounded corners but no results.
In this post http://betabloggerfordummies.blogspot.com/2006/11/how-to-add-picture-to-background.html you don't say how to add two pictures(top, bottom) for main wrapper, header etc. It's only a guide for a single backround.

I downloaded your demo blog template and I tried to find out what changes I should do to my template but no result. I don't want to load your template because I have made so many modifications to my template and there is no way to start from the begining. I NEED TO make changes to the html code of my template.

Please help and really sorry for my poor English ;)

Vin said...

thesikaleon,

The rounded corners graphic is one image only! Try downloading one of them and opening it in Paint to see what it looks like.

thesikaleon said...

it's not one image

you have "corners top" and "corners bot"

So it's two images

Vin said...

thesikaleon,

That is what I meant. The top right and top left images are combined in ONE image. Same about the bottom right and bottom left image.

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.