There is a previous post New Blogger 3 column templates modified by Charlemagne Stavanger (click "BACK" button to get back to this page). However, the post is becoming very long, and the Dots template posted there has no Header. So here is a new post about another New Blogger template.
This blog Alternative Medicine Articles is an example of Dots 3 column template for New Blogger that has a Header. It was modified mostly by Charlemagne Stavanger of Blogcrowds, but with some input from me. With Stavanger's permission, I put the template below for your convenience. The template has been modified to have 2 additional "Add a Page Element" - one for the Header, and one for the main column. With that modification, I have managed to put an AdSense link unit just below the title in the above blog, and a disclaimer plus a sitesearch box above the main column.
<?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: Dots
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 24 Feb 2004
Updated by: Blogger Team
Modified By
Designer: Charlemagne Stavanger
URL: http://www.blogcrowds.com/
Support: http://www.blogcrowds.com/
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="textcolor" description="Text Color" type="color"
default="#333" value="#333333">
<Variable name="pagetitle" description="Blog Title Color" type="color"
default="#353" value="#335533">
<Variable name="blogDescriptionColor" description="Blog Description Color"
type="color" default="#996" value="#999966">
<Variable name="posttitle" description="Post Title Color" type="color"
default="#996" value="#999966">
<Variable name="linkcolor" description="Link Color" type="color"
default="#488" value="#448888">
<Variable name="vlinkcolor" description="Visited Link Color" type="color"
default="#885" value="#888855">
<Variable name="dateheadercolor" description="Date Header Color"
type="color" default="#663" value="#666633">
<Variable name="sidebartitle" description="Sidebar Title Color" type="color"
default="#663" value="#666633">
<Variable name="borderColor" description="Border Color"
type="color" default="#9b9" value="#99bb99">
<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="pagetitlefont" description="Blog Title Font" type="font"
default="normal normal 250% Georgia,Serif" value="normal normal 250% Georgia,Serif">
<Variable name="blogDescriptionFont" description="Blog Description Font"
type="font"
default="normal normal 100% Verdana, Arial, Sans-Serif" value="normal normal 100% Verdana, Arial, Sans-Serif">
<Variable name="dateHeaderFont" description="Date Header Font"
type="font" default="normal normal 95% Georgia, Serif" value="normal normal 95% Georgia, Serif">
<Variable name="headerfont" description="Sidebar Title Font" type="font"
default="normal normal 100% Georgia,Serif" value="normal normal 100% Georgia,Serif">
*/
body {
margin: 0px 0px 0px 0px;
background:#fff url("http://www.blogblog.com/dots/bg_dots.gif");
background-position: 50% 31px;
text-align:center;
font:x-small Verdana, Arial, Sans-serif;
color:$textcolor;
font-size/* */:/**/small;
font-size: /**/small;
}
/* Page Structure
----------------------------------------------- */
#outer-wrapper {
width:890px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}
#header-wrapper {
width:890px;
height:50px;
margin-bottom:20px;
background: #fff url("http://www.blogblog.com/dots/bg_dots2.gif");
}
#header{padding:0 20px 2px;background: #fff
url("http://www.blogblog.com/dots/bg_dots2.gif") -5px 0px;}
#main-wrapper {
width:450px;
float:left;
margin:0 10px;
padding:0 0 20px;
font-size:85%;
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 {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") -100px
-100px;
padding:20px 10px 15px;
}
.sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
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 {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") -50px
10px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
/* Title & Description
----------------------------------------------- */
.Header h1 {
margin:0 0 .5em;
line-height: 1.4em;
font: $pagetitlefont;
color: $pagetitle;
}
.Header h1 a {
color:$pagetitle;
text-decoration:none;
}
.Header .description {
margin:0 0 1.75em;
color: $blogDescriptionColor;
font: $blogDescriptionFont;
}
/* Links
----------------------------------------------- */
a:link {
color:$linkcolor;
}
a:visited {
color:$vlinkcolor;
}
a:hover {
color:$vlinkcolor;
}
a img {
border-width:0;
}
/* Posts
----------------------------------------------- */
h2.date-header {
margin:0 0 .75em;
padding-bottom:.35em;
border-bottom:1px dotted $borderColor;
text-transform:uppercase;
letter-spacing:.3em;
color: $dateheadercolor;
font: $dateHeaderFont;
}
.post {
margin:0 0 2.5em;
}
.post h3 {
margin:.25em 0;
line-height: 1.4em;
font: $headerfont;
font-size: 130%;
font-weight: bold;
color:$posttitle;
background:url("http://www.blogblog.com/dots/bg_post_title.gif")
no-repeat 0 .25em;
padding:0 0 1px 45px;
}
.post h3 a {
text-decoration:none;
color: $posttitle;
}
.post h3 a:hover {
color: $textcolor;
}
.post p {
margin:0 0 .75em;
line-height:1.6em;
}
.post-footer {
margin:0;
}
.uncustomized-post-template .post-footer {
text-align: right;
}
.uncustomized-post-template .post-author,
.uncustomized-post-template .post-timestamp {
display: block;
float: left;
margin-right: 4px;
text-align: left;
}
.post-author, .post-timestamp {
color:$posttitle;
}
a.comment-link {
/* IE5.0/Win doesn't apply padding to inline elements,
so we hide these two declarations from it */
background/*
*/:/**/url("http://www.blogblog.com/dots/icon_comment.gif") no-repeat 0 .25em;
padding-left:15px;
}
html>body a.comment-link {
/* Respecified, for IE5/Mac's benefit */
background:url("http://www.blogblog.com/dots/icon_comment.gif")
no-repeat 0 .25em;
padding-left:15px;
}
.post img {
margin:0 0 5px 0;
padding:4px;
border:1px solid $borderColor;
}
.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;
}
/* Comments
----------------------------------------------- */
#comments {
margin:0;
}
#comments h4 {
margin:0 0 10px;
border-top:1px dotted $borderColor;
padding-top:.5em;
line-height: 1.4em;
font: bold 110% Georgia,Serif;
color:#333;
}
#comments-block {
line-height:1.6em;
}
.comment-author {
background:url("http://www.blogblog.com/dots/icon_comment.gif")
no-repeat 2px .35em;
margin:.5em 0 0;
padding:0 0 0 20px;
font-weight:bold;
}
.comment-body {
margin:0;
padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}
.comment-footer {
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#996;
}
.comment-footer a:link {
color:#996;
}
.deleted-comment {
font-style:italic;
color:gray;
}
/* More Sidebar Content
----------------------------------------------- */
.sidebar h2 {
margin:2em 0 .75em;
padding-bottom:.35em;
border-bottom:1px dotted $borderColor;
line-height: 1.4em;
font-size: 95%;
font: $headerfont;
text-transform:uppercase;
letter-spacing:.3em;
color:$sidebartitle;
}
.sidebar p {
margin:0 0 .75em;
line-height:1.6em;
}
.sidebar ul {
list-style:none;
margin:.5em 0;
padding:0 0px;
}
.sidebar .widget {
margin: .5em 0 1em;
padding: 0 0px;
line-height: 1.5em;
}
.main .widget {
padding-bottom: 1em;
}
.sidebar ul li {
background:url("http://www.blogblog.com/dots/bullet.gif") no-repeat
3px .45em;
margin:0;
padding:0 0 5px 15px;
}
.sidebar p {
margin:0 0 .6em;
}
/* Profile
----------------------------------------------- */
.profile-datablock {
margin: 0 0 1em;
}
.profile-img {
float: left;
margin: 0 8px 5px 0;
border: 4px solid #cc9;
}
.profile-data {
margin: 0;
line-height: 1.5em;
}
.profile-textblock {
clear: left;
margin-left: 0;
}
/* Footer
----------------------------------------------- */
#footer {
clear:both;
padding:15px 0 0;
}
#footer p {
margin:0;
}
/* Page structure tweaks for layout editor wireframe */
body#layout #sidebar, body#layout #main,
body#layout #main-wrapper,
body#layout #outer-wrapper,
body#layout #sidebar-wrapper {
padding: 0;
}
body#layout #sidebar, body#layout #sidebar-wrapper {
padding: 0;
width: 240px;
}
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- 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='content-wrapper'>
<div class='header-wrapper'>
<b:section class='header' id='header' preferred='yes' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Alternative Medicine Articles (Header)' type='Header'/>
</b:section>
</div>
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='Link' type='LinkList'/>
</b:section>
<p>Modified By <a href='http://www.blogcrowds.com/'>Blogcrowds</a></p>
</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'>
<b:section class='footer' id='footer'/>
</div>
</div></div> <!-- end outer-wrapper -->
</body>
</html>
<!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: Dots
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 24 Feb 2004
Updated by: Blogger Team
Modified By
Designer: Charlemagne Stavanger
URL: http://www.blogcrowds.com/
Support: http://www.blogcrowds.com/
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="textcolor" description="Text Color" type="color"
default="#333" value="#333333">
<Variable name="pagetitle" description="Blog Title Color" type="color"
default="#353" value="#335533">
<Variable name="blogDescriptionColor" description="Blog Description Color"
type="color" default="#996" value="#999966">
<Variable name="posttitle" description="Post Title Color" type="color"
default="#996" value="#999966">
<Variable name="linkcolor" description="Link Color" type="color"
default="#488" value="#448888">
<Variable name="vlinkcolor" description="Visited Link Color" type="color"
default="#885" value="#888855">
<Variable name="dateheadercolor" description="Date Header Color"
type="color" default="#663" value="#666633">
<Variable name="sidebartitle" description="Sidebar Title Color" type="color"
default="#663" value="#666633">
<Variable name="borderColor" description="Border Color"
type="color" default="#9b9" value="#99bb99">
<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="pagetitlefont" description="Blog Title Font" type="font"
default="normal normal 250% Georgia,Serif" value="normal normal 250% Georgia,Serif">
<Variable name="blogDescriptionFont" description="Blog Description Font"
type="font"
default="normal normal 100% Verdana, Arial, Sans-Serif" value="normal normal 100% Verdana, Arial, Sans-Serif">
<Variable name="dateHeaderFont" description="Date Header Font"
type="font" default="normal normal 95% Georgia, Serif" value="normal normal 95% Georgia, Serif">
<Variable name="headerfont" description="Sidebar Title Font" type="font"
default="normal normal 100% Georgia,Serif" value="normal normal 100% Georgia,Serif">
*/
body {
margin: 0px 0px 0px 0px;
background:#fff url("http://www.blogblog.com/dots/bg_dots.gif");
background-position: 50% 31px;
text-align:center;
font:x-small Verdana, Arial, Sans-serif;
color:$textcolor;
font-size/* */:/**/small;
font-size: /**/small;
}
/* Page Structure
----------------------------------------------- */
#outer-wrapper {
width:890px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}
#header-wrapper {
width:890px;
height:50px;
margin-bottom:20px;
background: #fff url("http://www.blogblog.com/dots/bg_dots2.gif");
}
#header{padding:0 20px 2px;background: #fff
url("http://www.blogblog.com/dots/bg_dots2.gif") -5px 0px;}
#main-wrapper {
width:450px;
float:left;
margin:0 10px;
padding:0 0 20px;
font-size:85%;
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 {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") -100px
-100px;
padding:20px 10px 15px;
}
.sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
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 {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") -50px
10px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
/* Title & Description
----------------------------------------------- */
.Header h1 {
margin:0 0 .5em;
line-height: 1.4em;
font: $pagetitlefont;
color: $pagetitle;
}
.Header h1 a {
color:$pagetitle;
text-decoration:none;
}
.Header .description {
margin:0 0 1.75em;
color: $blogDescriptionColor;
font: $blogDescriptionFont;
}
/* Links
----------------------------------------------- */
a:link {
color:$linkcolor;
}
a:visited {
color:$vlinkcolor;
}
a:hover {
color:$vlinkcolor;
}
a img {
border-width:0;
}
/* Posts
----------------------------------------------- */
h2.date-header {
margin:0 0 .75em;
padding-bottom:.35em;
border-bottom:1px dotted $borderColor;
text-transform:uppercase;
letter-spacing:.3em;
color: $dateheadercolor;
font: $dateHeaderFont;
}
.post {
margin:0 0 2.5em;
}
.post h3 {
margin:.25em 0;
line-height: 1.4em;
font: $headerfont;
font-size: 130%;
font-weight: bold;
color:$posttitle;
background:url("http://www.blogblog.com/dots/bg_post_title.gif")
no-repeat 0 .25em;
padding:0 0 1px 45px;
}
.post h3 a {
text-decoration:none;
color: $posttitle;
}
.post h3 a:hover {
color: $textcolor;
}
.post p {
margin:0 0 .75em;
line-height:1.6em;
}
.post-footer {
margin:0;
}
.uncustomized-post-template .post-footer {
text-align: right;
}
.uncustomized-post-template .post-author,
.uncustomized-post-template .post-timestamp {
display: block;
float: left;
margin-right: 4px;
text-align: left;
}
.post-author, .post-timestamp {
color:$posttitle;
}
a.comment-link {
/* IE5.0/Win doesn't apply padding to inline elements,
so we hide these two declarations from it */
background/*
*/:/**/url("http://www.blogblog.com/dots/icon_comment.gif") no-repeat 0 .25em;
padding-left:15px;
}
html>body a.comment-link {
/* Respecified, for IE5/Mac's benefit */
background:url("http://www.blogblog.com/dots/icon_comment.gif")
no-repeat 0 .25em;
padding-left:15px;
}
.post img {
margin:0 0 5px 0;
padding:4px;
border:1px solid $borderColor;
}
.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;
}
/* Comments
----------------------------------------------- */
#comments {
margin:0;
}
#comments h4 {
margin:0 0 10px;
border-top:1px dotted $borderColor;
padding-top:.5em;
line-height: 1.4em;
font: bold 110% Georgia,Serif;
color:#333;
}
#comments-block {
line-height:1.6em;
}
.comment-author {
background:url("http://www.blogblog.com/dots/icon_comment.gif")
no-repeat 2px .35em;
margin:.5em 0 0;
padding:0 0 0 20px;
font-weight:bold;
}
.comment-body {
margin:0;
padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}
.comment-footer {
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#996;
}
.comment-footer a:link {
color:#996;
}
.deleted-comment {
font-style:italic;
color:gray;
}
/* More Sidebar Content
----------------------------------------------- */
.sidebar h2 {
margin:2em 0 .75em;
padding-bottom:.35em;
border-bottom:1px dotted $borderColor;
line-height: 1.4em;
font-size: 95%;
font: $headerfont;
text-transform:uppercase;
letter-spacing:.3em;
color:$sidebartitle;
}
.sidebar p {
margin:0 0 .75em;
line-height:1.6em;
}
.sidebar ul {
list-style:none;
margin:.5em 0;
padding:0 0px;
}
.sidebar .widget {
margin: .5em 0 1em;
padding: 0 0px;
line-height: 1.5em;
}
.main .widget {
padding-bottom: 1em;
}
.sidebar ul li {
background:url("http://www.blogblog.com/dots/bullet.gif") no-repeat
3px .45em;
margin:0;
padding:0 0 5px 15px;
}
.sidebar p {
margin:0 0 .6em;
}
/* Profile
----------------------------------------------- */
.profile-datablock {
margin: 0 0 1em;
}
.profile-img {
float: left;
margin: 0 8px 5px 0;
border: 4px solid #cc9;
}
.profile-data {
margin: 0;
line-height: 1.5em;
}
.profile-textblock {
clear: left;
margin-left: 0;
}
/* Footer
----------------------------------------------- */
#footer {
clear:both;
padding:15px 0 0;
}
#footer p {
margin:0;
}
/* Page structure tweaks for layout editor wireframe */
body#layout #sidebar, body#layout #main,
body#layout #main-wrapper,
body#layout #outer-wrapper,
body#layout #sidebar-wrapper {
padding: 0;
}
body#layout #sidebar, body#layout #sidebar-wrapper {
padding: 0;
width: 240px;
}
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- 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='content-wrapper'>
<div class='header-wrapper'>
<b:section class='header' id='header' preferred='yes' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Alternative Medicine Articles (Header)' type='Header'/>
</b:section>
</div>
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='Link' type='LinkList'/>
</b:section>
<p>Modified By <a href='http://www.blogcrowds.com/'>Blogcrowds</a></p>
</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'>
<b:section class='footer' id='footer'/>
</div>
</div></div> <!-- end outer-wrapper -->
</body>
</html>
For other New Blogger 3 column templates, refer to
New Blogger 3 column templates modified by Stavanger
Dots New Blogger template with Header
New Blogger templates modified by Ramani
New Blogger templates by Isnaini
New Blogger templates by Thur
Ramani's New Blogger Neo template
New Blogger template by Final Sense
New Blogger templates by BloggerBuster
