Blogger Stack

beta template released

2007-06-17T23:07:00.000-07:00

This is the updated version of the basic bloggerstack template. It is the template upon which the blog for this skin is based. You can find it in the repository here:

beta template

new bloggerstack skin

2007-06-17T22:19:00.000-07:00

Putting the finishing touches on the new bloggerstack template. The results now on display here. Guess where I got the inspiration of the theme.

Along the way, discovered IE has some issues with clear:both settings. What's new?

Code for this skin available in the project repository.

bloggerstack 1.0 tagged

2007-06-14T19:46:00.000-07:00

Plan to spend a little time bringing this up to speed now that the Blogger re-release seems to have settled and the classic template will be hanging around. Toward that end, I've tagged the current trunk of the SVN repository: version 1.0 tag.

The project will be significantly reorganized, in the hopes as always of making things simpler and easier to use and maintain.

And, of course, the layout of this blog should be changing shortly.

bloggerstack revived

2007-03-03T10:21:00.000-08:00

Now that the Blogger re-beta-tization has settled down and the old Blogger templating system (the "Classic" template) will survive, I've cleaned up the bloggerstack project page and updated the template and stacks.

I've tried to keep the design here simple and functional. It is available in the bloggerstack SVN repository and offers a good foundation from which to expand.

Blogger Beta HTML

2006-09-01T09:26:00.000-07:00

Slashdot linked to a post about the new Blogger Beta HTML (article). I haven't been switched to Blogger beta yet, but from what I've seen, it looks like the Blogger Stack v.1.0 will soon be defunct. Too bad. I'd grown accustom to Blogger <$TAG$> format.

Template Object: updated blogger stack

2006-08-27T15:06:00.000-07:00

This updates the previous template by reorganizing the endnote stack into a comment stack and backlink stack and correcting a couple typos. The latest updated templates are always available in the googlecode repository.

Parent Object: none
Child Objects: all

<$HEAD_STACK$>

<body>
<div id="page">

<$MASTHEAD_STACK$>

<$SIDEBAR_STACK$>

<$BLOGGER_STACK$>
ᆫ <$ENTRY_STACK$>
ᆫ <$ENDNOTE_STACK$>
ᆫ <$COMMENT_STACK$>
ᆫ <$BACKLINK_STACK$>

<$FOOTER_STACK$>

</div>
</body>
</html>

blogger stack google project

2006-08-18T11:26:00.000-07:00

Not the most significant contribution to the canon of open source code, I recognize. But a much easier way to organize, track, and revise my templates:

blogger stack google project home

blogger stack google project source

Template Object: Blogger Template

2006-07-31T21:51:00.000-07:00

Parent Object: none
Child Objects: all

<$HEAD_STACK$>

<body>
<div id="page">

<$MASTHEAD_STACK$>

<$SIDEBAR_STACK$>

<$BLOGGER_STACK$>
ᆫ <$ENTRY_STACK$>
ᆫ <$ENDNOTE_STACK$>

<$FOOTER_STACK$>

</div>
</body>
</html>

2006-07-31T11:00:00.000-07:00

This blog applies the blogger stack template explored here. For a more customized application, see my phosphorus and lime blog.

Blank Master Template

2006-07-28T22:31:00.000-07:00

Here's the template fully assembled:

<!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" xml:lang="en" lang="en">


<head>


<title><$BlogPageTitle$></title>
<meta name="description" content="a blogger blogspot blog" />
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript, Blogger, Skins" />


<$BlogMetaData$>


<link rel="icon" href="ICON_HREF" type="image/x-icon" />
<link rel="shortcut icon" href="ICON_HREF" type="image/x-icon" />
<link rel="icon" type="image/ico" href="ICON_HREF" />


<BlogSiteFeed><$BlogSiteFeedUrl$></BlogSiteFeed>




<script type="text/javascript">
</script>



<style type="text/css">
</style>


</head>


<body>
<div id="page">


<div id="masthead_stack">


<div id="metabar_block">
</div>


<div id="masthead_block">
<h1><$BlogTitle$></h1>
<p><$BlogDescription$></p>
</div>

</div>



<div id="sidebar_stack">


<div id="profile_block">

<h3>profile</h3>

<div id="profile_photo"><img src="<$BlogOwnerPhotoUrl$>"></div>
<p id="profile_full_name"><span class="profile_label">Name:</span> <$BlogOwnerFullName$></p>
<p id="profile_location"><span class="profile_label">Home:</span> <$BlogOwnerLocation$></p>
<p id="profile_about"><span class="profile_label">About Me:</span> <$BlogOwnerAboutMe$></p>
<p id="profile_link"><a href="<$BlogOwnerProfileUrl$>">view complete profile</a></p>
</div>


<div id="archive_block" class="sidebar_block">

<h3>archives</h3>
<BloggerArchives>
<p><a href='<$BlogArchiveURL$>'><$BlogArchiveName$></a></p>
</BloggerArchives>
</div>


<div id="recent_post_block" class="sidebar_block">

<h3>recent posts</h3>

<BloggerPreviousItems>
<p><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></p>
</BloggerPreviousItems>
</div>


<div id="link_block" class="sidebar_block">

<h3>links of interest</h3>

<p><a href="http://www.blogger.com/">blogger home</a></p>
<p><a href="http://bloggerstack.blogspot.com/">blogger stack</a></p>
<p><a href="http://www.mushpup.org/">mushpup</a></p>

</div>

</div>




<div id="blogger_stack">
<Blogger>


<div id="entry_stack">


<div id="entry_stack_foreword">
</div>




<BlogDateHeader>
<div class="entry_date_header"><$BlogDateHeaderDate$></div>
</BlogDateHeader>


<div id="<$BlogItemNumber$>" class="entry_block">


<BlogItemTitle><div class="entry_title">
<BlogItemURL><a href="<$BlogItemURL$>"></BlogItemURL>
<$BlogItemTitle$></a>
</div></BlogItemTitle>


<div class="entry_body">
<$BlogItemBody$>
</div>


<div class="entry_footer">


» <a class="permalink" href="<$BlogItemPermalinkURL$>" title="permalink"> <$BlogItemDateTime$></a>


<MainOrArchivePage><BlogItemCommentsEnabled>
<a class="comment_trigger" href="<$BlogItemCommentCreate$>"
<$BlogItemCommentFormOnClick$>>
<$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled></MainOrArchivePage>


<MainOrArchivePage><BlogItemBacklinksEnabled>
<a class="backlink_link" href="<$BlogItemPermalinkUrl$>#links">Links to this post</a>
</BlogItemBacklinksEnabled></MainOrArchivePage>

</div>

</div>



<div id="entry_stack_afterword">
</div>

</div>



<ItemPage>
<div id="endnote_stack">


<div id="endnote_stack_header">
</div>


<BlogItemCommentsEnabled>
<div class="comment_block" id="<$BlogCommentNumber$>">
<BlogItemComments>

<div class="comment_body">
<$BlogCommentBody$>
</div>

<div class="comment_footer">
comment by <span class="comment_author><$BlogCommentAuthor$></span> at <a href="#<$BlogCommentNumber$>"><$BlogCommentDateTime$></a>
<$BlogCommentDeleteIcon$>
</div>

</BlogItemComments>
</div>
</BlogItemCommentsEnabled>



<BlogItemBacklinksEnabled>
<div class="backlink_block">

<BlogItemBacklinks>

<div class="backlink_title">
<$BlogBacklinkControl$>
<a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$>
</div>

<div class="backlink_body">
<$BlogBacklinkSnippet$>
</div>

<div class="backlink_footer">
<span class="backlink_author">posted by <$BlogBacklinkAuthor$></span>
at <span class="backlink_datetime"><$BlogBacklinkDateTime$></span>
</div>

</BlogItemBacklinks>

<div class="backlink_trigger"><$BlogItemBacklinkCreate$></div>

</div>
</BlogItemBacklinksEnabled>



<div id="endnote_stack_footer">


<div id="endnote_home_link">
<a href="<$BlogURL$>">« home</a>
</div>

</div>

</div>
</ItemPage>


</Blogger>
</div>



<div id="footer_stack">


<div id="footer_left">
</div>


<div id="footer_right">
<a href="http://www.spreadfirefox.com/?q=affiliates&id=151890&t=85"><img border="0" alt="Get Firefox!" title="Get Firefox!" src="http://sfx-images.mozilla.org/affiliates/Buttons/80x15/firefox_80x15.png"/></a>
</div>



</div>



<div id="page_analytics">
</div>


</div>
</body>
</html>

Blank Master Style Sheet

2006-07-27T21:53:00.000-07:00

This is a blank version master style sheet for use with the Blogger Stack template. I'll create one shortly with what I consider the minimal preliminary settings.

/** Documentation **/
/*______________________________________________________________________________

Blogger Stack Basic Stylesheet

Last Update: Jul 2006
Author: Tom Atwell (klenwell@gmail.com)

a basic style sheet for blogger that provides a simple, clean, vanilla layout
as the basis for more customized skins. for use with the blogger stack template.
for more information, see:

http://bloggerstack.blogspot.com/

______________________________________________________________________________*/

/* BASIC LAYOUT */
/*____________________________________________________________________________*/

html
{
/* height:100% */ /* for page centering, uncomment (see http://www.quirksmode.org/css/centering.html) */
margin:0; padding:0;
}
body
{
/* height:100% */ /* for page centering, uncomment */
margin:0;
padding:0;
font:1em/1.2em Arial, Helvetica, sans-serif;
color:#ccc;
background-color:#ccc;
}
#page
{
width:98%;
margin:40px auto 0;
padding:4px;
background-color:#fff;
}

/* Links */
a
{
color:#ffa500;
text-decoration:underline;
}
a:hover
{
color:#0f0;
text-decoration:none;
}

/*____________________________________________________________________________*/

/* DEFAULT HTML TAGS */
/* credit: http://kurafire.net/lab/initial.css?v21 */
/*____________________________________________________________________________*/

h1, h2, h3, h4, h5, h6 { margin:0 0 .5em; padding:0; }
p, pre, blockquote, ul, ol, dl, address { margin: 1em 0; padding: 0; }
ul li { list-style:none; margin-left:.5em; }
form, fieldset { margin: 0; padding: 0; }
dd, blockquote { margin-left: .5em; }
form label { cursor: pointer; }
fieldset { border: none; }
input, select, textarea { font-size: 100%; }
table { border-collapse:collapse; }
td { vertical-align:top; }

/*____________________________________________________________________________*/

/* SECTIONS */
/*____________________________________________________________________________*/

/* MASTHEAD STACK */
#masthead_stack
{
margin:4px 0;
padding:4px;
}
#metabar_block {}
#masthead_block {}
#masthead_block h1 {}
#masthead_block p {}

/* SIDEBAR STACK */
#sidebar_stack
{
float:right;
width:20%;
margin:0 10px 40px;
padding:4px;
font-size:.9em;
background:#fff;
border-left:1px solid #ccc;
}
.sidebar_block
{
margin-bottom:20px;
}
#sidebar_stack h2 {}
#sidebar_stack h3
{
margin-bottom:6px;
}
#sidebar_stack p
{
margin:0 0 4px;
}
#sidebar_stack a {}
#sidebar_stack a:hover {}
#archive_block {}
#recent_post_block {}
#sidebar_stack #link_block {}

/* PROFILE BLOCK */
#profile_block
{
margin-bottom:20px;
}
#profile_block p {}
#profile_block .profile_label {}
#profile_photo { display:none; }
#profile_full_name {}
#profile_location {}
#profile_about { display:none; }

/* BLOGGER STACK */
#blogger_stack {}

/* ENTRY STACK */
#entry_stack
{
padding:4px;
}
#entry_stack_foreword {}
#entry_stack_afterword {}

/* ENTRY BLOCK */
.entry_block
{
margin-bottom:10px;
padding:8px;
}
.entry_date_header
{
margin:5px 0;
font-size:.8em;
font-weight:bold;
text-transform:uppercase;
letter-spacing:.3em;
}
.entry_title
{
font-size:1.6em;
margin:4px 0 2px;
}
.entry_body {}
.entry_footer
{
margin:4px 0 0px;
padding:4px;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
background-color:#ececec;
}
.entry_footer .permalink {}
.entry_footer .comment_trigger {}
.entry_footer .backlink_link {}

/* ENDNOTE STACK */
#endnote_stack
{}
#endnote_stack_header {}
#endnote_stack_footer {}
#endnote_home_link
{
margin:1em;
}

/* COMMENT BLOCK */
.comment_block
{
margin-bottom:8px;
padding:4px;
font-size:.9em;
}
.comment_body {}
.comment_footer
{
margin:4px 0 0px;
padding:4px;
font-weight:bold;
background-color:#ececec;
}
.comment_footer .author {}

/* BACKLINK BLOCK */
.backlink_block
{
margin-bottom:8px;
padding:4px;
font-size:.9em;
}
.backlink_title
{
margin:0 0 4px;
font-size:1.4em;
}
.backlink_body {}
.backlink_footer
{
margin:4px 0 0px;
padding:4px;
font-weight:bold;
background-color:#ececec;
}
.backlink_footer .backlink_author {}
.backlink_footer .backlink_datetime {}
.backlink_footer .backlink_trigger {}

/* FOOTER STACK */
#footer_stack { clear:both; text-align:center; }
#footer_left { float:left; }
#footer_right { float:right; }
#page_analytics { visibility:hidden; }

/*____________________________________________________________________________*/

/* ETC */
/*____________________________________________________________________________*/

/* CITATION STYLE */
.quote, quote, q, blockquote
{
margin:3px 6px;
padding:8px;
background:#fcfcfc;
border:solid thin #f6f6f6;
font: bold "MS Trebuchet",arial,sans-serif;
color:#c06000;
}
.code
{
margin-bottom:0px;
padding:1em;
font-size:.9em;
font-family:"Lucida Console",Monaco,monospace;
font-weight:normal;
line-height:1.5em;
color:green;
background:#eee;
border: 1px solid #ccc;
white-space: pre-wrap; /* CSS2.1 compliant */
white-space: -moz-pre-wrap; /* Mozilla-based browsers */
white-space: -o-pre-wrap; /* Opera 7+ */
}
.ipod
{
margin-bottom:0px;
padding:1em; line-height:1.5em;
background:#d2e2f2; color:#3c4782;
font-family:"Lucida Console",Monaco,monospace;
font-weight:normal; font-size:11px;
border:1px solid #3c4782;
white-space: pre-wrap; /* CSS2.1 compliant */
white-space: -moz-pre-wrap; /* Mozilla-based browsers */
white-space: -o-pre-wrap; /* Opera 7+ */
}
.schematic
{
margin-bottom:0px;
padding:1em;
font-size:.9em;
font-family:"Lucida Console",Monaco,monospace;
font-weight:normal;
line-height:1.5em;
color:#999;
background:#f0f0f0;
border: 1px solid #999;
white-space: pre-wrap; /* CSS2.1 compliant */
white-space: -moz-pre-wrap; /* Mozilla-based browsers */
white-space: -o-pre-wrap; /* Opera 7+ */
}
.schematic a { color:#666; text-decoration:none; }
.schematic a:hover { color:blue; text-decoration:none; }
.email
{
width:80%;
margin:2px auto;
padding:8px;
border:thin outset #c06000;
color:#333;
font-size:11px;
font-family:"Lucida Console",Monaco,monospace;
background-color:#fffcfc;
}

/*____________________________________________________________________________*/

Template Object: Sidebar Stack

2006-07-24T17:29:00.000-07:00

Parent Object: <$BLOGGER_TEMPLATE$>
Child Objects: <$PROFILE_BLOCK$>, <$ARCHIVE_BLOCK$>, <$RECENT_POST_BLOCK$>, <$LINK_BLOCK$>

Schematic

<$PROFILE_BLOCK$>

<$LINK_BLOCK$>

<$ARCHIVE_BLOCK$>

<$RECENT_POST_BLOCK$>

Stylesheet

/* SIDEBAR STACK */
#sidebar_stack_parent {}
#sidebar_stack {}
#sidebar_stack h2 {}
#sidebar_stack h3 {}
#sidebar_stack p {}
#sidebar_stack a {}
#sidebar_stack a:hover {}
.sidebar_block {}
#archive_block {}
#recent_post_block {}
#sidebar_stack #link_block {}

/* PROFILE BLOCK */
#profile_block {}
#profile_block p {}
#profile_block .profile_label {}
#profile_photo {}
#profile_full_name {}
#profile_location {}
#profile_about {}

HTML

<div id="sidebar_stack_parent">
<div id="sidebar_stack">


<div id="profile_block">
<h3>profile</h3>
<div id="profile_photo"><img src="<$BlogOwnerPhotoUrl$>"></div>
<p id="profile_full_name"><span class="profile_label">Name:</span> <$BlogOwnerFullName$></p>
<p id="profile_location"><span class="profile_label">Home:</span> <$BlogOwnerLocation$></p>
<p id="profile_about"><span class="profile_label">About Me:</span> <$BlogOwnerAboutMe$></p>
<p id="profile_link"><a href="<$BlogOwnerProfileUrl$>">view complete profile</a></p>
</div>



<div id="link_block" class="sidebar_block">

<h3>links of interest</h3>

<p><a href="http://www.blogger.com/">blogger home</a></p>
<p><a href="http://bloggerstack.blogspot.com/">blogger stack</a></p>
<p><a href="http://www.mushpup.org/">mushpup</a></p>

</div>



<div id="archive_block" class="sidebar_block">
<h3>archives</h3>
<BloggerArchives>
<p><a href='<$BlogArchiveURL$>'><$BlogArchiveName$></a></p>
</BloggerArchives>
</div>



<div id="recent_post_block" class="sidebar_block">
<h3>recent posts</h3>
<BloggerPreviousItems>
<p><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></p>
</BloggerPreviousItems>
</div>


</div>
</div>

References
Profile Tags (blogger.com)

Template Object: Footer Stack

2006-07-20T14:50:00.000-07:00

Parent Object: <$BLOGGER_TEMPLATE$>
Child Objects: n/a

Schematic

<$FOOTER_LEFT$>

<$FOOTER_RIGHT$>

<$FOOTER_CENTER$>

<$PAGE_ANALYTICS$>

Stylesheet

/* FOOTER STACK */
#footer_stack { clear:both; text-align:center; }
#footer_left { float:left; }
#footer_right { float:right; }
#page_analytics { visibility:hidden; }

HTML

<div id="footer_stack">


<div id="footer_left">
</div>


<div id="footer_right">
<a href="http://www.spreadfirefox.com/?q=affiliates&id=151890&t=85"><img border="0" alt="Get Firefox!" title="Get Firefox!" src="http://sfx-images.mozilla.org/affiliates/Buttons/80x15/firefox_80x15.png"/></a>
</div>



</div>



<div id="page_analytics">
</div>

References
Google Analytics
Spread Firefox
Measure Map

Template Object: Masthead Stack

2006-07-19T14:30:00.000-07:00

Parent Object: <$BLOGGER_TEMPLATE$>
Child Objects: n/a

Schematic

<$METABAR_BLOCK$>

<$MASTHEAD_BLOCK$>

Stylesheet

/* MASTHEAD STACK */
#masthead_stack {}
#metabar_block {}
#masthead_block {}
#masthead_block h1 {}
#masthead_block p {}

HTML

<div id="masthead_stack">


<div id="metabar_block">
</div>


<div id="masthead_block">
<h1><$BlogTitle$></h1>
<p><$BlogDescription$></p>
</div>

</div>

References
none

Template Object: Head Stack

2006-07-18T09:46:00.000-07:00

Parent Object: <$BLOGGER_TEMPLATE$>
Child Objects: n/a

Schematic

<$DOCTYPE$>

<$META_DATA$>

<$LINKS$>

<$LOCAL_JS$>

<$LOCAL_CSS$>

HTML

References
Template Tags Defined (blogger.com)

Template Object: Endnote Stack

2006-07-17T16:53:00.000-07:00

Parent Object: blogger_stack
Child Objects: comment_block, linkback_block

Schematic

<$ENDNOTE_STACK_HEADER$>

<$COMMENT_TRIGGER$>

<$COMMENT_BLOCK$>

<$LINKBACK_BLOCK$>

<$HOME_LINK$>

<$ENDNOTE_STACK_FOOTER$>

Stylesheet

/* ENDNOTE STACK */
#endnote_stack {}
#endnote_comment_trigger {}
#endnote_stack_header {}
#endnote_stack_footer {}
#endnote_home_link {}

HTML

<ItemPage>
<div id="endnote_stack">


<div id="endnote_stack_header">
</div>


<BlogItemCommentsEnabled>
<a class="comment_trigger" href="<$BlogItemCommentCreate$>" <$BlogItemCommentFormOnClick$>>
post a comment
</a>
</BlogItemCommentsEnabled>






<div id="endnote_stack_footer">


<div id="endnote_home_link">
<a href="<$BlogURL$>">« home</a>
</div>

</div>

</div>
</ItemPage>

References
Conditional Tags (blogger.com)

Template Object: Entry Stack

2006-07-17T09:48:00.000-07:00

Parent Object: blogger_stack
Child Objects: entry_block

Schematic

<div id="entry_stack">


<div id="entry_stack_foreword">
</div>


<$entry_block$>


<div id="entry_stack_afterword">
</div>

</div>

Stylesheet

/* ENTRY STACK */
#entry_stack {}
#entry_stack_foreword {}
#entry_stack_afterword {}

HTML

<div id="entry_stack">


<div id="entry_stack_foreword">
</div>




<div id="entry_stack_afterword">
</div>

</div>

References
Blogger Template Walkthrough (blogger.com)

Template Object: Blogger Stack

2006-07-12T16:42:00.000-07:00

Parent Object: core_panel
Child Objects: entry_stack, endnote_stack

Schematic

<div id="blogger_stack">
<Blogger>

<$entry_stack$>

<$endnote_stack$>

</Blogger>
</div>

Stylesheet

/* BLOGGER STACK */
#blogger_stack {}

HTML

<div id="blogger_stack">
<Blogger>





</Blogger>
</div>

References
Template Tag List (blogger.com)

Sub-Template: Backlink Block

2006-07-10T16:51:00.000-07:00

Stylesheet

/* BACKLINK BLOCK */
.backlink_block {}
.backlink_title {}
.backlink_body {}
.backlink_footer {}
.backlink_footer .backlink_author {}
.backlink_footer .backlink_datetime {}
.backlink_footer .backlink_trigger {}

HTML

<BlogItemBacklinksEnabled>
<div class="backlink_block">

<BlogItemBacklinks>

<div class="backlink_title">
<$BlogBacklinkControl$>
<a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$>
</div>

<div class="backlink_body">
<$BlogBacklinkSnippet$>
</div>

<div class="backlink_footer">
<span class="backlink_author">posted by <$BlogBacklinkAuthor$></span>
at <span class="backlink_datetime"><$BlogBacklinkDateTime$></span>
</div>

</BlogItemBacklinks>

<div class="backlink_trigger"><$BlogItemBacklinkCreate$></div>

</div>
</BlogItemBacklinksEnabled>

References
Blogger Backlink Tags (blogger.com)

Sub-Template: Comment Block

2006-07-10T14:54:00.000-07:00

Stylesheet

/* COMMENT BLOCK */
.comment_block {}
.comment_body {}
.comment_footer {}
.comment_footer .author {}

Current Stylesheet

/* COMMENT BLOCK */
.comment_block {}
.comment_body {}
.comment_footer {}
.comment_footer .author {}

HTML

<BlogItemCommentsEnabled>
<div class="comment_block" id="<$BlogCommentNumber$>">
<BlogItemComments>

<div class="comment_body">
<$BlogCommentBody$>
</div>

<div class="comment_footer">
comment by <span class="comment_author><$BlogCommentAuthor$></span> at <a href="#<$BlogCommentNumber$>"><$BlogCommentDateTime$></a>
<$BlogCommentDeleteIcon$>
</div>

</BlogItemComments>
</div>
</BlogItemCommentsEnabled>

References
Blogger Comment Tags (blogger.com)

Template Object: Entry Block

2006-07-09T11:31:00.000-07:00

Stylesheet

/* entry_block */
.entry_block {}
.entry_date_header {}
.entry_title {}
.entry_body {}
.entry_footer {}
.entry_footer .permalink {}
.entry_footer .comment_trigger {}
.entry_footer .backlink_link {}

Stylesheet for This Blog

/* entry_block */
.entry_block
{
margin-bottom:10px;
font-size:.8em;
}
.entry_date_header
{
margin-bottom:4px;
font-weight:bold;
}
.entry_title
{
margin: 6px 0 4px;
font-family:Trebuchet MS, Helvetica, sans-serif;
font-weight:bold;
font-size:1.2em;
}
.entry_body
{
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.entry_footer
{
margin:4px 0 8px;
padding:4px;
font-size:11px;
font-family:verdana,sans-serif;
background:#f9f9fc;
border:1px solid #ccc;
border-width:0 0 1px;
}
.entry_footer .permalink {}
.entry_footer .comment_trigger {}
.entry_footer .backlink_link {}

HTML

<BlogDateHeader>
<div class="entry_date_header"><$BlogDateHeaderDate$></div>
</BlogDateHeader>


<div id="<$BlogItemNumber$>" class="entry_block">


<BlogItemTitle><div class="entry_title">
<BlogItemURL><a href="<$BlogItemURL$>"></BlogItemURL>
<$BlogItemTitle$></a>
</div></BlogItemTitle>


<div class="entry_body">
<$BlogItemBody$>
</div>


<div class="entry_footer">


» <a class="permalink" href="<$BlogItemPermalinkURL$>" title="permalink"> <$BlogItemDateTime$></a>


<MainOrArchivePage><BlogItemCommentsEnabled>
<a class="comment_trigger" href="<$BlogItemCommentCreate$>"
<$BlogItemCommentFormOnClick$>>
<$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled></MainOrArchivePage>


<MainOrArchivePage><BlogItemBacklinksEnabled>
<a class="backlink_link" href="<$BlogItemPermalinkUrl$>#links">Links to this post</a>
</BlogItemBacklinksEnabled></MainOrArchivePage>

</div>

</div>

References
Blogger Template Walkthrough (blogger.com)

New Template Object Model

2006-07-08T09:53:00.000-07:00

Aptly termed TOM, the new Template Object Model tries to organize still more neatly the various parts of the Blogger Template. Panels hold stacks which hold blocks which hold block elements. A rough schematic:

    * Template
    * Head Stack
    * Blogger Stack
          o Entry Stack
                + Entry Block
          o Endnote Stack
                + Comment Block
                + Linkback Block
    * Profile Stack
    * Masthead Panel
    * Footer Panel

Part-by-part analysis to follow.

New (Improved?) Blogger Template

2006-06-12T12:18:00.000-07:00

<div id="blogger_item_container">
<Blogger>


<div class="blogger_item_block">


<div class="blogger_item">


<BlogDateHeader>
<div class="date_header"><$BlogDateHeaderDate$></div>
</BlogDateHeader>


<a name="<$BlogItemNumber$>"> </a>
<BlogItemTitle><div class="entry_item_title">
<BlogItemURL><a href="<$BlogItemURL$>"></BlogItemURL><$BlogItemTitle$></a>
</div></BlogItemTitle>


<div class="entry_item_body">
<$BlogItemBody$>
</div>


<div class="entry_item_footer">
» <a href="<$BlogItemPermalinkURL$>" title="permanent link"><$BlogItemDateTime$></a>
<MainOrArchivePage>
<BlogItemCommentsEnabled>· <a href="<$BlogItemCommentCreate$>" <$BlogItemCommentFormOnClick$>> <$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled>
<BlogItemBacklinksEnabled>· <a class="comment-link" href="<$BlogItemPermalinkUrl$>#links">Links to this post</a></BlogItemBacklinksEnabled>
</MainOrArchivePage>
</div>

</div>


</div>



<ItemPage>
<div id="item_page_block">


<div id="entry_comment_block" class="entry_appendix_block">
<BlogItemCommentsEnabled>


<a name="comments"></a><h4>comments:</h4>


<BlogItemComments>
<a name="<$BlogCommentNumber$>"></a><div class="item_comment">


<div class="comment_body">
<$BlogCommentBody$>
</div>


<div class="comment_footer">
<a href="<$BlogCommentPermalinkURL$>" title="comment permanent link">·</a>
posted by <$BlogCommentAuthor$> : <$BlogCommentDateTime$> <$BlogCommentDeleteIcon$>
</div>

</div>
</BlogItemComments>


<$BlogItemCreate$>
</BlogItemCommentsEnabled>
</div>



<div id="entry_linkback_block" class="entry_appendix_block">
<BlogItemBacklinksEnabled>


<a name="links"></a><h4>links to this post:</h4>


<BlogItemBacklinks>


<div class="linkback_title">
☥ <a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a>
</div>


<div class="linkback_snippet"><$BlogBacklinkSnippet$></div>


<div class="linkback_footer">posted by <$BlogBacklinkAuthor$> at <$BlogBacklinkDateTime$> <$BlogBacklinkDeleteIcon$></div>

</BlogItemBacklinks>


<p class="comment-timestamp"><$BlogItemBacklinkCreate$></p>

</BlogItemBacklinksEnabled>
</div>



<div id="item_return_home_link">
<a href="<$BlogURL$>">« home</a>
</div>


</div>
</ItemPage>


</Blogger>
</div>

blogger item container

2006-03-05T00:03:00.000-08:00

my revision of the Blogger post array -- css-delineated and commented

<div id="blogger_item_container">
<Blogger>


<div class="blogger_item_block">


<div class="blogger_item">


<BlogDateHeader>
<div class="date_header"><$BlogDateHeaderDate$></div>
</BlogDateHeader>



<a name="<$BlogItemNumber$>"> </a>
<BlogItemTitle><div class="item_title">
<BlogItemURL><a href="<$BlogItemURL$>"></BlogItemURL><$BlogItemTitle$></a>
</div></BlogItemTitle>



<div class="item_body">
<$BlogItemBody$>
</div>



<div class="item_footer">
» <a href="<$BlogItemPermalinkURL$>" title="permanent link"><$BlogItemDateTime$></a>

<MainOrArchivePage><BlogItemCommentsEnabled>
<a href="<$BlogItemCommentCreate$>" <$BlogItemCommentFormOnClick$>> <$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled></MainOrArchivePage>

</div>


</div>



<div id="item_page_block">
<ItemPage>


<div class="item_comment_container">
<BlogItemCommentsEnabled>

<a name="comments"></a>
<h4>comments:</h4>


<BlogItemComments>
<div class="item_comment">
<a name="<$BlogCommentNumber$>"></a>


<div class="item_comment_body">
<$BlogCommentBody$>
</div>



<div class="item_comment_footer">
<a href="<$BlogCommentPermalinkURL$>" title="comment permanent link">·</a>
posted by <$BlogCommentAuthor$> : <$BlogCommentDateTime$> <$BlogCommentDeleteIcon$>
</div>


</div>
</BlogItemComments>



<$BlogItemCreate$>

</BlogItemCommentsEnabled>
</div>



<BlogItemBacklinksEnabled>
<a name="links"></a>

<h4>links to this post:</h4>


<div id="item_backlink_container">
<BlogItemBacklinks>


<div class="backlink_title">
<$BlogBacklinkControl$> <a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$>
</div>



<div class="backlink_snippet">
<$BlogBacklinkSnippet$>
</div>



<div class="backlink_footer">
posted by <$BlogBacklinkAuthor$> at <$BlogBacklinkDateTime$>
</div>


</BlogItemBacklinks>
</div>



<div class="backlink_timestamp">
<$BlogItemBacklinkCreate$>
</div>


</BlogItemBacklinksEnabled>



<div id="item_return_home_link">
<a href="<$BlogURL$>">« home</a>
</div>


</ItemPage>
</div>


</div>


</Blogger>
</div>

keywords: blogger, post array, item container, template

mission statement

2006-03-03T11:12:00.000-08:00

I've created this blog in order to better dissect Blogger page templates -- in particular, what they refer to as the "item container" -- and to try and illustrate the simplest and most elegant way to design or redesign a layout using the Blogger template tags and an internal style sheet.