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!
An update on Google+ and Blogger
-
Following the announcement of Google+ API deprecation scheduled for March
2019, a number of changes will be made to Blogger’s Google+ integration on
4 Febr...
