Tuesday, December 26, 2006

New Blogger Template for posting large photos, etc.

A common problem: you post a large photo and the sidebar or main column goes sliding to the bottom of the page, or is partly covered by the sidebar, depending on what browser you are using. The solution is to use a tempalte with the sidebar or sidebars on the left and an expandible main column on the right.

2 column modified Denim template for New Blogger

Look at these blogs for example:
Good Online-business-articles
or more specifically, at this post in the blog
Kualal Lumpur Skyline with KL Tower and Petronas Twin Towers. This post contains a 1000 x 665 pixels photo. Note that the sidebar as well as the main column not pushed to the bottom of the post.

That blog uses Darren Delaye's Denim template modified by Stavanger. If you want to use this template, highlight all the codes inside the scrollbox below and paste it into your blog template editor:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Denim
Designer: Darren Delaye
URL: www.DarrenDelaye.com
Date: 11 Jul 2006

Modified By
Designer: Charlemagne Stavanger
URL: http://www.blogcrowds.com/
Support: http://www.blogcrowds.com/
-----------------------------------------------
*/

/* Variable definitions
====================
<Variable name="bgColor" description="Page Background Color"
type="color" default="#efefef" value="#efefef">
<Variable name="textColor" description="Text Color"
type="color" default="#333333" value="#333333">
<Variable name="linkColor" description="Link Color"
type="color" default="#336699" value="#336699">

<Variable name="headerBgColor" description="Page Header Background
Color"
type="color" default="#336699" value="#336699">
<Variable name="headerTextColor" description="Page Header Text Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="headerCornersColor" description="Page Header Corners
Color"
type="color" default="#528bc5" value="#528bc5">

<Variable name="mainBgColor" description="Main Background Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="borderColor" description="Border Color"
type="color" default="#cccccc" value="#cccccc">
<Variable name="dateHeaderColor" description="Date Header Color"
type="color" default="#999999" value="#999999">

<Variable name="sidebarTitleBgColor" description="Sidebar Title
Background Color"
type="color" default="#ffd595" value="#ffd595">
<Variable name="sidebarTitleTextColor" description="Sidebar Title Text
Color"
type="color" default="#333333" value="#333333">

<Variable name="bodyFont" description="Text Font"
type="font" default="normal normal 100% Verdana, Arial,
Sans-serif;" value="normal normal 100% Verdana, Arial, Sans-serif;">
<Variable name="headerFont" description="Page Header Font"
type="font" default="normal normal 210% Verdana, Arial,
Sans-serif;" value="normal normal 210% Verdana, Arial, Sans-serif;">

*/

body {
background: #fff;
margin: 0px;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: $textColor;
font-size/* */:/**/small;
font-size: /**/small;
}
a:link {
color: $linkColor;
}
a:visited {
color: $linkColor;
}
a img {
border-width: 0;
}

#outer-wrapper {
font: $bodyFont;
}

/* Header
----------------------------------------------- */
#header-wrapper {
margin:0;
padding: 0;
background-color: $headerCornersColor;
text-align: left;
}

#header {
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

h1.title {
padding-top: 38px;
margin: 0 14px .1em;
line-height: 1.2em;
font-size: 100%;
}

h1.title a {
color: $headerTextColor;
text-decoration: none;
}

#header .description {
display: block;
margin: 0 14px;
padding: 0 0 40px;
line-height: 1.4em;
font-size: 50%;
}

/* Content
----------------------------------------------- */

.clear {
clear: both;
}


#content-wrapper {
margin: 0 auto;
padding: 0 0 15px;
text-align: left;
background-color: #fff;
border: 0px solid $borderColor;
border-top: 0;
}
#main-wrapper {
position:absolute;
top:180px;
left:260px;
margin:0 50px 0 0;
float: left;
background-color: $mainBgColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in
IE */
}
#sidebar-wrapper {
margin-right: 14px;
width: 200px;
float: left;
background-color: $mainBgColor;
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 */
}

/* Headings
----------------------------------------------- */
h2, h3 {
margin: 0;
}

/* Posts
----------------------------------------------- */
.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}
.post {
margin: 0 0 1.5em;
padding-bottom: 1.5em;
}
.post-title {
margin: 0;
padding: 0;
font-size: 125%;
font-weight: bold;
line-height: 1.1em;
}
.post-title a, .post-title a:visited, .post-title strong {
text-decoration: none;
color: $textColor;
font-weight: bold;
}
.post div {
margin: 0 0 .75em;
line-height: 1.3em;
}
p.post-footer {
margin: -.25em 0 0;
color: $mainBgColor;
font-size: 83%;
}

.post-footer .span {
margin-right: .3em;
}
.comment-link {
margin-left: .3em;
}
.post img {
padding: 4px;
border: 1px solid $borderColor;
}
.post blockquote {
margin: 1em 20px;
}
.post blockquote p {
margin: .75em 0;
}

/* Comments
----------------------------------------------- */
#comments h4 {
margin: 1em 0;
color: $dateHeaderColor;
}
#comments h4 strong {
font-size: 110%;
}
#comments-block {
margin: 1em 0 1.5em;
line-height: 1.3em;
}
#comments-block dt {
margin: .5em 0;
}
#comments-block dd {
margin: .25em 0 0;
}
#comments-block dd.comment-footer {
margin: -.25em 0 2em;
line-height: 1.4em;
font-size: 78%;
}
#comments-block dd p {
margin: 0 0 .75em;
}

.deleted-comment {
font-style:italic;
color:gray;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

#blog-pager-newer-link {
float: left;
}

#blog-pager-older-link {
float: right;
}

#blog-pager {
text-align: center;
}

/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
margin: 1.6em 0 .5em;
padding: 4px 5px;
background-color: $sidebarTitleBgColor;
font-size: 100%;
color: $sidebarTitleTextColor;
}

.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar li {
margin: 0;
padding: 0 0 .5em 15px;
text-indent: -15px;
line-height: 1.5em;
}
.sidebar {
color: $textColor;
line-height:1.3em;
}
.sidebar .widget {
margin-bottom: 1em;
}

.sidebar .widget-content {
margin: 0 5px;
}

/* Profile
----------------------------------------------- */
.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 4px;
border: 1px solid $borderColor;
}

.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font-weight: bold;
line-height: 1.6em;
font-size: 78%;
}

.profile-datablock {
margin:.5em 0 .5em;
}

.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}


/* Footer
----------------------------------------------- */
#footer {
clear: both;
text-align: center;
color: $textColor;
}

#footer .widget {
margin:.5em;
padding-top: 20px;
font-size: 85%;
line-height: 1.5em;
text-align: left;
}
]]></b:skin>
</head>

<body>
<div id='outer-wrapper'><div id='wrap2' style='padding:0 50px;'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test (Header)'
type='Header'>
<b:includable id='main'>
<h1 id='banner-header'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
<h2 id='banner-description'><data:description/></h2>
</b:includable>
</b:widget>
</b:section>
</div>

<div id='content-wrapper'>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive'
type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == "expanded"'>
<a class='toggle' expr:href='data:widget.actionUrl +
"&action=toggle" + "&dir=close&amp;toggle=" + data:interval.toggleId +
"&toggleopen=" + data:toggleopen'>
<span class='zippy toggle-open'>▼ </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl +
"&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId +
"&toggleopen=" + data:toggleopen'>
<span class='zippy'>► </span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a>
(<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/>
(<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='"archivedate " + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link'
expr:href='data:i.url'><data:i.name/></a>
(<span class='post-count'><data:i.post-count/></span>)
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
</b:widget>
<b:widget id='LinkList1' locked='false' title='Link' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
<p>Modified by <a href='http://www.blogcrowds.com/'
style='color:#000'>Blogcrowds</a></p>
</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:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' title='Edit Post'>
<span class='quick-edit-icon'> </span>
</a>
</span>
</b:if>
</b:includable>
<b:includable id='comments' var='post'>
<a name='comments'/>
<div class='comments'>
<b:if cond='data:post.allowComments'>
<h3 class='comments-header'>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h3>

<div class='comments-content'>
<b:loop values='data:post.comments' var='comment'>
<div class='comment'>
<div class='comment-content'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</div>
<p class='comment-footer'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a
expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</p>
</div>

<p class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment
permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</p>
</b:loop>
</div>


<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
</b:if>

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>

</div>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url'
expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
<b:includable id='main' var='top'>
<!-- posts -->
<!-- <div class="entry"> -->

<b:include data='top' name='status-message'/>

<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</b:loop>

<!-- </div> -->

<!-- navigation -->
<b:include name='nextprev'/>

<!-- feed links -->
<b:include name='feedLinks'/>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
<span expr:class='"item-control " + data:backlink.adminClass'>
<a expr:href='data:backlink.deleteUrl' title='Delete Backlink'>
<span class='delete-comment-icon'> </span>
</a>
</span>
</b:includable>
<b:includable id='primarycontent'>
<div id='primarycontent'><div>


<!-- posts -->
<div class='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>



<b:includable id='post' var='post'>
<div class='item entry'>

<div class='itemhead'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

<small class='metadata'>
<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1
<data:top.commentLabel/><b:else/><data:post.numComments/>
<data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>


<span class='chronodata'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url'
title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span>

</small>
</div>

<div class='itemtext'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


<div class='itemhead'>
<p class='post-footer-line post-footer-line-1'>

<!-- backlinks -->
<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url +
"#links"'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>

<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' title='Email Post'>
<span class='email-post-icon'> </span>
</a>
</span>
</b:if>

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
</p>

<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url'
rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</p>

<p class='post-footer-line post-footer-line-3'/>

</div></div>
</b:includable>


<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' title='Edit Post'>
<span class='quick-edit-icon'> </span>
</a>
</span>
</b:if>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + data:comment.adminClass'>
<a expr:href='data:comment.deleteUrl' title='Delete Comment'>
<span class='delete-comment-icon'> </span>
</a>
</span>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
<span expr:class='"item-control " + data:backlink.adminClass'>
<a expr:href='data:backlink.deleteUrl' title='Delete Backlink'>
<span class='delete-comment-icon'/>
</a>
</span>
</b:includable>







<div class='comments'>
<b:includable id='comments' var='post'>


<a name='comments'/>
<h4>
<b:if cond='data:post.numComments == 1'>
1 Comment:
<b:else/>
<data:post.numComments/> Comments:
</b:if>
</h4>

<ol id='commentlist'>

<li class='item'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" +
data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<span class='commentauthor'><a
expr:href='data:comment.authorUrl'><data:comment.author/></a></span>
<b:else/>
<span class='commentauthor'><data:comment.author/></span>
</b:if>
said...
</dt>
<small class='commentmetadata'>
<a expr:href='"#comment-" + data:comment.id' title='comment
permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</small>

<b:if cond='data:comment.isDeleted'>
<div class='itemtext'><data:comment.body/></div>
<b:else/>
<div class='itemtext'><data:comment.body/></div>
</b:if>

</b:loop>
</li>
</ol>

<p>
<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'>Post a Comment</a>
</p><br/><br/>

<div class='backlinks-container'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</b:includable>


<b:includable id='backlinks' var='post'>
<a name='links'/><h4><data:post.backlinksLabel/></h4>

<b:if cond='data:post.numBacklinks != 0'>
<ol>
<b:loop values='data:post.backlinks' var='backlink'>
<div class='collapsed-backlink backlink-control'>
<span class='commentauthor'>
<span class='backlink-toggle-zippy'> </span>
<a expr:href='data:backlink.url'><data:backlink.title/></a>
<b:include data='backlink' name='backlinkDeleteIcon'/>
</span>
<dd class='comment-body collapseable'>
<data:backlink.snippet/>
</dd>
<small class='commentmetadata'>
<span class='pingtype'><data:post.authorLabel/>
<data:backlink.author/></span>
<data:post.timestampLabel/> <data:backlink.timestamp/>
</small>
</div>
</b:loop>
</ol>
</b:if>

<p>
<a class='comment-link' expr:href='data:post.createLinkUrl'
id='b-backlink' target='_blank'><data:post.createLinkLabel/></a>
</p>

</b:includable>


<b:includable id='feedLinks'>
<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>

<b:else/> <!--Post feed links -->
<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.feedLinks'>
<b:include data='post.feedLinks' name='feedLinksBody'/>
</b:if>
</b:if>
</b:loop>
</div>
</b:if>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
Subscribe to:
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url'
expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
</div></div></div>
</b:includable>
<b:includable id='backlinks' var='post'>
<a name='links'/>
<div class='comments'>
<h3><data:post.backlinksLabel/></h3>
<b:if cond='data:post.numBacklinks != 0'>
<dl class='comments-block' id='comments-block'>
<b:loop values='data:post.backlinks' var='backlink'>
<div class='collapsed-backlink backlink-control'>
<dt class='comment-title'>
<span class='backlink-toggle-zippy'> </span>
<a expr:href='data:backlink.url'><data:backlink.title/></a>
<b:include data='backlink' name='backlinkDeleteIcon'/>
</dt>
<dd class='comment-body collapseable'>
<data:backlink.snippet/>
</dd>
<dd class='comment-footer collapseable'>
<span class='comment-author'><data:post.authorLabel/>
<data:backlink.author/></span>
<span class='comment-timestamp'><data:post.timestampLabel/>
<data:backlink.timestamp/></span>
</dd>
</div>
</b:loop>
</dl>
</b:if>

<p class='comment-footer'>
<a class='comment-link' expr:href='data:post.createLinkUrl'
expr:id='data:widget.instanceId + "_backlinks-create-link"'
target='_blank'><data:post.createLinkLabel/></a>
</p>
</div>

</b:includable>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
<b:includable id='feedLinks'>
<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links
-->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>

<b:else/> <!--Post feed links -->
<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.feedLinks'>
<b:include data='post.feedLinks' name='feedLinksBody'/>
</b:if>
</b:if>
</b:loop>
</div>
</b:if>
</b:includable>
<b:includable id='nextprev'>
<p class='content-nav'>
<b:if cond='data:newerPageUrl'>
<span>
<a expr:href='data:newerPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-newer-link"'
expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span>
<a expr:href='data:olderPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-older-link"'
expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</p>
<div class='clear'/>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + data:comment.adminClass'>
<a expr:href='data:comment.deleteUrl' title='Delete Comment'>
<span class='delete-comment-icon'> </span>
</a>
</span>
</b:includable>
<b:includable id='post' var='post'>
<h2 class='date-header'><data:post.dateHeader/></h2>
<div class='entry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='entry-header'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<div class='post-header-line-1'/>

<div class='entry-content'><div class='entry-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->

<p class='entry-footer'>

<span class='post-footers'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>

<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url'
title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span> <span class='separator'>|</span>

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'><b:if
cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/>
<data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url +
"#links"'><data:top.backlinkLabel/></a>
</b:if>
</b:if>

<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' title='Email Post'>
<span class='email-post-icon'> </span>
</a>
</span>
</b:if>

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>

</p>

<p class='entry-footer'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url'
rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</p>

<p class='post-footer-line post-footer-line-3'/>
</div></div>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

<!-- spacer for skins that want sidebar and main to be the same
height-->
<div class='clear'> </div>

</div> <!-- end content-wrapper -->

<div id='footer-wrapper' style='clear:both;'>
<b:section class='footer' id='footer'/>
</div>

</div></div> <!-- end outer-wrapper -->
</body>
</html>


Modified 3 column Denim template for new Blogger

If you want a similar template with 2 sidebars instead, look at this blog Blogging Ideas (close new window/tab to get back to this page), or more specifically, at this post: Effect of posting wide photo on Darren Delaye's Denim template modified by Stavanger (close new window/tab to return to this page). This post contains a 1013 x 1024 pixels photo. Note the horizontal scrollbar at the bottom of the page for you to scroll to see the rest of the photo.

If you are interested in using this template, highlight all the codes in the scrollbox below (ctrl+A) and paste it into your blog's template editor.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Denim
Designer: Darren Delaye
URL: www.DarrenDelaye.com
Date: 11 Jul 2006

Modified By
Designer: Charlemagne Stavanger
URL: http://www.blogcrowds.com/
Support: http://www.blogcrowds.com/
-----------------------------------------------
*/

/* Variable definitions
====================
<Variable name="bgColor" description="Page Background Color"
type="color" default="#efefef" value="#efefef">
<Variable name="textColor" description="Text Color"
type="color" default="#333333" value="#333333">
<Variable name="linkColor" description="Link Color"
type="color" default="#336699" value="#336699">

<Variable name="headerBgColor" description="Page Header Background
Color"
type="color" default="#336699" value="#336699">
<Variable name="headerTextColor" description="Page Header Text Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="headerCornersColor" description="Page Header Corners
Color"
type="color" default="#528bc5" value="#528bc5">

<Variable name="mainBgColor" description="Main Background Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="borderColor" description="Border Color"
type="color" default="#cccccc" value="#cccccc">
<Variable name="dateHeaderColor" description="Date Header Color"
type="color" default="#999999" value="#999999">

<Variable name="sidebarTitleBgColor" description="Sidebar Title
Background Color"
type="color" default="#ffd595" value="#ffd595">
<Variable name="sidebarTitleTextColor" description="Sidebar Title Text
Color"
type="color" default="#333333" value="#333333">

<Variable name="bodyFont" description="Text Font"
type="font" default="normal normal 100% Verdana, Arial,
Sans-serif;" value="normal normal 100% Verdana, Arial, Sans-serif;">
<Variable name="headerFont" description="Page Header Font"
type="font" default="normal normal 210% Verdana, Arial,
Sans-serif;" value="normal normal 210% Verdana, Arial, Sans-serif;">

*/

body {
background: #fff;
margin: 0px;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: $textColor;
font-size/* */:/**/small;
font-size: /**/small;
}
a:link {
color: $linkColor;
}
a:visited {
color: $linkColor;
}
a img {
border-width: 0;
}

#outer-wrapper {
font: $bodyFont;
}

/* Header
----------------------------------------------- */
#header-wrapper {
margin:0;
padding: 0;
background-color: $headerCornersColor;
text-align: left;
}

#header {
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

h1.title {
padding-top: 38px;
margin: 0 14px .1em;
line-height: 1.2em;
font-size: 100%;
}

h1.title a {
color: $headerTextColor;
text-decoration: none;
}

#header .description {
display: block;
margin: 0 14px;
padding: 0 0 40px;
line-height: 1.4em;
font-size: 50%;
}

/* Content
----------------------------------------------- */

.clear {
clear: both;
}


#content-wrapper {
margin: 0 auto;
padding: 0 0 15px;
text-align: left;
background-color: #fff;
border: 0px solid $borderColor;
border-top: 0;
}
#main-wrapper {
position:absolute;
top:180px;
left:400px;
margin:0 50px 0 0;
float: left;
background-color: $mainBgColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in
IE */
}
.sidebar-wrapper {
margin-right: 14px;
width: 160px;
float: left;
background-color: $mainBgColor;
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 */
}

/* Headings
----------------------------------------------- */
h2, h3 {
margin: 0;
}

/* Posts
----------------------------------------------- */
.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}
.post {
margin: 0 0 1.5em;
padding-bottom: 1.5em;
}
.post-title {
margin: 0;
padding: 0;
font-size: 125%;
font-weight: bold;
line-height: 1.1em;
}
.post-title a, .post-title a:visited, .post-title strong {
text-decoration: none;
color: $textColor;
font-weight: bold;
}
.post div {
margin: 0 0 .75em;
line-height: 1.3em;
}
p.post-footer {
margin: -.25em 0 0;
color: $mainBgColor;
font-size: 83%;
}

.post-footer .span {
margin-right: .3em;
}
.comment-link {
margin-left: .3em;
}
.post img {
padding: 4px;
border: 1px solid $borderColor;
}
.post blockquote {
margin: 1em 20px;
}
.post blockquote p {
margin: .75em 0;
}

/* Comments
----------------------------------------------- */
#comments h4 {
margin: 1em 0;
color: $dateHeaderColor;
}
#comments h4 strong {
font-size: 110%;
}
#comments-block {
margin: 1em 0 1.5em;
line-height: 1.3em;
}
#comments-block dt {
margin: .5em 0;
}
#comments-block dd {
margin: .25em 0 0;
}
#comments-block dd.comment-footer {
margin: -.25em 0 2em;
line-height: 1.4em;
font-size: 78%;
}
#comments-block dd p {
margin: 0 0 .75em;
}

.deleted-comment {
font-style:italic;
color:gray;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

#blog-pager-newer-link {
float: left;
}

#blog-pager-older-link {
float: right;
}

#blog-pager {
text-align: center;
}

/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
margin: 1.6em 0 .5em;
padding: 4px 5px;
background-color: $sidebarTitleBgColor;
font-size: 100%;
color: $sidebarTitleTextColor;
}

.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar li {
margin: 0;
padding: 0 0 .5em 15px;
text-indent: -15px;
line-height: 1.5em;
}
.sidebar {
color: $textColor;
line-height:1.3em;
}
.sidebar .widget {
margin-bottom: 1em;
}

.sidebar .widget-content {
margin: 0 5px;
}

/* Profile
----------------------------------------------- */
.profile-img {
float: left;
margin: 0 5px 5px 0;
padding: 4px;
border: 1px solid $borderColor;
}

.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font-weight: bold;
line-height: 1.6em;
font-size: 78%;
}

.profile-datablock {
margin:.5em 0 .5em;
}

.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}


/* Footer
----------------------------------------------- */
#footer {
clear: both;
text-align: center;
color: $textColor;
}

#footer .widget {
margin:.5em;
padding-top: 20px;
font-size: 85%;
line-height: 1.5em;
text-align: left;
}
]]></b:skin>
</head>

<body>
<div id='outer-wrapper'><div id='wrap2' style='padding:0 50px;'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='BETA TEST BLOG (Header)' type='Header'>
<b:includable id='main'>
<h1 id='banner-header'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
<h2 id='banner-description'><data:description/></h2>
</b:includable>
</b:widget>
</b:section>
</div>

<div id='content-wrapper'>
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == "expanded"'>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=close&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy toggle-open'>▼ </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy'>► </span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a>
(<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/>
(<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='"archivedate " + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
(<span class='post-count'><data:i.post-count/></span>)
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
</b:widget>
<b:widget id='LinkList1' locked='false' title='Link' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
<p>Modified by <a href='http://www.blogcrowds.com/' style='color:#000'>Blogcrowds</a></p>
</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:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' title='Edit Post'>
<span class='quick-edit-icon'> </span>
</a>
</span>
</b:if>
</b:includable>
<b:includable id='comments' var='post'>
<a name='comments'/>
<div class='comments'>
<b:if cond='data:post.allowComments'>
<h3 class='comments-header'>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h3>

<div class='comments-content'>
<b:loop values='data:post.comments' var='comment'>
<div class='comment'>
<div class='comment-content'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</div>
<p class='comment-footer'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</p>
</div>

<p class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</p>
</b:loop>
</div>


<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
</b:if>

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>

</div>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
<b:includable id='main' var='top'>
<!-- posts -->
<!-- <div class="entry"> -->

<b:include data='top' name='status-message'/>

<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</b:loop>

<!-- </div> -->

<!-- navigation -->
<b:include name='nextprev'/>

<!-- feed links -->
<b:include name='feedLinks'/>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
<span expr:class='"item-control " + data:backlink.adminClass'>
<a expr:href='data:backlink.deleteUrl' title='Delete Backlink'>
<span class='delete-comment-icon'> </span>
</a>
</span>
</b:includable>
<b:includable id='primarycontent'>
<div id='primarycontent'><div>


<!-- posts -->
<div class='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>



<b:includable id='post' var='post'>
<div class='item entry'>

<div class='itemhead'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

<small class='metadata'>
<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1
<data:top.commentLabel/><b:else/><data:post.numComments/>
<data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>


<span class='chronodata'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span>

</small>
</div>

<div class='itemtext'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


<div class='itemhead'>
<p class='post-footer-line post-footer-line-1'>

<!-- backlinks -->
<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>

<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' title='Email Post'>
<span class='email-post-icon'> </span>
</a>
</span>
</b:if>

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
</p>

<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</p>

<p class='post-footer-line post-footer-line-3'/>

</div></div>
</b:includable>


<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' title='Edit Post'>
<span class='quick-edit-icon'> </span>
</a>
</span>
</b:if>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + data:comment.adminClass'>
<a expr:href='data:comment.deleteUrl' title='Delete Comment'>
<span class='delete-comment-icon'> </span>
</a>
</span>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
<span expr:class='"item-control " + data:backlink.adminClass'>
<a expr:href='data:backlink.deleteUrl' title='Delete Backlink'>
<span class='delete-comment-icon'/>
</a>
</span>
</b:includable>







<div class='comments'>
<b:includable id='comments' var='post'>


<a name='comments'/>
<h4>
<b:if cond='data:post.numComments == 1'>
1 Comment:
<b:else/>
<data:post.numComments/> Comments:
</b:if>
</h4>

<ol id='commentlist'>

<li class='item'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<span class='commentauthor'><a expr:href='data:comment.authorUrl'><data:comment.author/></a></span>
<b:else/>
<span class='commentauthor'><data:comment.author/></span>
</b:if>
said...
</dt>
<small class='commentmetadata'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</small>

<b:if cond='data:comment.isDeleted'>
<div class='itemtext'><data:comment.body/></div>
<b:else/>
<div class='itemtext'><data:comment.body/></div>
</b:if>

</b:loop>
</li>
</ol>

<p>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>Post a Comment</a>
</p><br/><br/>

<div class='backlinks-container'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</b:includable>


<b:includable id='backlinks' var='post'>
<a name='links'/><h4><data:post.backlinksLabel/></h4>

<b:if cond='data:post.numBacklinks != 0'>
<ol>
<b:loop values='data:post.backlinks' var='backlink'>
<div class='collapsed-backlink backlink-control'>
<span class='commentauthor'>
<span class='backlink-toggle-zippy'> </span>
<a expr:href='data:backlink.url'><data:backlink.title/></a>
<b:include data='backlink' name='backlinkDeleteIcon'/>
</span>
<dd class='comment-body collapseable'>
<data:backlink.snippet/>
</dd>
<small class='commentmetadata'>
<span class='pingtype'><data:post.authorLabel/>
<data:backlink.author/></span>
<data:post.timestampLabel/> <data:backlink.timestamp/>
</small>
</div>
</b:loop>
</ol>
</b:if>

<p>
<a class='comment-link' expr:href='data:post.createLinkUrl' id='b-backlink' target='_blank'><data:post.createLinkLabel/></a>
</p>

</b:includable>


<b:includable id='feedLinks'>
<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>

<b:else/> <!--Post feed links -->
<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.feedLinks'>
<b:include data='post.feedLinks' name='feedLinksBody'/>
</b:if>
</b:if>
</b:loop>
</div>
</b:if>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
Subscribe to:
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
</div></div></div>
</b:includable>
<b:includable id='backlinks' var='post'>
<a name='links'/>
<div class='comments'>
<h3><data:post.backlinksLabel/></h3>
<b:if cond='data:post.numBacklinks != 0'>
<dl class='comments-block' id='comments-block'>
<b:loop values='data:post.backlinks' var='backlink'>
<div class='collapsed-backlink backlink-control'>
<dt class='comment-title'>
<span class='backlink-toggle-zippy'> </span>
<a expr:href='data:backlink.url'><data:backlink.title/></a>
<b:include data='backlink' name='backlinkDeleteIcon'/>
</dt>
<dd class='comment-body collapseable'>
<data:backlink.snippet/>
</dd>
<dd class='comment-footer collapseable'>
<span class='comment-author'><data:post.authorLabel/>
<data:backlink.author/></span>
<span class='comment-timestamp'><data:post.timestampLabel/>
<data:backlink.timestamp/></span>
</dd>
</div>
</b:loop>
</dl>
</b:if>

<p class='comment-footer'>
<a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a>
</p>
</div>

</b:includable>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
<b:includable id='feedLinks'>
<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links
-->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>

<b:else/> <!--Post feed links -->
<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.feedLinks'>
<b:include data='post.feedLinks' name='feedLinksBody'/>
</b:if>
</b:if>
</b:loop>
</div>
</b:if>
</b:includable>
<b:includable id='nextprev'>
<p class='content-nav'>
<b:if cond='data:newerPageUrl'>
<span>
<a expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span>
<a expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</p>
<div class='clear'/>
</b:includable>
<b:includable id='post' var='post'>
<h2 class='date-header'><data:post.dateHeader/></h2>
<div class='entry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='entry-header'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<div class='post-header-line-1'/>

<div class='entry-content'><div class='entry-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->

<p class='entry-footer'>

<span class='post-footers'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>

<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span> <span class='separator'>|</span>

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/>
<data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
</b:if>
</b:if>

<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' title='Email Post'>
<span class='email-post-icon'> </span>
</a>
</span>
</b:if>

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>

</p>

<p class='entry-footer'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</p>

<p class='post-footer-line post-footer-line-3'/>
</div></div>
</div>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + data:comment.adminClass'>
<a expr:href='data:comment.deleteUrl' title='Delete Comment'>
<span class='delete-comment-icon'> </span>
</a>
</span>
</b:includable>
</b:widget>
</b:section>

<div id='footer-wrapper' style='clear:both;'>
<b:section class='footer' id='footer'/>
</div>


</div>

<!-- spacer for skins that want sidebar and main to be the same
height-->
<div class='clear'> </div>

</div> <!-- end content-wrapper -->



</div></div> <!-- end outer-wrapper -->
</body>
</html>


Update 17 March 2007: Someone commented they got error messages when trying to save the template obtained from above. I tested them and found that to be true. If you want the template which I used for the examples I showed to illustrate the use of the templates, just email me (provided for in the sidebar) and I will send you them template in xml format as an attachment which you can save, then upload to your blog.

NEWER POST HOME OLDER POST

16 comments:

  1. Anonymous12/30/2006

    How do you put adsense into the left side of the template ? I tried my way but it doesn't work. Thank you.

    I try to look at your 3 side template but still confuse

    ReplyDelete
  2. Hi Ben,

    Tell me what was your way that you tried. Also, URL to your site will be helpful for me to answer your question.

    Peter a.k.a. Enviroman
    Enviroman Says

    ReplyDelete
  3. Anonymous12/30/2006

    I try to add the $sidebar string to my template, that's very stupid ! haha.

    I want to have 3 column like this blog and place the AdSense to the left :)

    here's URL to my blog => http://kosolsak.blogspot.com

    ReplyDelete
  4. You need a lot of knowledge to be able to add a sidebar to existing template. An easier way is to copy a ready made template. You seem to have a new Blogger (beta) template, so use one of those given in this post (2 sidebar on the left) or at
    More new Blogger (formerly beta) template modified by Stavanger or

    new Blogger (beta) 3 column template

    Peter a.k.a. Enviroman
    Enviroman Says

    ReplyDelete
  5. Anonymous12/31/2006

    Thank you, I don't want to copy all and past because I've hard time arranged this one with links and AdSense. Adding them again would make me get a headache. hahaha

    Ben
    Blessing Blog

    ReplyDelete
  6. I get this message when I try to paste the code for the 2-column modified Denim template:

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The reference to entity "action" must end with the ';' delimiter.

    Can you help me please? Thanks.

    ReplyDelete
  7. Hi Echo,

    Try using this method. Try using my current template for this blog Online Business Articles. Go to Google Group Photostore and go to the files section. Download the template file that is titled "Direct from Good Online Articles.xml" and save it into a folder which you can remember. Then sign into your Blogger account and to to the relevant blog. Go to Layout > Template > Edit HTML, then click "Browse" and locate the xml file you just downloaded. Click upload and tell me what result you get.

    Peter a.k.a. enviroman
    Enviroman Says

    ReplyDelete
  8. Thanks, Peter. I've registered with Google Group Photostore because I can't access the files section if I don't.

    ReplyDelete
  9. For some reason the template code doesn't work for me in blogger. Any suggestions? I copied and pasted it into my template but it comes up with odd characters...

    ReplyDelete
  10. Hi Joanna,

    I tested it out with a test blog and I too couldn't save the template. I got error messages when I do that. Those are Stavanger's modified template. I will have to ask him.

    In the meantime, if you are in a hurry, I can send you my template for may example blog as an xml file which you can upload. If you want that, just email me. I have left a way to email me in my blog.

    Peter
    Dummies Guide to Google Blogger

    ReplyDelete
  11. is it true that to actually post larger pix, one has to source them out from an external url, and not use bloggers default uploading options? (because, even if the largest size is selected, and the main wrapper is big enough to hold a larger size pic, the pic size remains restricted to what the blogger uploader defines as larger, even if there is a lot more width in the main wrapper?)
    thanks,
    Kunal

    ReplyDelete
  12. Hi Kunal,

    Correct, correct, correct. (if you want to know why I repeat 3 times, google "VK Lingam" and if that don't quickly give you some idea try "VK Lingam Malaysia). Uploading via Blogger gives only limited size options. I have tested, and you can change its size, from the default large, medium, small to the other default after uploading and to 1 or 2 other sizes. Anything different will produce a blank picture. Can't remember if there is some info useful for you at Uploading and manipulating pictures in Blogger.

    Peter Blog*Star
    Successes with Kontera ContentLink

    ReplyDelete
  13. This comment has been removed by the author.

    ReplyDelete
  14. The above post had to be deleted because there was a long inactive and unbroken URL which can cause problems, especially in Internet Explorer. There was a post published to explain this but cannot find it. Got to make a note and publish a new one.

    It also tried to use the BBCode (Bulletin Board Code, the lightweight markup language used for bulletin boards or forums) [url] in the signature line which would not work because BBcodes are mainly used for forums, and not for blogs, which uses HTML. See Make active (clickable) links in blog posts and comments

    Peter Blog*Star
    Tips and Tricks for Blogger or "Son of Blogger Tips and Tricks"
    slotted for conversion to custom domain (but still not done because no time plus got to proceed carefully to make sure mydomain.com and www.mydomain.com goes to same website, etc.)

    ReplyDelete
  15. Great post. I like it very much. Learn more from you.
    Thank you.

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics