Create your own THREE column Rounders 2 Template for blogger.

Rounders 2 Template is a 2 column template. But you can make it of 3 column.
It will look like -

THREE column Rounders 2 Template

THREE column Rounders 2 Template Blue

Lets do that:

Apply Rounders 2 as your blogger template. Now go to Template >> Edit HTML. Look for following code

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

Rounders 2 hase 3 wrappers as following

() outer-wrapper i.e.the entire blog
() main-wrapper i.e. the main Blog Posts
() sidebar-wraper i.e. the right sidebar

Now we will create another sidebar i.e. left sidebar.

So change the above code to the following. Changes are made in Green.

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

#newsidebar h2 {
color: $postTitleColor;
border-bottom: 1px dotted $postTitleColor;
}

Now we have to make changes in the Header and the Footer.

Search for

/* Blog Header

Change following code

#header-wrapper {
background:$titleBgColor
url("http://www.blogblog.com/rounders2/corners_cap_top.gif") no-repeat left top;

To this code

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

And now look for below code

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

And change to following code

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

Now it's time for Footer

Search for

/* Footer

Change following code

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

to below code

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

Also change

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

to

#footer {
background:url("http://www.blogpulp.com/imagehost/images/346852006.gif") no-repeat left bottom;

We have to now change layout editor as we have created new sidebar.

Search for following code

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

Replace above code with following

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

Last Step - Now scroll down and look for following code



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



now add following code in Green to ABOVE div id='main-wrap1'.

This will look like



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




It is done. Now save your template and look for changes.
It will look like -

THREE column Rounders 2 Template
THREE column Rounders 2 Template Blue


UPDATE
If you problem with profile, now you can download ready made template here.

Posted in: 3 Column Templates,Blogger Templates,Edit Customize Template

Related Posts