Blogger XML Template - A Day Without Chocolate
A note to those of you that put my templates up for download. I appreciate that you like them enough to do so, but please link back to my post and don't put my template for download from your site. I enjoy the traffic!
Another template hot off of the press! I really like this one. As I make them, with each and every one, I'm learning something new.
I find that I get inspirations from odd places. A Day Without Chocolate was inspired by a display at Cracker Barrel. Pink Stitches was inspired by a co-worker's scrub hat. You just never know.
This template is packed full of goodies:
- Fluid Widebar (Hack by me)
- Label Cloud (Hack by phydeaux3)
- Fluid style (Hack by me)
- Post title image (Photoshop brushes used here and in header by Obsidian Dawn )
- Two sidebars
- Post area
- Lovely footer
- Custom favicon
- Fancy links (go ahead...hover over one!)
- Clickable header on post page
- Custom blockquotes
HELPFUL POSTS: My Category Cloud...finally
UPDATE:
02/17/08: Fixed problem with text following blockquote.
03/07/08: Fixed problem in IE to eliminate horizontal scrollbar.
04/09/08: Added text file to copy and paste. You will still have to add the images as indicated in the instructions from the zip file. Go to the Dashboard | Layout | Edit HTML | Edit Template window. +/-Paste this text in that window:
<?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 expr:dir='data:blog.languageDirection' 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>
<link href='IMAGE/favicon.png' rel='shortcut icon'/>
<link href='IMAGE/favicon.png' rel='icon'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Modified: anniebluesky
URL: www.bloggeruniversity.blogspot.com
Date: 27 Jan 2008
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#987654" value="#987654">
<Variable name="linkcolor" description="Link Color"
type="color" default="#987654" value="#6f3c1b">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#987654" value="#6f3c1b">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#987654" value="#6f3c1b">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#6f3c1b">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ffb6c1" value="#ffb6c1">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#999" value="#6f3c1b">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#987654" value="#987654">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#999999">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 110% Trebuchet, Trebuchet MS, Arial, sans-serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="italic bold 115% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="italic bold 266% Times, serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 116% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="startSide" description="Side where text starts in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="Side where text ends in blog language"
type="automatic" default="right" value="right">
*/
/* Use this with templates/template-twocol.html */
body {
background: url('IMAGE/choc_bg.png') top left repeat-x #FFFFFF;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
background-color: #FADADD;
color: #987654;
text-decoration: none;
}
a img {
border-width:0;
}
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:800px;
margin: -5px 0 35px 158px;
}
#header-inner {
background-image:url(IMAGE/header.png);
background-repeat:no-repeat;
height: 370px;
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding: 60px 15px 20px .25em;
line-height:1.2em;
text-transform:none;
letter-spacing:.2em;
font: $pagetitlefont;
color: $pagetitlecolor;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
background-color: #FADADD;
color: #987654;
text-decoration: none;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
#navbar-iframe {
display: none !important;
}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
margin-left: 5%;
margin-right: 2%;
text-align: left;
width: 93%;
padding: 0 10px 10px 10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 45%;
float: $startSide;
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 */
}
#widebar-wrapper {
float: right;
margin: 0 45px 0 35px;
padding-bottom: 10px;
width: 40%;
word-wrap: break-word;
color: $textcolor;
}
#widebar {
padding: 10px 0 5px 0px;
width: 100%;
word-wrap: break-word;
color: $textcolor;
}
#leftsidebar-wrapper {
float: right;
margin: 30px 0 0 0;
overflow: hidden;
width: 22%;
word-wrap: break-word;
}
#rightsidebar-wrapper {
float: right;
margin: 30px 0 0 0;
overflow: hidden;
width: 22%;
word-wrap: break-word;
}
/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}
/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
padding-bottom:1.5em;
}
.post h3 {
background:url(IMAGE/post_swirl.png) no-repeat;
margin:.25em 0 0;
padding:0 0 4px 85px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
color:$textcolor;
background-color: #FADADD;
color: #987654;
text-decoration: none;
}
.post p {
margin:0 0 .75em;
line-height:1.6em;
}
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}
.comment-link {
margin-$startSide:.6em;
}
.post img {
padding:4px;
border:2px solid $bordercolor;
}
blockquote{
background-color: transparent;
border-top: 3px dotted #ffb6c1;
border-bottom: 3px dotted #ffb6c1;
padding: 15px;
font-style: oblique;
font-size: 1em;
margin-left: 5%;
margin-right: 5%;
}
/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebar .widget, .main .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .Blog {
border-bottom-width: 0;
}
/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $bordercolor;
}
.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.6em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}
.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
p.credits {
font-family: sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: small;
line-height: 100%;
word-spacing: normal;
letter-spacing: 0.3ex;
text-decoration: none;
text-transform: lowercase;
text-align: center;
text-indent: 0ex;
}
/** Page structure tweaks for layout editor wireframe */
body#layout #header {
width: 400px;
}
/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
]]></b:skin>
</head>
<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 25;
var maxColor = [213,84,128];
var minFontSize = 10;
var minColor = [152,118,84];
var lcShowCount = false;
</script>
<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='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Header Widget Sample (Header)' type='Header'>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "REPLACE"'>
<!--Show just the image, no text-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
</div>
<b:else/>
<!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width. This results in a margin-width's worth of pixels being cropped,
which is probably better than having them overflow out of the div.
-->
<b:if cond='data:blog.languageDirection == "rtl"'>
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: right; " + "min-height: " + data:height + "px;" + "_height: " + data:height + "px;" + "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
<b:else/>
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: left; " + "min-height: " + data:height + "px;" + "_height: " + data:height + "px;" + "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</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='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' 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 id='blog-pager-older-link'>
<a class='blog-pager-older-link' 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 class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>
<b:includable id='backlinks' var='post'>
<a name='links'/><h4><data:post.backlinksLabel/></h4>
<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' rel='nofollow'><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>
</b:includable>
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<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='post-body entry-content'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
<span class='post-comment-link'>
<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>
<!-- 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' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/>
</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='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + data:comment.adminClass'>
<a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
<span class='delete-comment-icon'> </span>
</a>
</span>
</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='backlinkDeleteIcon' var='backlink'>
<span expr:class='"item-control " + data:backlink.adminClass'>
<a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
<span class='delete-comment-icon'> </span>
</a>
</span>
</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='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_edit_allbkg.gif'/>
</a>
</span>
</b:if>
</b:includable>
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
<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='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<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:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
</b:loop>
<data:adEnd/>
</div>
<!-- navigation -->
<b:include name='nextprev'/>
<!-- feed links -->
<b:include name='feedLinks'/>
</b:includable>
</b:widget>
</b:section>
</div>
<div id='widebar-wrapper'>
<b:section class='sidebar' id='widebar1' preferred='yes'>
<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>
// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
<noscript>
<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>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section></div>
<div id='leftsidebar-wrapper'>
<b:section class='sidebar' id='leftsidebar' 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 id='ArchiveList'>
<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>
</div>
<b:include name='quickedit'/>
</div>
</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='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' dir='ltr'>(<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: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'>
<b:if cond='data:blog.languageDirection == "rtl"'>
◄
<b:else/>
►
</b:if>
</span>
</a>
</b:if>
</b:if>
</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:widget>
</b:section>
</div>
<div id='rightsidebar-wrapper'>
<b:section class='sidebar' id='rightsidebar' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='Link Love' 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>
</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'>
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>
</div></div> <!-- end outer-wrapper -->
<!--Please do not remove the credit links below, thank you.-->
<p class='credits'><span style='color : #987654; '>
designer : anniebluesky : </span>
<a href='http://bloggeruniversity.blogspot.com/'>
<span style='color : #987654;'>www.bloggeruniversity.blogspot.com</span></a></p>
<!--END FOOTER -->
</body>
</html>
75 Comments:
Ab-so-lute-ly love it!
So, looking for a good templates for blogspot user is now very very easy.
Thank you for sharing.
I'll post this also on my blog.
@B. Thanks!
@free template, awesome! Just remember to link back to BlogU.
forgive me to mislink u back. just updated my post.
@free template, thanks!
ödev tnx
Wow.. I like this template. I'm glad I drop by at your blog :D
Can't wait for more.
Hye
Make Money Online Free
Hi annie, i love your blog very much. Thank you very much and a thousand words cannot express my appreciation.
Anyway, i hope you can put you link that will open the link in a new browser window because i love to click the link at your blog but at the same time i don't want to to leave here.
what you do is add the target="_blank" attribute to your link tag
Thanks Annie, have a nice day !
Annie,
I'm in love with the template! I stumbled across your blog while in the throes of template makeover agony and I absolutely love the "Day Without Chocolate". I put it on my blog Los Angelista
Can you help me out with a few glitches though? I'm sorry to bombard you with these but I really love this template and want to try to make it work!
1) I'm not sure where to upload the
header.png image. I guessed that it should just be uploaded behind the blog title on the page elements page, but it comes out very small and oddly centered when I do that, not like in your demo blog.
2) The date, post title, and label cloud all float up into the header bar -- and then no labels show in the label cloud.
Any tips you can give are gladly appreciated!
@Liz, I don't understand what is going on. I'll look into it later today.
Thanks so much! Any suggestions you can give are definitely appreciated!
@Liz, all is fixed. Download the new zip file and start over.
It seems for some reason Blogger resized the header. (Odd thing though...it didn't resize it on my sample blog.)
I made adjustments to the XML file and the instructions. Everything should fall into place.
Let me know if you have any more problems!
You're amazing! That definitely fixed the problems with the header and the other elements floating up. It looks beautiful! It's still not showing the labels from the label cloud, though, but gosh, so happy to have it looking so marvelous! Thank you!
Sorry to bug you again, but I just noticed that it also leaves out your footer credits and I so want those to be there!
@Los Angelista, let me look into that. I know now about the credits...I used a widget, duh. But, let me check the label cloud.
@Los Angelista, OK, the credits are fixed...if you download again.
The label cloud works for me in the sample blog and my test blog. Have you chosen a Label page element in the dashboard? Let me know. This is bugging me.
@Los Angelista, FINALLY!! The label thing was a matter of placing the code above the &lgt;/head&glt; tag.
What I don't understand is why it let my label cloud slide by. Anyway, I changed the code in my sample blog and in the zip file.
Thanks for being my pilot tester!!
Another GREAT template, Annie!
WOW!
Just wanted to let you know that I continue to find AMAZING tips on this blog.
Thanks SO MUCH!
P.S. I give you 10 stars!
@Ron, Thanks! 10 stars is ALOT!!
Glad you are finding helpful tips.
Absolutely happy to pilot all of this! I'm so glad I came across your site because folks like my blog's new look and so do I!
I decided to leave the label cloud out for now since I already re-inserted all my blog links and I if I change the template, everything will get deleted again. Maybe in the future I will. But I was able to add the credit by cutting and pasting the credit off of the test blog and then putting a link back to your blog in there. :)
Thank you again for all of your help and generosity.
@Los Angelista, You can easily make the change to the template like I did. Find the Label Cloud Styles and paste this in (be sure to include the &lgt;/head&glt; tag ). Actually it was that tag that was out of place and should follow all the label cloud code like this:
/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
]]></b:skin>
<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 25;
var maxColor = [213,84,128];
var minFontSize = 10;
var minColor = [152,118,84];
var lcShowCount = false;
</script>
</head>
If you make those changes, you wont't have to reload your template and all the links again.
Hi, I was wondering if you could tell me how to change the icon that is displayed in the address bar. Thanks
@diana, find this code and remove it:
<link href='http://h1.ripway.com/anniebluesky/dwc/favicon.png' rel='shortcut icon'/>
<link href='http://h1.ripway.com/anniebluesky/dwc/favicon.png' rel='icon'/>
@diana, sorry, this may answer your question better: http://bloggeruniversity.blogspot.com/2006/03/adding-favicon.html
Nice theme,
I simply love it.
Too bad i'm not on blogger
@raymondm, looks like now is a good time to switch to blogger!
hey there, how do i add all of those link buttons on my posts? just used some of your text tweaks, thanks!!!
@Justin, I see that you have the link button working in your sidebar. So you take that same code and put it in a post (in the Edit HTML) window.
If you want it to be in every post, click on the Settings tab in the dashboard, then click the Formatting tab and scroll down to the Post Template box and add it there. Save settings.
I like the template!
Have you ever considered doing a series of posts to walk the rest of us through designing our own template?
@map of new zealand, Actually, no, I haven't. I am so much in the learning stages with template design. It is an extremely slow process for me. And if it turns out, I consider it a lucky accident.
Okay, I added this template, then I removed it, changed my mind and tried to put my code that I had copied and saved back in and lost all my links -- is there a way that I can get them back again -- like from an cache or archive of them somewhere! HELP! I am frantic!!!!
Amanda
@Amanda, Sounds like you told blogger to remove the widget, so unless you actually copied and saved the link widget content, I don't know of any way to retrieve the links. Not saying there isn't a way...I just don't know how.
Yes, that is true, I did agree that it would be okay when I uploaded your template. It would not do it otherwise.....hmmmm, how do I find cached pages on google or whatever, maybe that would help....thanks so much for replying so fast! I am stressing out about it!
This looks really good. I just put together my own blog. I need to ad some css to it tho.
I love the template and used it on my blog. However, I've read all of the comments here and still can't get the label cloud to show up :( It's not a huge deal, I'm just bewildered as to why it wont work for me.
It's so nice of you to help us all! Thanks so much
@Kristina, Have you made a label widget? If you have, nevermind. But, I dont't see any evidence of any labels in your source code. Open up your dashboard, template, page elements and add a page element...choose labels.
I did revise the code on Feb 2...did you load it before that? If so, reload it or else read in the comments and follow the instructions from this comment:
@Los Angelista, You can easily make the change to the template like I did
Let me know if you can get it working.
Hi! I used this template for my blog and I'm loving it! And I'm picking up a lot of tips from your blog to help me learn to customize my page more. However, I wanted to ask two things:
1. The navbar doesn't show so I can't sign in to my blog easily. Is there anything that can be done about this?
2. I removed the label cloud when I first installed this template but now I want it back. What should I do?
Hope you can help me out. Thanks much!
@CQ,
1. Remove this code:
#navbar-iframe {
display: none !important;
}
2. Add this code:
/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
]]></b:skin>
<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 25;
var maxColor = [213,84,128];
var minFontSize = 10;
var minColor = [152,118,84];
var lcShowCount = false;
</script>
Place it RIGHT before the </head> tag.
Hello, I finally got the label cloud working. The problem was in my internet browser rather than the code. Previously, I was using Safari and for some reason, even though I'd done everything right, it just wasn't showing up. In the end it even started crashing everytime I tried to input a label.
I switched to Opera and now everything is working fine. I thought this might prove especially helpful for other Mac users!
Thanks again for the template and all of the help!
Thank you for replying so quickly but I'm going to have to bother you again... sorry. :o) I added the code for the navbar as you instructed but once it was added in, the header got lopsided. And as for the label cloud, the code is still in my template (I didn't delete it, I just removed the label widget on the page layout) but when I added the label widget again, it's still displaying as it would on any blogger beta template. No cloud. :o(
What am I doing wrong? Thank you!
@CQ, I had an update to the template, and if you have the earlier version, you may want to reload it.
Or scroll up in the comments to find the revised Label Cloud code instructions. It was about the placement of the code in regards to other elements in the style sheet (the end head and skin tags). So, look that over again.
that's so lovely. Thanks for ur creation. :-D
I really like this blog template and I'm wanting to download it for my wife's blog but unfortunately the download link reaches a Google Pages page that states "The bandwidth or page view limit for this site has been exceeded and the page cannot be viewed at this time. Once the site is below the limit, it will once again begin serving as normal."
I can't download the template. Would you email me a link or post to file sharing site like 4shared?
Thank you
tsudohnimh@gmail.com
@Tsudohnimh, sorry about the notice. It is a free service, but I'm afraid there is limited bandwidth on Google Page Creator. It will be back up, but in the meantime, I have sent the zip file to you.
Annie,
I'm in the same boat as Tsudohnimh. I love the template, but googlepages is backed up. Would you mind emailing it to me as well. Sorry to impose, but it's a really nice template :)
Stephanie
stephrmay AT gmail DOT com
@Stephanie, It has been sent!
Hi Annie, i really love this template, i could´nt download it though. Can you send it to me?
My email is diluviospoeticos@hotmail.com
(i dont know if my english is ok, hope that you understand it :) )
Thanks a lot!
"The problem was in my internet browser rather than the code. Previously, I was using Safari and for some reason, even though I'd done everything right"
Thats why there's Firefox. ;) I'm starting to become more pro opera, though.
~~~~~~~~~
This template will be perfect for a GFs blog.
~~~~~~
To the owner - you know that you could make some money with your talent.
Annie,
Thanks so much such a GREAT design! I have been looking for days for the perfect template, and I think this is it.
I'm having some issues however. My right sidebar has disappeared, and everything that was in it has migrated to the bottom of my page under all the posts. Also I have some graphics errors with the heading.
Any ideas what I'm doing wrong?
Hi, Annie..just wanted to let you know that I figured out what I was doing wrong...and I LOVE how my blog looks now--thank you so, so MUCH! This is beautiful! I can't wait for my readers to wake up and see it this morning!
Thank you for this template ^^ I really like it and used it for my new template-except after some more hacking and all, it now sorta only looks like a cousin *sweatdrop*. I hope that's okay? I gave credit for the original.
Arigatou gozaimuchness again ^^
@huamulan03, I don't mind at all! I love it...rally cute!!
Hi Annie, Thanks for this template. I am BRAND NEW to blogging and wanted a template - this is perfect! I am having the same problems that Liz had at first:
1) I'm not sure where to upload the
header.png image. I guessed that it should just be uploaded behind the blog title on the page elements page, but it comes out very small and oddly centered when I do that, not like in your demo blog.
2) The date, post title, and label cloud all float up into the header bar -- and then no labels show in the label cloud.
I did what you said regarding uploading the new zip file, but I am still getting the issue. All of the html coding looks foreign to me...is there a quick fix I can do for this?
Thanks!!!
@Heather, I figured out the header problem. Look for:
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
and replace with this:
#header-inner {
background-image:url(IMAGE/header.png);
background-repeat:no-repeat;
height: 370px;
background-position: center;
margin-left: auto;
margin-right: auto;
}
I don't know how that was left out! I did some revisions along the way and somehow I overlooked that.
I have to run to town for a few errands, but when I get back I will make the changes to the zip files and also look into your label problem.
Oh thank you so much! That worked and fixed both problems!!! Don't worry about the label thing - i think that's a little over my head right now - but now my blog looks BEAUTIFUL!!! How do I give you proper credit on my blog for the template - refer to your blog in a footer? (sorry, I mentioned I am a beginner, right???) :)
@Heather,
Here is the credits. Find:
</body>
</html>
And put this right before it:
<!--Please do not remove the credit links below, thank you.-->
<p class='credits'><span style='color : #987654; '>
designer : anniebluesky : </span>
<a href='http://bloggeruniversity.blogspot.com/'>
<span style='color : #987654;'>www.bloggeruniversity.blogspot.com</span></a></p>
<!--END FOOTER -->
I had a problem with this template a while back, and revised it...guess I left out a couple of things. I get confused. :-)
About the labels. You must open a page element (label widget) and select the option to sort alphabetically. Then label your posts!
I revised this comment. (Revisions are making me crazy) to reflect the correct place to place the credit line. Sorry about the confusion!
Like I said...I get confused. :-)
I would like to say thanks for this link. Worth looking into, thanks for the information.It’s looks very promising.
I agree this is a great site with promising products. You made a nice decision!
i cant download this template. Can u please mail to me ? catryncheng@gmail.com.
thanks~~~
@miao, the alternative download works. I think I'll just remove the first link...it seems to have lots of problems staying up.
Thank you thank you thank you!!!!!!
I've been looking for a nice, cute, 3 column blog template for months! Everything out there seems to be too cutesy, too complicated, or just plane computerized!
My only delima, which I can live with...I like to have the Navbar. I deleted the code for it and now the header doesn't match up. I am using the text pasting method. I even tried the alternate download, both have the same results.
@Amy Lu, Here is your solution: find this code in the CSS Style Sheet (near the top):
body {
background: url('http://i102.photobucket.com/albums/m116/astewart412/Chocolate/choc_bg.png') top left repeat-x #FFFFFF;
margin:0px;
color:#987654;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
and change the
margin: 0px; to margin:-30px;
Now you can have the navbar and everything lines up!
You are completely awesome. Thank you again!!!!! Keep designing!
Okay...something weird has happened...the Navbar doesn't show up now. I checked all my settings and everything is fine there. Do I need to add the NavBar code back into my header?
@AmyLu, I see the navbar when I visit your site. But this is the code you would remove:
#navbar-iframe {
display: none !important;
}
I did notice the header is still off. Play with that -30 value until it lines up for you.
dear Annie I really love this template and i really wanted todownload it but its not working please can you send me the template my email... Im in tears
i can't download it.
why?
@tina, having problems with my file hosting site. Send me your email address and I will send you the file.
I cant imagine a day without chocolate. I love dark, white, candy bars and many mores....
Hi Annie,
I have the same problem with tina, download seems to be impossible :(
Here is my email: Listrie@yahoo.com
Also, thank you so much, for everything I've learnt from here.
♥
L.
Hi Annie,I love this template, it's so sweet. However,it seems that I am having a small problem. My header doesn't seem to blend in with the background,it looks different from your demo.Please help!
@hermitgal, lookoks like you'll have to reduce the amount of characters in your blog description.
Hi Annie ,thanks. Sorry to troble you again but I have a question. How do I add an image to my sidebar? I tried but it is only showing up under my "about me" but not others.Please help.
@hermitgal, go to your dashboard/ layout/ page elements/ add a gadget/ picture.
What a great template..
Keep share!!
Thanks to share and help us.