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

banner
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