Knowledge is good only if it is shared. As a new blogger, I had 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 had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented 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

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 9, 2007

Digg This Story

Difference - HTML and XHTML

When inserting codes into the Blogger template, page element, or blog post, you may have seen error messages that the code could not be parsed, was not well-formed, was broken, or that the elements were not closed properly. These errors can be corrected if you understand the rules that must be adhered to in XHTML documents. Blogger templates use the XHTML 1.0 Strict Document Type. In this article, we shall explain some of the XHTML syntax or rules, so that you may troubleshoot and resolve the problems if these error messages should occur.

XML, HTML and XHTML

We shall keep this short. Just so as you understand what we said about document type, view the Page Source or Source of your Blogger blog. You should see this document type declaration at the very top:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


The terms – XML, HTML and XHTML - refer to the markup language used to write the web pages. Many of us would have heard of HTML (Hypertext Markup Language), invented by Tim Berners-Lee, and used since the early days of internet. XML (Extensible Markup Language) is a meta-language, used to create other markup languages. The traditional HTML was later recast to use the rules of XML and that resulted in a new XML application, called XHTML (Extensible Hypertext Markup Language). Because XHTML rules are strict and unforgiving, not conforming to them when attempting to modify the template would result in error messages. So, what are these rules that Bloggers like us should take note of?

Basic Rules of XHTML

1. Codes to be in lowercase

Since XML is case sensitive, all the element keywords and attribute names used in XHTML should be in the lowercase. For example, the template code is not this:-

<TITLE>Tips for New Bloggers</TITLE>


but this:-

<title>Tips for New Bloggers</title>


If you have noticed, the elements and attribute names between the lesser than (<) and greater than (>) signs have to be in the lowercase. However, the value, which in this case is “Tips for New Bloggers”, can be in the uppercase, lowercase, or mixed case.

2. Attribute values to be in quotation marks

All the attribute values have to be enclosed either in single or double quotation marks. The following examples are not accepted by XHTML:-

<div id=header-wrapper>

<a href=http://tips-for-new-bloggers.blogspot.com>Text Link</a>

<img src=photo.jpg/>

<table width=200 border=0 cellpadding=2>


Instead, they should be written as such:-

<div id='header-wrapper'>

<a href="http://tips-for-new-bloggers.blogspot.com">Text Link</a>

<img src="photo.jpg"/>

<table width="200" border="0" cellpadding="2">


3. Container elements must have closing tags

This is not correct:-

<p>A paragraph.


In XHTML, there must be a closing tag with a forward slash (/) at the end:-

<p>A paragraph.</p>


Examples of the many non-empty elements that have opening and corresponding closing tags are:-

<ul> ... </ul>
<li> ... </li>
<table> ... </table>
<h2> ... </h2>
<div> ... </div>
<span> ... </span>
<dt> ... </dt>
<dd> ... </dd>
<a href> ... </a>


4. Standalone elements to be closed

Some of the elements are empty or standalone. They do not have associated closing tags. Common examples are:-

<br>
<img>
<input>
<frame>
<hr>
<meta>
<link>


Nonetheless, in XHTML, these elements must be terminated or closed. There are two ways to do that. One way to terminate the element is to put a forward slash (/) at the end like this:-

<br/>
<img/>
<input/>
<frame/>
<hr/>
<meta/>
<link/>


The second way is to add a corresponding closing tag like this:-

<br> ... </br>
<img> ... </img>
<input> ... </input>
<frame> ... </frame>
<hr> ... </hr>
<meta> ... </meta>
<link> ... </link>


5. Elements to be properly nested

This means that elements must be closed in the reverse order. For example, this code is not accepted in XHTML:-

<form><table> ... </form></table>


It is improperly nested because the form was created first followed by the table. To close them in the proper order, the table must be closed before the form, like this:-

<form><table> ... </table></form>


6. Document to have only one root element

In the XHTML document, you will see that except for the document type declaration, all the codes are nested between <html> and </html>. This is the root element and all other elements or sub elements are in between. The document structure will look like this:-

<html>
<head> ... </head>
<body> ... </body>
</html>


7. Attribute minimization is not allowed

In XHTML, all attributes should be in the form name="value". Even if the value is the same as the name, it cannot be minimized to one word. Hence, in our Add Text Box and Textarea article, the textarea code is not this:-

<textarea readonly>Hyperlink Code</textarea>


but this:-

<textarea readonly="readonly">Hyperlink Code</textarea>


XHTML Character Entities

Quite a number of readers had asked why they were unable to display HTML codes in their blog posts or why their codes were not well-parsed when inserted into the template. If you have noticed by now, the codes are wrapped in the lesser than (<) and greater than (>) signs. The moment these are posted, they will be interpreted as codes and will trigger an action by the browser. Should you want to display these as part of the text, use their character entities instead.

"&quot;
&&amp;
<&lt;
>&gt;


The next time you see an error message to the effect that the code is not well formed, not well parsed, not properly closed, etc., take a look at this guide, troubleshoot the problem and try out the possible solutions.

© 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

Oct 7, 2007

Digg This Story

Three Columns Thisaway Template (I)

We have polled readers to find out what Blogger templates they are using so that we can roll out articles pertaining to their templates, such as our 3 column template guides to add another sidebar and convert their existing Blogger templates from two columns to three columns. We have posted the conversion tutorials for the popular templates – Minima, Rounders, Denim, Dots, Scribe and Sand Dollar. In this article, we shall give you a step by step guide to insert a third column into the Thisaway family of templates.

Each Thisaway template has a different set of background images. We have redone and created new images, and so as not to confuse readers, we shall deal with the change and modification for each type of Thisaway template. If you are using Thisaway or Thisaway Blue, follow the guides here. If your template is Thisaway Green or Thisaway Rose, look at the tutorial in the second part of this article Three Columns Thisaway Template (II).

If you are not sure what your template is, under Template -> Edit HTML, look for the “Blogger Template Style” Name. If it says “Thisaway”, you can follow this guide to customize your template.

For other templates, please refer to our articles and guides on:-
1. Three Columns Denim Template;
2. Three Columns Dots Template;
3. Three Columns Minima Template;
4. Three Columns Rounders Template;
5. Three Columns Rounders 2 Template;
6. Three Columns Rounders 3 Template;
7. Three Columns Rounders 4 Template;
8. Three Columns Sand Dollar Template;
9. Three Columns Scribe Template.

Note: Some sites offer free three-column templates for download. If you are starting a new blog, you may look up these sites and use their templates. However, if you have an existing blog and merely want to expand the template to include another column, our guides would be helpful. What we do is to take the standard Blogger templates and show you how to add a new sidebar. This approach gives you total control over the changes, and if you have bookmarked this page, you can revisit it in future should you want to reverse the changes. It is also a safer method, since there could be a few out there who may introduce malicious scripts or blog virus into their customized templates without you knowing.


Before you begin to do anything, remember to backup your template. Go to Template -> Edit HTML. Click the “Download Full Template” link to save a copy of your template.



Thisaway Template

The final three-column Thisaway template should look like this:-

Three Columns Thisaway Template (I)

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: #ce8b43 url(http://www.blogblog.com/thisaway/bg_body.gif) repeat-x left top;
color: $textColor;
font-size: small;
}

blockquote {
margin: 0;
padding: 0 10px 0 10px;
border-left: 6px solid #f7e8d8;
border-right: 6px solid #f7e8d8;
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/bg_header_bottom.gif) no-repeat left bottom;
}

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

#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway/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/bg_content.gif) repeat-x left top;
}

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

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

#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/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/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/bg_footer_top.gif) no-repeat left top;
clear: both;
}

#footer {
background: #493015 url(http://www.blogblog.com/thisaway/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: #ce8b43 url(http://www.blogblog.com/thisaway/bg_body.gif) repeat-x left top;
color: $textColor;
font-size: small;
}

blockquote {
margin: 0;
padding: 0 10px 0 10px;
border-left: 6px solid #f7e8d8;
border-right: 6px solid #f7e8d8;
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/ty/bg_header_bottom_2.gif) no-repeat left bottom;
}

#header {
background: #634320 url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/ty/bg_header_2.gif) repeat-x left bottom;
}

#content-wrapper {
position: relative;
width: 987px;
background: #f7f0e9 url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/ty/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/bg_content.gif) repeat-x left top;
}

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

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

#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/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/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/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/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/ty/bg_footer_top_2.gif) no-repeat left top;
clear: both;
}

#footer {
background: #493015 url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/ty/bg_footer_2.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 layout!

Thisaway Blue Template

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

Three Columns Thisaway Template (I)

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: #4386ce url(http://www.blogblog.com/thisaway_blue/bg_body.gif) repeat-x left top;
color: $textColor;
font-size: small;
}

blockquote {
margin: 0;
padding: 0 10px 0 10px;
border-left: 6px solid #d8e7f78;
border-right: 6px solid #d8e7f7;
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_blue/bg_header_bottom.gif) no-repeat left bottom;
}

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

#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway_blue/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_blue/bg_content.gif) repeat-x left top;
}

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

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

#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_blue/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_blue/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_blue/bg_footer_top.gif) no-repeat left top;
clear: both;
}

#footer {
background: #152e49 url(http://www.blogblog.com/thisaway_blue/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: #4386ce url(http://www.blogblog.com/thisaway_blue/bg_body.gif) repeat-x left top;
color: $textColor;
font-size: small;
}

blockquote {
margin: 0;
padding: 0 10px 0 10px;
border-left: 6px solid #d8e7f78;
border-right: 6px solid #d8e7f7;
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/tyb/bg_header_bottom_2.gif) no-repeat left bottom;
}

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

#content-wrapper {
position: relative;
width: 987px;
background: #f7f0e9 url(http://i191.photobucket.com/albums/z76/tipsfornewbloggers/tyb/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_blue/bg_content.gif) repeat-x left top;
}

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

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

#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_blue/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_blue/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_blue/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_blue/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/tyb/bg_footer_top_2.gif) no-repeat left top;
clear: both;
}

#footer {
background: #152e49 url(http://www.blogblog.com/thisaway_blue/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 Blue layout!

Align Header Title and Description

The Header title and description in the Thisaway and Thisaway Blue 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).

This article continues at Three Columns Thisaway Template (II). If you want to insert a second sidebar into the Thisaway Green or Thisaway Rose templates, follow our tutorials there.

© 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

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

Oct 1, 2007

Digg This Story

SEO Tools - Search Engine Optimization

What are search engine optimization tools, webmaster tools, Google page rank checker, SEO tools, and how can these internet tools help to bring more quality traffic to your Blog? There are many free online web tools that webmasters can use to find out more information about their sites. The tools can also alert the webmasters to possible problems search engines may have with the site's template codes and design. Here, we shall, for the benefit of our new bloggers, explain how these webmaster tools might help improve your website's PageRank.

Search Engine Optimization

We define Search Engine Optimization as – a method or process of improving and optimizing the ranking of a website in search engine results.

With millions of pages of search results for any given keyword, webmasters would want to have their website appear among the first couple of search result listings. The higher the position or ranking, the greater the likelihood that internet users will visit your site. This Search Engine Optimization (or SEO) concept is no different from a brick-and-mortar shop where location and visibility affect how many customers will pass by the shop and hopefully drop in for a visit. On the internet, your virtual site deserves a good location and visibility, and SEO consultants believe they know how to achieve that.

Blog Directory and Search Engine Listings

After having published a Blog or website, the first thing to do is to make sure that the information relating to the site is available on the internet. Web Directories, Blog Directories and Search Engines are the internet Yellow Pages. Although the major Search Engines will crawl your website even without any action on your part, it will be much faster if you could proactively provide them your site information. We had written articles on how and where to submit the blog information so as to have your site fully indexed and appear in many places on the internet.

Read these guides and follow the steps outlined:-

1. Submit Blogger Sitemap to Google Webmaster

2. Submit Blogger Sitemap to Yahoo!

3. Submit Blogger Sitemap to MSN and Ask.com

4. Submit Blog to Search Engines

5. Submit Blog to Blog Directories

6. Submit RSS Feeds and Pings

7. Blog Traffic Exchange

Free SEO Tools

After you have submitted your website's data to all the search engines and directories, you should be able to find your site somewhere on the internet. If you do a keyword search on your website's topic, you may find many other listings in the search results ahead of yours. These are the sites which have better page ranks and are optimized for the search engines. You can optimize your blog or website too.

To attract business, many SEO sites have put up some of their SEO tools for free. Commercial sites which are serious in wanting to climb up the search ranking will pay the SEO consultants for more value-added services. If you are like us, blogging out of fun and passion, it might be better to use only the free services for a start.

Enter words like - free SEO tools - into the search box and you can see what some of these sites offer.



Suggested SEO Tools

Many of the SEO webmaster sites have similar free tools and services. You can try any of them, though the one that we like is iWebTool. In fact, they have a link exchange program which you may want to check out. Among the SEO Tools, the ones we find useful in all these sites are:-

a. Backlink Checker – A list of sites that have linked to your blog or website. PageRank is largely determined by the number and quality of links to your site. Monitor this and you can probably guess what your PageRank ought to be.

b. Broken Link Checker – A look at which of the links in your site are pointing to incorrect or non-existent URLs. Having too many outdated and broken links on your web page may irritate not only the readers but the search spiders. Do this housekeeping once in a while to remove the bad links.

c. Google PageRank Checker – The Google PageRank of your site. You can also download Mozilla Firefox with Google Toolbar to view the Google PageRanks of all the sites that you visit.

d. Google PageRank Prediction – A future Google PageRank prediction. If you are dying to know, these sites can give you a fair estimate of your future PageRank.

e. HTML Optimizer – A clean up of your HTML source code. Be careful when you apply the suggested changes though. Always good to backup the template before making any modification.

f. Index Checker – Number of pages of your website that are indexed by search engines. If pages are missing from the index, try submitting your sitemap again.

g. Keyword Density Checker – The keyword distribution in your webpage. This will by and large influence the sort of Ads that AdSense will place on your site.

h. Keyword Suggestor – Suggested popular keywords for your website. Bear in mind these keywords when writing or editing your posts.

i. Meta-tags Generator – Configuration of website's meta-tags. Tailor a suitable description and set of keywords to be inserted into the template.

j. Reciprocal Link Checker – A check to see if the partners in your blogrolls or link exchange are linking to you.

k. Spider Simulator – The page contents as seen by a search engine spider. Some may give you a breakdown of the commonly used keywords in your site.

l. Traffic Graphs – A comparison of your site's and other competitor sites' traffic history graphs in Alexa.

m. Website Speed Test – Speed of website page load. If you find the pageload time a little long, take some measures to have a Faster Web Page Load Time.

Basic Tools

Should you want to have a quick look at what some of the SEO tools are about, we have created a few basic search tools over here at our Tips for New Bloggers site.

Yahoo!

To know how Yahoo! sees your site, enter into the search box below your website's URL in full, beginning with http:// For Blogger blogs, you do not have to add a “www.” into the blog URL.

1. Yahoo! Indexed Pages

The results will show you the number and details of the web Pages that are indexed by Yahoo!



2. Yahoo! Backlinks

Enter your site's URL to see the Inlinks or backlinks of your site.



Google

The data in the various search engines are not the same. You can have a look at how your blog is performing in Google search by entering your site URL below.

1. Google Indexed Pages

Enter URL after the word site: to view the indexed pages in Google.



2. Google Backlinks

Enter URL after the word link: for details of the backlinks to your site.



Microsoft Live Search

Compared to Google and Yahoo!, MSN spiders may not index as many pages. Nevertheless, if you are curious to know, enter your blog URL into the search boxes below.

1. MSN Indexed Pages

Enter URL after the word site: to view the indexed pages in MSN.



2. MSN Backlinks

Enter URL after the word link: to view the backlinks.



Page Rank Checker

This search tool is provided by Prchecker. Enter a URL into the form to view the Google PageRank.



Alexa Rankings

Alexa monitors the web traffic of many top sites. You can compare and view the Alexa traffic graph of your site by entering your site URL into the search box below.



© 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