Make a Three Columns Rounder3

This is a 'Two Column Rounder3' Template for Blogspot

8. And this is a 'Three Column Rounder3'

You can directly download the Full Code of this templete here on this link

But if you want to do it yourself, then you may follow these steps to convert your 2 column rounder template into three columns template

1. Go into Layout à
   Edit HTML




2. Click on ‘Expand Widget Templates’




3. Replace this following black code with following red code:
   

#outer-wrapper { width:740px; margin:0 auto; text-align:$startSide; font: $bodyFont; }

#outer-wrapper { width:990px; margin:0 auto; text-align:$startSide; font: $bodyFont; }

4. Now replace the following code with red one:
   

#main-wrap1 { width:485px; float:left; background:$mainBgColor url("http://www1.blogblog.com/rounders3/corners_main_bot.gif") no-repeat $startSide 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-wrap1 { width:485px; float:left; background:$mainBgColor url("http://www1.blogblog.com/rounders3/corners_main_bot.gif") no-repeat $startSide bottom; margin: 12px 0 0 12px; 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 */ }

5. Now replace the
following code with red one

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

#sidebar a { color: $bottomSidebarLinkColor; } #sidebar a:hover, #sidebar a:visited { color: $bottomSidebarVisitedLinkColor; } #left-sidebar-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 */ } #left-sidebar-wrap1 { background:$mainBgColor url("http://www.blogblog.com/rounders3/corners_side_top.gif") no-repeat left top; margin:0 0 15px; padding:10px 0 0; color: $mainTextColor; } #left-sidebar-wrap2 { background:url("http://www.blogblog.com/rounders3/corners_side_bot.gif") no-repeat left bottom; padding: 10px 0 8px; } #left-sidebar h2 { color: $postTitleColor; border-bottom: 1px dotted $postTitleColor; }

5. Now replace the following code with red one:

#header-wrapper { background:$titleBgColor url("http://www2.blogblog.com/rounders3/corners_cap_top.gif") no-repeat $startSide top; margin-top:22px; margin-$endSide:0; margin-bottom:0; margin-$startSide:0; padding-top:8px; padding-$endSide:0; padding-bottom:0; padding-$startSide:0; color:$titleTextColor; } #header { background:url("http://www.blogblog.com/rounders3/corners_cap_bot.gif") no-repeat $startSide bottom; padding:0 15px 8px; }

#header-wrapper { background:$titleBgColor url("http://i454.photobucket.com/albums/qq270/threecolumnblogger/ new_corners3_cap_top.gif") no-repeat $startSide top; margin-top:22px; margin-$endSide:0; margin-bottom:0; margin-$startSide:0; padding-top:8px; padding-$endSide:0; padding-bottom:0; padding-$startSide:0; color:$titleTextColor; } #header { background:url("http://i454.photobucket.com/albums/qq270/threecolumnblogger/ new_corners3_cap_bot.gif") no-repeat $startSide bottom; padding:0 15px 8px; }

6. Now replace the following code with red one:

#footer-wrap1 { clear:both; margin:0 0 10px; padding:15px 0 0; } #footer-wrap2 { background:$titleBgColor url("http://www2.blogblog.com/rounders3/corners_cap_top.gif") no-repeat $startSide top; color:$titleTextColor; } #footer { background:url("http://www.blogblog.com/rounders3/corners_cap_bot.gif") no-repeat $startSide bottom; padding:8px 15px; } #footer hr {display:none;} #footer p {margin:0;} #footer a {color:$titleTextColor;} #footer .widget-content { margin:0; }

#footer-wrap1 { clear:both; margin:0 0 10px; padding:15px 0 0; } #footer-wrap2 { background:$titleBgColor url("http://i454.photobucket.com/albums/qq270/threecolumnblogger/ new_corners3_cap_top.gif") no-repeat $startSide top; color:$titleTextColor; } #footer { background:url("http://i454.photobucket.com/albums/qq270/threecolumnblogger/ new_corners3_cap_bot.gif") no-repeat $startSide bottom; padding:8px 15px; } #footer hr {display:none;} #footer p {margin:0;} #footer a {color:$titleTextColor;} #footer .widget-content { margin:0; }

7. Now replace the following code with red one:

<div id='main-wrap1'><div id='main-wrap2'>

<div id='left-sidebar-wrap'> <div id='left-sidebar-wrap1'><div id='left-sidebar-wrap2'> <b:section class='sidebar' id='newsidebar'> <b:widget id='Label2' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'> <data:label.name/> </span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'> <data:label.name/> </a> </b:if> <span dir='ltr'>(<data:label.count/>)</span> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget> </b:section> </div></div></div> <div id='main-wrap1'><div id='main-wrap2'>

8. Now replace the following code with red one:

/** 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-$startSide:0, margin-$endSide: 0; padding: 0; } body#layout #outer-wrapper { width: 730px; } body#layout #footer-wrap1 { padding-top: 0; } ]]></b:skin>

/** Page structure tweaks for layout editor wireframe */ body#layout #header-wrapper, body#layout #outer-wrapper, body#layout #footer-wrap1 { width:840px; } body#layout #main-wrap1 { width: 485px;margin-right:10px; } body#layout #sidebar-wrap, body#layout #left-sidebar-wrap { width:150px; } ]]> ]]></b:skin> </head>

Now Save Template!! Work is done