Tuesday, April 03, 2007

Dots 3 column with header template for New Blogger

NOTE: Before you edit or change template, make sure you backup your curremt template PLUS Page Elements. Refer to Backing up current template PLUS Page Elements before changing new template

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>


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

15 comments:

  1. Hi Peter,
    Thanks a lot for you visit to A Gota de Ran Tan Plan.
    Although it's not related to the subject of the current post, I have a question for you: can you tell me why pictures posted in previous posts sometimes simply disappear? It has already happened to me a few times, and I have to publish them again. I can't understand why!

    Thanks again.

    ReplyDelete
  2. Hi Terasa,

    I have read messages in the Google Blogger Help group complaining of the same thing, although I myself have not come across such problem. It will be a good thing for you to let Blogger Support knows. See How to contact Blogger Support. They are hard to get but not impossible. I have had a few problems solved by them before. If you are taken on a merry-go-round, perhaps you can try emailing them at support@blogger.com. I have done that plus contact them via their contact form. Don't know which one did the trick.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  3. Hiii,
    Nice Template, specially i like the short header of this template. I guess i will use on my blog now..

    Best Regards,
    Eliena Andrews
    http://visitformoney.blogspot.com

    ReplyDelete
  4. Hi Peter..

    I've tried to use this template to my blog. But after i put it html code then try to 'save template', there's a question to 'confirm and save' about some widgets will be lost.

    One of the widgets that will be lost is 'Blog Archive1'. Is it means that my older posts will be all lost?

    Please tell me.
    Thanks..

    ReplyDelete
  5. Hi Fitria,

    For Archives and Profile, you need not worry as you can easily add them back again. If you have other Page Elements, you will have to Backup each Page Element one by one as well as the current template before you change template. I should add this link to the top of all similar post:
    Backing up template PLUS Page Elements and changing template.

    ReplyDelete
  6. Thanxx for this(White Dots) Template ...But I Want the same Template( With 3 column and Header) for DARK DOTS....Plz Plz Plz..Help me. Thanxx In Advance !

    ReplyDelete
  7. Peter, I have modeled my blog after yours, but have gotten several reviews from others who say that there is not enough color in my title, and that it is boring. Any ideas for adding an image or color to my header?

    ReplyDelete
  8. You can add a graphic background to the blog Header, etc. As for me, I like it plain as mine is for purpose of providing information, not to impress visitors with fancy graphics. Alternatively, you can search for fanciful templates but be warned that in most, the graphics are hosted by template creators and if ever their sites are closed, you will lose the graphic display. Alternative is to save the graphics and host it yourself.

    ReplyDelete
  9. Peter,

    Where can I find a DotsDark 3 column template with header (title on top)? I know nothing about editing HTML or CSS (whatever that is). Can you help? You seem to be the man in the know! Also take a look at my blog...I am using the DotsDark 3 column with NO header. I dislike the header being down the side, I want my title on top. By the way, I love your blog. Very informative. Visit me at http://mylastshredsofsanity.blogspot.com

    Thank you.

    ReplyDelete
  10. Forgot to check follow-up comments box...don't want to miss your response to my question.

    ReplyDelete
  11. Peter,

    Where can I find a DotsDark 3 column template with header (title on top)? I know nothing about editing HTML or CSS (whatever that is). Can you help? You seem to be the man in the know! Also take a look at my blog...I am using the DotsDark 3 column with NO header. I dislike the header being down the side, I want my title on top. By the way, I love your blog. Very informative. Visit me at http://mylastshredsofsanity.blogspot.com

    ReplyDelete
  12. Peter,

    Where can I find a DotsDark 3 column template with header (title on top)? I know nothing about editing HTML or CSS (whatever that is). Can you help? You seem to be the man in the know! Also take a look at my blog...I am using the DotsDark 3 column with NO header. I dislike the header being down the side, I want my title on top. By the way, I love your blog. Very informative. Visit me at http://mylastshredsofsanity.blogspot.com

    ReplyDelete
  13. For Dots template with Header, please refer to 3 column Dots template with Header.

    ReplyDelete
  14. Thank You Peter, but that is for the light background Dots Template. I need the DARKDOTS 3 column template with the header title on top. Any idea where I could find it?

    ReplyDelete
  15. You can convert this template to Dots Dark yourself. Get the URL of the background image of the Dots Dark and substitute it. Change the colors of those you want to change in the CSS of the template

    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