Knowledge is good only if it is shared. As a new blogger, I have 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 have started with the new “Minima” template. As I make the changes or learn something new, I shall document 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

Search World-Wide-Web

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!

Oct 7, 2007

Digg This Story

Three Columns Thisaway Template (II)

In the earlier Three Columns Thisaway Template (I) article, we have given a how-to guide on changing the Thisaway and Thisaway Blue templates from two-column to three-column templates. In this second part, we shall show you how to add a new sidebar into the Thisaway Green and Thisaway Rose templates. As we had mentioned, before modifying the template, be sure to back up the existing template. After making the changes, preview the template and if you see a new 3 column template layout, you may continue to save the changes. If you don't see the second sidebar, go through the steps again and double check to make sure that you have correctly amended the code.

Thisaway Green Template

The final three-column Thisaway Green Template should look like this:-

Three Columns Thisaway Template (II)

After you have backed up the current template, scroll to these lines in the template code:-

/* global
-------------- */
body {
margin: 0;
text-align: center;
min-width: 760px;
background: #9dce43 url(http://www.blogblog.com/thisaway_green/bg_body.gif) repeat-x left top;
color: $textColor;
font-size: small;
}

blockquote {
margin: 0;
padding: 0 10px 0 10px;
border-left: 6px solid #e8f4d3;
border-right: 6px solid #e8f4d3;
color: $postTitleColor;
}

code {
color: $postTitleColor;
}

hr {
display: none;
}

/* layout
-------------- */
#outer-wrapper {
margin: 0 auto;
width: 760px;
text-align: left;
font: $bodyFont;
}

#header-wrapper {
padding-bottom: 15px;
background: url(http://www.blogblog.com/thisaway_green/bg_header_bottom.gif) no-repeat left bottom;
}

#header {
background: #4b6320 url(http://www.blogblog.com/thisaway_green/bg_header.gif) repeat-x left bottom;
}

#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway_green/bg_main_wrapper.gif) repeat-y left top;
}

#main-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
padding: 0;
width: 483px;
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 {
padding: 22px 8px 0 8px;
background: url(http://www.blogblog.com/thisaway_green/bg_content.gif) repeat-x left top;
}

.post {
margin: 0 8px 14px 21px;
padding: 0;
border-bottom: 3px solid #e8f4d3;
}

#comments {
margin: 0 16px 14px 29px;
padding: 10px;
border: 1px solid #e4f0ce;
background-color: #eff5e4;
}

#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: right;
margin: 0 3px 0 0;
width: 269px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway_green/bg_sidebar.gif) repeat-x left top;
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 */
}

#sidebar {
padding: 7px 11px 0 14px;
background: url(http://www.blogblog.com/thisaway_green/bg_sidebar_arrow.gif) repeat-y 179px 0;
}

#sidebar .widget {
margin-bottom: 20px;
}

#footer-wrapper {
padding-top: 15px;
background: url(http://www.blogblog.com/thisaway_green/bg_footer_top.gif) no-repeat left top;
clear: both;
}

#footer {
background: #374915 url(http://www.blogblog.com/thisaway_green/bg_footer.gif) repeat-x left top;
text-align: center;
min-height: 2em;
}

Change, amend or insert the portions (shown in red):-

/* global
-------------- */
body {
margin: 0;
text-align: center;
min-width: 987px;
background: #9dce43 url(http://www.blogblog.com/thisaway_green/bg_body.gif) repeat-x left top;
color: $textColor;
font-size: small;
}

blockquote {
margin: 0;
padding: 0 10px 0 10px;
border-left: 6px solid #e8f4d3;
border-right: 6px solid #e8f4d3;
color: $postTitleColor;
}

code {
color: $postTitleColor;
}

hr {
display: none;
}

/* layout
-------------- */
#outer-wrapper {
margin: 0 auto;
width: 987px;
text-align: left;
font: $bodyFont;
}

#header-wrapper {
padding-bottom: 15px;
background: url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/tyg/bg_header_bottom_2.gif) no-repeat left bottom;
}

#header {
background: #4b6320 url(http://www.blogblog.com/thisaway_green/bg_header.gif) repeat-x left bottom;
}

#content-wrapper {
position: relative;
width: 987px;
background: #f7f0e9 url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/tyg/bg_main_wrapper_2.gif) repeat-y left top;
}

#main-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
padding: 0;
width: 483px;
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 {
padding: 22px 8px 0 8px;
background: url(http://www.blogblog.com/thisaway_green/bg_content.gif) repeat-x left top;
}

.post {
margin: 0 8px 14px 21px;
padding: 0;
border-bottom: 3px solid #e8f4d3;
}

#comments {
margin: 0 16px 14px 29px;
padding: 10px;
border: 1px solid #e4f0ce;
background-color: #eff5e4;
}

#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: right;
margin: 0 3px 0 0;
width: 247px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway_green/bg_sidebar.gif) repeat-x left top;
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 */
}

#sidebar {
padding: 7px 11px 0 14px;
background: url(http://www.blogblog.com/thisaway_green/bg_sidebar_arrow.gif) repeat-y 159px 0;
}

#sidebar .widget {
margin-bottom: 20px;
}

#newsidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
width: 247px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway_green/bg_sidebar.gif) repeat-x left top;
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 {
padding: 7px 11px 0 14px;
background: url(http://www.blogblog.com/thisaway_green/bg_sidebar_arrow.gif) repeat-y 159px 0;
}

#newsidebar .widget {
margin-bottom: 20px;
}

#footer-wrapper {
padding-top: 15px;
background: url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/tyg/bg_footer_top_2.gif) no-repeat left top;
clear: both;
}

#footer {
background: #374915 url(http://www.blogblog.com/thisaway_green/bg_footer.gif) repeat-x left top;
text-align: center;
min-height: 2em;
}


We have done up new background images to accommodate the new widths. The widths of the sidebars are slightly reduced.

Scroll down to these lines:-

/** Page structure tweaks for layout editor wireframe */

body#layout #main,
body#layout #sidebar {
padding: 0;
}


Change them to this:-

/** Page structure tweaks for layout editor wireframe */

body#layout #main,
body#layout #sidebar,
body#layout #newsidebar {
padding: 0;
}


Further down the template, look for this and add the lines (shown in red):-

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>


This places your Profile in the left sidebar. This can be removed later. Now, “Preview” the template to view the changes and if see the new sidebar nicely aligned, click “Save Template”. Remove the Profile if you don't want it there by going back to Template -> Page Elements and removing the Profile widget. Refresh your Blog to see your new Three Column Thisaway Green layout!

Thisaway Rose Template

The final three-column Thisaway Rose Template should look like this:-

Three Columns Thisaway Template (II)

After you have backed up the current template, scroll to these lines in the template code:-

/* global
-------------- */
body {
margin: 0;
text-align: center;
min-width: 760px;
background: #ce436e url(http://www.blogblog.com/thisaway_rose/bg_body.gif) repeat-x left top;
color: $textColor;
font-size: small;
}

blockquote {
margin: 0;
padding: 0 10px 0 10px;
border-left: 6px solid #f7d8e2;
border-right: 6px solid #f7d8e2;
color: $postTitleColor;
}

code {
color: $postTitleColor;
}

hr {
display: none;
}

/* layout
-------------- */
#outer-wrapper {
margin: 0 auto;
width: 760px;
text-align: left;
font: $bodyFont;
}

#header-wrapper {
padding-bottom: 15px;
background: url(http://www.blogblog.com/thisaway_rose/bg_header_bottom.gif) no-repeat left bottom;
}

#header {
background: #632035 url(http://www.blogblog.com/thisaway_rose/bg_header.gif) repeat-x left bottom;
}

#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway_rose/bg_main_wrapper.gif) repeat-y left top;
}

#main-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
padding: 0;
width: 483px;
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 {
padding: 22px 8px 0 8px;
background: url(http://www.blogblog.com/thisaway_rose/bg_content.gif) repeat-x left top;
}

.post {
margin: 0 8px 14px 21px;
padding: 0;
border-bottom: 3px solid #f7d8e2;
}

#comments {
margin: 0 16px 14px 29px;
padding: 10px;
border: 1px solid #f0ced8;
background-color: #f5e4e9;
}

#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: right;
margin: 0 3px 0 0;
width: 269px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway_rose/bg_sidebar.gif) repeat-x left top;
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 */
}

#sidebar {
padding: 7px 11px 0 14px;
background: url(http://www.blogblog.com/thisaway_rose/bg_sidebar_arrow.gif) repeat-y 179px 0;
}

#sidebar .widget {
margin-bottom: 20px;
}

#footer-wrapper {
padding-top: 15px;
background: url(http://www.blogblog.com/thisaway_rose/bg_footer_top.gif) no-repeat left top;
clear: both;
}

#footer {
background: #491525 url(http://www.blogblog.com/thisaway_rose/bg_footer.gif) repeat-x left top;
text-align: center;
min-height: 2em;
}

Change, amend or insert the portions (shown in red):-

/* global
-------------- */
body {
margin: 0;
text-align: center;
min-width: 987px;
background: #ce436e url(http://www.blogblog.com/thisaway_rose/bg_body.gif) repeat-x left top;
color: $textColor;
font-size: small;
}

blockquote {
margin: 0;
padding: 0 10px 0 10px;
border-left: 6px solid #f7d8e2;
border-right: 6px solid #f7d8e2;
color: $postTitleColor;
}

code {
color: $postTitleColor;
}

hr {
display: none;
}

/* layout
-------------- */
#outer-wrapper {
margin: 0 auto;
width: 987px;
text-align: left;
font: $bodyFont;
}

#header-wrapper {
padding-bottom: 15px;
background: url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/tyr/bg_header_bottom_2.gif) no-repeat left bottom;
}

#header {
background: #632035 url(http://www.blogblog.com/thisaway_rose/bg_header.gif) repeat-x left bottom;
}

#content-wrapper {
position: relative;
width: 987px;
background: #f7f0e9 url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/tyr/bg_main_wrapper_2.gif) repeat-y left top;
}

#main-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
padding: 0;
width: 483px;
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 {
padding: 22px 8px 0 8px;
background: url(http://www.blogblog.com/thisaway_rose/bg_content.gif) repeat-x left top;
}

.post {
margin: 0 8px 14px 21px;
padding: 0;
border-bottom: 3px solid #f7d8e2;
}

#comments {
margin: 0 16px 14px 29px;
padding: 10px;
border: 1px solid #f0ced8;
background-color: #f5e4e9;
}

#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: right;
margin: 0 3px 0 0;
width: 247px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway_rose/bg_sidebar.gif) repeat-x left top;
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 */
}

#sidebar {
padding: 7px 11px 0 14px;
background: url(http://www.blogblog.com/thisaway_rose/bg_sidebar_arrow.gif) repeat-y 159px 0;
}

#sidebar .widget {
margin-bottom: 20px;
}

#newsidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
width: 247px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway_rose/bg_sidebar.gif) repeat-x left top;
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 {
padding: 7px 11px 0 14px;
background: url(http://www.blogblog.com/thisaway_rose/bg_sidebar_arrow.gif) repeat-y 159px 0;
}

#newsidebar .widget {
margin-bottom: 20px;
}

#footer-wrapper {
padding-top: 15px;
background: url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/tyr/bg_footer_top_2.gif) no-repeat left top;
clear: both;
}

#footer {
background: #491525 url(http://www.blogblog.com/thisaway_rose/bg_footer.gif) repeat-x left top;
text-align: center;
min-height: 2em;
}


We have done up new background images to accommodate the new widths. The widths of the sidebars are slightly reduced.

Scroll down to these lines:-

/** Page structure tweaks for layout editor wireframe */

body#layout #main,
body#layout #sidebar {
padding: 0;
}


Change them to this:-

/** Page structure tweaks for layout editor wireframe */

body#layout #main,
body#layout #sidebar,
body#layout #newsidebar {
padding: 0;
}


Further down the template, look for this and add the lines (shown in red):-

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>


This places your Profile in the left sidebar. This can be removed later. Now, “Preview” the template to view the changes and if see the new sidebar nicely aligned, click “Save Template”. Remove the Profile if you don't want it there by going back to Template -> Page Elements and removing the Profile widget. Refresh your Blog to see your new Three Column Thisaway Rose layout!

Align Header Title and Description

The Header title and description in the Thisaway Green and Thisaway Rose templates are aligned to the left. To adjust them to the center or a fixed position in the Header, read the guidelines at Header Image and Title Alignment (II).

© 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

bizwhiz at 9:27 AM

Categories , , , , , , , , , , , ,

1 comments:

Ashu said...

Hi! Could you please post the how-to for a 3 column Tic Tac template? Thanks...

November 27, 2007 1:10 AM

I have something to say ...

Subscribe to: Post Comments (Atom)