profile
Name: klenwell
Home: San Diego, California, United States
About Me: designer, programmer, wordsmith
Monday, July 31, 2006
Template Object: Blogger Template
Parent Object: none
Child Objects: all
Child Objects: all
<$HEAD_STACK$>
<body>
<div id="page">
<$MASTHEAD_STACK$>
<$SIDEBAR_STACK$>
<$BLOGGER_STACK$>
ᆫ <$ENTRY_STACK$>
ᆫ <$ENDNOTE_STACK$>
<$FOOTER_STACK$>
</div>
</body>
</html>
<body>
<div id="page">
<$MASTHEAD_STACK$>
<$SIDEBAR_STACK$>
<$BLOGGER_STACK$>
ᆫ <$ENTRY_STACK$>
ᆫ <$ENDNOTE_STACK$>
<$FOOTER_STACK$>
</div>
</body>
</html>
This blog applies the blogger stack template explored here. For a more customized application, see my phosphorus and lime blog.
Friday, July 28, 2006
Blank Master Template
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">
<!-- BLOGGER HEAD STACK-->
<head>
<!-- META-DATA -->
<title><$BlogPageTitle$></title>
<meta name="description" content="a blogger blogspot blog" />
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript, Blogger, Skins" />
<!-- AUTO META-TAGS -->
<$BlogMetaData$>
<!-- PAGE ICON (for more info, see http://en.wikipedia.org/wiki/Favicon) -->
<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" />
<!-- SITE FEED -->
<BlogSiteFeed><$BlogSiteFeedUrl$></BlogSiteFeed>
<!-- EXTERNAL LINKS -->
<!-- LOCAL JAVASCRIPT -->
<script type="text/javascript">
</script>
<!-- end LOCAL JAVASCRIPT -->
<!-- INTERNAL STYLE SHEET -->
<style type="text/css">
</style>
<!-- end INTERNAL STYLE SHEET -->
</head>
<!-- BLOGGER HEAD STACK end -->
<body>
<div id="page">
<!-- MASTHEAD STACK: #masthead_stack-->
<div id="masthead_stack">
<!-- METABAR BLOCK -->
<div id="metabar_block">
</div>
<!-- MASTHEAD BLOCK -->
<div id="masthead_block">
<h1><$BlogTitle$></h1>
<p><$BlogDescription$></p>
</div>
</div>
<!-- MASTHEAD STACK end -->
<!-- SIDEBAR_STACK: #sidebar_stack-->
<div id="sidebar_stack">
<!-- PROFILE BLOCK -->
<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>
<!-- ARCHIVE BLOCK -->
<div id="archive_block" class="sidebar_block">
<h3>archives</h3>
<BloggerArchives>
<p><a href='<$BlogArchiveURL$>'><$BlogArchiveName$></a></p>
</BloggerArchives>
</div>
<!-- RECENT POST BLOCK -->
<div id="recent_post_block" class="sidebar_block">
<h3>recent posts</h3>
<BloggerPreviousItems>
<p><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></p>
</BloggerPreviousItems>
</div>
<!-- LINK BLOCK -->
<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>
<!-- SIDEBAR STACK end -->
<!-- BLOGGER STACK: #blogger_stack -->
<!-- NOTE: Anything between Blogger tags will be repeated for every post on page -->
<div id="blogger_stack">
<Blogger>
<!-- ENTRY STACK: #entry_stack -->
<div id="entry_stack">
<!-- Entry Stack Foreword -->
<div id="entry_stack_foreword">
</div>
<!-- ENTRY BLOCK begin : .entry_block -->
<!-- Entry Date -->
<BlogDateHeader>
<div class="entry_date_header"><$BlogDateHeaderDate$></div>
</BlogDateHeader>
<!-- Entry Block -->
<div id="<$BlogItemNumber$>" class="entry_block">
<!-- Entry Title -->
<BlogItemTitle><div class="entry_title">
<BlogItemURL><a href="<$BlogItemURL$>"></BlogItemURL>
<$BlogItemTitle$></a>
</div></BlogItemTitle>
<!-- Entry Body -->
<div class="entry_body">
<$BlogItemBody$>
</div>
<!-- Entry Footer -->
<div class="entry_footer">
<!-- Permalink -->
» <a class="permalink" href="<$BlogItemPermalinkURL$>" title="permalink"> <$BlogItemDateTime$></a>
<!-- Comment Trigger -->
<MainOrArchivePage><BlogItemCommentsEnabled>
<a class="comment_trigger" href="<$BlogItemCommentCreate$>"
<$BlogItemCommentFormOnClick$>>
<$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled></MainOrArchivePage>
<!-- Link to Backlinks -->
<MainOrArchivePage><BlogItemBacklinksEnabled>
<a class="backlink_link" href="<$BlogItemPermalinkUrl$>#links">Links to this post</a>
</BlogItemBacklinksEnabled></MainOrArchivePage>
</div>
</div>
<!-- ENTRY BLOCK end -->
<!-- Entry Stack Afterword -->
<div id="entry_stack_afterword">
</div>
</div>
<!-- ENTRY STACK end -->
<!-- ENDNOTE STACK: #endnote_stack -->
<ItemPage>
<div id="endnote_stack">
<!-- Endnote Stack Header -->
<div id="endnote_stack_header">
</div>
<!-- COMMENT BLOCK begin : .comment_block -->
<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>
<!-- COMMENT BLOCK end -->
<!-- BACKLINK BLOCK begin : .backlink_block -->
<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>
<!-- BACKLINK BLOCK end -->
<!-- Endnote Stack Footer-->
<div id="endnote_stack_footer">
<!-- Home Link -->
<div id="endnote_home_link">
<a href="<$BlogURL$>">« home</a>
</div>
</div>
</div>
</ItemPage>
<!-- ENDNOTE STACK end -->
</Blogger>
</div>
<!-- BLOGGER STACK end -->
<!-- FOOTER STACK: #footer_stack-->
<div id="footer_stack">
<!-- FOOTER LEFT -->
<div id="footer_left">
</div>
<!-- FOOTER RIGHT (firefox label) -->
<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>
<!-- FOOTER CENTER -->
</div>
<!-- FOOTER STACK end -->
<!-- PAGE ANALYTICS -->
<div id="page_analytics">
</div>
<!-- end PAGE ANALYTICS -->
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- BLOGGER HEAD STACK-->
<head>
<!-- META-DATA -->
<title><$BlogPageTitle$></title>
<meta name="description" content="a blogger blogspot blog" />
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript, Blogger, Skins" />
<!-- AUTO META-TAGS -->
<$BlogMetaData$>
<!-- PAGE ICON (for more info, see http://en.wikipedia.org/wiki/Favicon) -->
<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" />
<!-- SITE FEED -->
<BlogSiteFeed><$BlogSiteFeedUrl$></BlogSiteFeed>
<!-- EXTERNAL LINKS -->
<!-- LOCAL JAVASCRIPT -->
<script type="text/javascript">
</script>
<!-- end LOCAL JAVASCRIPT -->
<!-- INTERNAL STYLE SHEET -->
<style type="text/css">
</style>
<!-- end INTERNAL STYLE SHEET -->
</head>
<!-- BLOGGER HEAD STACK end -->
<body>
<div id="page">
<!-- MASTHEAD STACK: #masthead_stack-->
<div id="masthead_stack">
<!-- METABAR BLOCK -->
<div id="metabar_block">
</div>
<!-- MASTHEAD BLOCK -->
<div id="masthead_block">
<h1><$BlogTitle$></h1>
<p><$BlogDescription$></p>
</div>
</div>
<!-- MASTHEAD STACK end -->
<!-- SIDEBAR_STACK: #sidebar_stack-->
<div id="sidebar_stack">
<!-- PROFILE BLOCK -->
<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>
<!-- ARCHIVE BLOCK -->
<div id="archive_block" class="sidebar_block">
<h3>archives</h3>
<BloggerArchives>
<p><a href='<$BlogArchiveURL$>'><$BlogArchiveName$></a></p>
</BloggerArchives>
</div>
<!-- RECENT POST BLOCK -->
<div id="recent_post_block" class="sidebar_block">
<h3>recent posts</h3>
<BloggerPreviousItems>
<p><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></p>
</BloggerPreviousItems>
</div>
<!-- LINK BLOCK -->
<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>
<!-- SIDEBAR STACK end -->
<!-- BLOGGER STACK: #blogger_stack -->
<!-- NOTE: Anything between Blogger tags will be repeated for every post on page -->
<div id="blogger_stack">
<Blogger>
<!-- ENTRY STACK: #entry_stack -->
<div id="entry_stack">
<!-- Entry Stack Foreword -->
<div id="entry_stack_foreword">
</div>
<!-- ENTRY BLOCK begin : .entry_block -->
<!-- Entry Date -->
<BlogDateHeader>
<div class="entry_date_header"><$BlogDateHeaderDate$></div>
</BlogDateHeader>
<!-- Entry Block -->
<div id="<$BlogItemNumber$>" class="entry_block">
<!-- Entry Title -->
<BlogItemTitle><div class="entry_title">
<BlogItemURL><a href="<$BlogItemURL$>"></BlogItemURL>
<$BlogItemTitle$></a>
</div></BlogItemTitle>
<!-- Entry Body -->
<div class="entry_body">
<$BlogItemBody$>
</div>
<!-- Entry Footer -->
<div class="entry_footer">
<!-- Permalink -->
» <a class="permalink" href="<$BlogItemPermalinkURL$>" title="permalink"> <$BlogItemDateTime$></a>
<!-- Comment Trigger -->
<MainOrArchivePage><BlogItemCommentsEnabled>
<a class="comment_trigger" href="<$BlogItemCommentCreate$>"
<$BlogItemCommentFormOnClick$>>
<$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled></MainOrArchivePage>
<!-- Link to Backlinks -->
<MainOrArchivePage><BlogItemBacklinksEnabled>
<a class="backlink_link" href="<$BlogItemPermalinkUrl$>#links">Links to this post</a>
</BlogItemBacklinksEnabled></MainOrArchivePage>
</div>
</div>
<!-- ENTRY BLOCK end -->
<!-- Entry Stack Afterword -->
<div id="entry_stack_afterword">
</div>
</div>
<!-- ENTRY STACK end -->
<!-- ENDNOTE STACK: #endnote_stack -->
<ItemPage>
<div id="endnote_stack">
<!-- Endnote Stack Header -->
<div id="endnote_stack_header">
</div>
<!-- COMMENT BLOCK begin : .comment_block -->
<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>
<!-- COMMENT BLOCK end -->
<!-- BACKLINK BLOCK begin : .backlink_block -->
<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>
<!-- BACKLINK BLOCK end -->
<!-- Endnote Stack Footer-->
<div id="endnote_stack_footer">
<!-- Home Link -->
<div id="endnote_home_link">
<a href="<$BlogURL$>">« home</a>
</div>
</div>
</div>
</ItemPage>
<!-- ENDNOTE STACK end -->
</Blogger>
</div>
<!-- BLOGGER STACK end -->
<!-- FOOTER STACK: #footer_stack-->
<div id="footer_stack">
<!-- FOOTER LEFT -->
<div id="footer_left">
</div>
<!-- FOOTER RIGHT (firefox label) -->
<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>
<!-- FOOTER CENTER -->
</div>
<!-- FOOTER STACK end -->
<!-- PAGE ANALYTICS -->
<div id="page_analytics">
</div>
<!-- end PAGE ANALYTICS -->
</div>
</body>
</html>
Thursday, July 27, 2006
Blank Master Style Sheet
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;
}
/*____________________________________________________________________________*/
/** 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; }
{
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;
}
/*____________________________________________________________________________*/
Monday, July 24, 2006
Template Object: Sidebar Stack
Parent Object: <$BLOGGER_TEMPLATE$>
Child Objects: <$PROFILE_BLOCK$>, <$ARCHIVE_BLOCK$>, <$RECENT_POST_BLOCK$>, <$LINK_BLOCK$>
Stylesheet
HTML
References
Profile Tags (blogger.com)
Child Objects: <$PROFILE_BLOCK$>, <$ARCHIVE_BLOCK$>, <$RECENT_POST_BLOCK$>, <$LINK_BLOCK$>
<$PROFILE_BLOCK$>
<$LINK_BLOCK$>
<$ARCHIVE_BLOCK$>
<$RECENT_POST_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 {}
#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
<!-- SIDEBAR_STACK: #sidebar_stack-->
<div id="sidebar_stack_parent">
<div id="sidebar_stack">
<!-- PROFILE BLOCK -->
<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>
<!-- end PROFILE BLOCK -->
<!-- LINK BLOCK -->
<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>
<!-- end LINK BLOCK -->
<!-- ARCHIVE BLOCK -->
<div id="archive_block" class="sidebar_block">
<h3>archives</h3>
<BloggerArchives>
<p><a href='<$BlogArchiveURL$>'><$BlogArchiveName$></a></p>
</BloggerArchives>
</div>
<!-- end ARCHIVE BLOCK -->
<!-- RECENT POST BLOCK -->
<div id="recent_post_block" class="sidebar_block">
<h3>recent posts</h3>
<BloggerPreviousItems>
<p><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></p>
</BloggerPreviousItems>
</div>
<!-- end RECENT POST BLOCK -->
</div>
</div>
<!-- SIDEBAR STACK end -->
<div id="sidebar_stack_parent">
<div id="sidebar_stack">
<!-- PROFILE BLOCK -->
<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>
<!-- end PROFILE BLOCK -->
<!-- LINK BLOCK -->
<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>
<!-- end LINK BLOCK -->
<!-- ARCHIVE BLOCK -->
<div id="archive_block" class="sidebar_block">
<h3>archives</h3>
<BloggerArchives>
<p><a href='<$BlogArchiveURL$>'><$BlogArchiveName$></a></p>
</BloggerArchives>
</div>
<!-- end ARCHIVE BLOCK -->
<!-- RECENT POST BLOCK -->
<div id="recent_post_block" class="sidebar_block">
<h3>recent posts</h3>
<BloggerPreviousItems>
<p><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></p>
</BloggerPreviousItems>
</div>
<!-- end RECENT POST BLOCK -->
</div>
</div>
<!-- SIDEBAR STACK end -->
References
Profile Tags (blogger.com)
Thursday, July 20, 2006
Template Object: Footer Stack
Parent Object: <$BLOGGER_TEMPLATE$>
Child Objects: n/a
Stylesheet
HTML
References
Google Analytics
Spread Firefox
Measure Map
Child Objects: n/a
<$FOOTER_LEFT$>
<$FOOTER_RIGHT$>
<$FOOTER_CENTER$>
<$PAGE_ANALYTICS$>
<$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; }
#footer_stack { clear:both; text-align:center; }
#footer_left { float:left; }
#footer_right { float:right; }
#page_analytics { visibility:hidden; }
HTML
<!-- FOOTER STACK: #footer_stack-->
<div id="footer_stack">
<!-- FOOTER LEFT -->
<div id="footer_left">
</div>
<!-- FOOTER RIGHT (firefox label) -->
<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>
<!-- FOOTER CENTER -->
</div>
<!-- FOOTER STACK end -->
<!-- PAGE ANALYTICS -->
<div id="page_analytics">
</div>
<!-- end PAGE ANALYTICS -->
<div id="footer_stack">
<!-- FOOTER LEFT -->
<div id="footer_left">
</div>
<!-- FOOTER RIGHT (firefox label) -->
<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>
<!-- FOOTER CENTER -->
</div>
<!-- FOOTER STACK end -->
<!-- PAGE ANALYTICS -->
<div id="page_analytics">
</div>
<!-- end PAGE ANALYTICS -->
References
Google Analytics
Spread Firefox
Measure Map
Wednesday, July 19, 2006
Template Object: Masthead Stack
Parent Object: <$BLOGGER_TEMPLATE$>
Child Objects: n/a
Schematic
Stylesheet
HTML
References
none
Child Objects: n/a
Schematic
<$METABAR_BLOCK$>
<$MASTHEAD_BLOCK$>
<$MASTHEAD_BLOCK$>
Stylesheet
/* MASTHEAD STACK */
#masthead_stack {}
#metabar_block {}
#masthead_block {}
#masthead_block h1 {}
#masthead_block p {}
#masthead_stack {}
#metabar_block {}
#masthead_block {}
#masthead_block h1 {}
#masthead_block p {}
HTML
<!-- MASTHEAD STACK: #masthead_stack-->
<div id="masthead_stack">
<!-- METABAR BLOCK -->
<div id="metabar_block">
</div>
<!-- MASTHEAD BLOCK -->
<div id="masthead_block">
<h1><$BlogTitle$></h1>
<p><$BlogDescription$></p>
</div>
</div>
<!-- MASTHEAD STACK end -->
<div id="masthead_stack">
<!-- METABAR BLOCK -->
<div id="metabar_block">
</div>
<!-- MASTHEAD BLOCK -->
<div id="masthead_block">
<h1><$BlogTitle$></h1>
<p><$BlogDescription$></p>
</div>
</div>
<!-- MASTHEAD STACK end -->
References
none
Tuesday, July 18, 2006
Template Object: Head Stack
Parent Object: <$BLOGGER_TEMPLATE$>
Child Objects: n/a
Schematic
HTML
References
Template Tags Defined (blogger.com)
Child Objects: n/a
Schematic
<$DOCTYPE$>
<$META_DATA$>
<$LINKS$>
<$LOCAL_JS$>
<$LOCAL_CSS$>
<$META_DATA$>
<$LINKS$>
<$LOCAL_JS$>
<$LOCAL_CSS$>
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- BLOGGER HEAD STACK-->
<head>
<!-- META-DATA -->
<title><$BlogPageTitle$></title>
<meta name="description" content="a blogger blogspot blog" />
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript, Blogger, Skins" />
<!-- AUTO META-TAGS -->
<$BlogMetaData$>
<!-- PAGE ICON (for more info, see http://en.wikipedia.org/wiki/Favicon) -->
<link rel="icon" href="HREF_URL" type="image/x-icon" />
<link rel="shortcut icon" href="HREF_URL" type="image/x-icon" />
<link rel="icon" type="image/FORMAT" href="HREF_URL" />
<!-- EXTERNAL LINKS -->
<!-- LOCAL JAVASCRIPT -->
<script type="text/javascript">
</script>
<!-- end LOCAL JAVASCRIPT -->
<!-- INTERNAL STYLE SHEET -->
<style type="text/css">
</style>
<!-- end INTERNAL STYLE SHEET -->
</head>
<!-- BLOGGER HEAD STACK end -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- BLOGGER HEAD STACK-->
<head>
<!-- META-DATA -->
<title><$BlogPageTitle$></title>
<meta name="description" content="a blogger blogspot blog" />
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript, Blogger, Skins" />
<!-- AUTO META-TAGS -->
<$BlogMetaData$>
<!-- PAGE ICON (for more info, see http://en.wikipedia.org/wiki/Favicon) -->
<link rel="icon" href="HREF_URL" type="image/x-icon" />
<link rel="shortcut icon" href="HREF_URL" type="image/x-icon" />
<link rel="icon" type="image/FORMAT" href="HREF_URL" />
<!-- EXTERNAL LINKS -->
<!-- LOCAL JAVASCRIPT -->
<script type="text/javascript">
</script>
<!-- end LOCAL JAVASCRIPT -->
<!-- INTERNAL STYLE SHEET -->
<style type="text/css">
</style>
<!-- end INTERNAL STYLE SHEET -->
</head>
<!-- BLOGGER HEAD STACK end -->
References
Template Tags Defined (blogger.com)
Monday, July 17, 2006
Template Object: Endnote Stack
Parent Object: blogger_stack
Child Objects: comment_block, linkback_block
Schematic
Stylesheet
HTML
References
Conditional Tags (blogger.com)
Child Objects: comment_block, linkback_block
Schematic
<$ENDNOTE_STACK_HEADER$>
<$COMMENT_TRIGGER$>
<$COMMENT_BLOCK$>
<$LINKBACK_BLOCK$>
<$HOME_LINK$>
<$ENDNOTE_STACK_FOOTER$>
<$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 {}
#endnote_stack {}
#endnote_comment_trigger {}
#endnote_stack_header {}
#endnote_stack_footer {}
#endnote_home_link {}
HTML
<!-- ENDNOTE STACK: #endnote_stack -->
<ItemPage>
<div id="endnote_stack">
<!-- Endnote Stack Header -->
<div id="endnote_stack_header">
</div>
<!-- Comment Trigger -->
<BlogItemCommentsEnabled>
<a class="comment_trigger" href="<$BlogItemCommentCreate$>" <$BlogItemCommentFormOnClick$>>
post a comment
</a>
</BlogItemCommentsEnabled>
<!-- Comment Block -->
<!-- Linkback Block -->
<!-- Endnote Stack Footer-->
<div id="endnote_stack_footer">
<!-- Home Link -->
<div id="endnote_home_link">
<a href="<$BlogURL$>">« home</a>
</div>
</div>
</div>
</ItemPage>
<!-- ENDNOTE STACK end -->
<ItemPage>
<div id="endnote_stack">
<!-- Endnote Stack Header -->
<div id="endnote_stack_header">
</div>
<!-- Comment Trigger -->
<BlogItemCommentsEnabled>
<a class="comment_trigger" href="<$BlogItemCommentCreate$>" <$BlogItemCommentFormOnClick$>>
post a comment
</a>
</BlogItemCommentsEnabled>
<!-- Comment Block -->
<!-- Linkback Block -->
<!-- Endnote Stack Footer-->
<div id="endnote_stack_footer">
<!-- Home Link -->
<div id="endnote_home_link">
<a href="<$BlogURL$>">« home</a>
</div>
</div>
</div>
</ItemPage>
<!-- ENDNOTE STACK end -->
References
Conditional Tags (blogger.com)
Template Object: Entry Stack
Parent Object: blogger_stack
Child Objects: entry_block
Schematic
Stylesheet
HTML
References
Blogger Template Walkthrough (blogger.com)
Child Objects: entry_block
Schematic
<!-- ENTRY STACK: #entry_stack -->
<div id="entry_stack">
<!-- Entry Stack Foreword -->
<div id="entry_stack_foreword">
</div>
<!-- Entry Block -->
<$entry_block$>
<!-- Entry Stack Afterword -->
<div id="entry_stack_afterword">
</div>
</div>
<!-- ENTRY STACK end -->
<div id="entry_stack">
<!-- Entry Stack Foreword -->
<div id="entry_stack_foreword">
</div>
<!-- Entry Block -->
<$entry_block$>
<!-- Entry Stack Afterword -->
<div id="entry_stack_afterword">
</div>
</div>
<!-- ENTRY STACK end -->
Stylesheet
/* ENTRY STACK */
#entry_stack {}
#entry_stack_foreword {}
#entry_stack_afterword {}
#entry_stack {}
#entry_stack_foreword {}
#entry_stack_afterword {}
HTML
<!-- ENTRY STACK: #entry_stack -->
<div id="entry_stack">
<!-- Entry Stack Foreword -->
<div id="entry_stack_foreword">
</div>
<!-- Entry Block -->
<!-- Entry Stack Afterword -->
<div id="entry_stack_afterword">
</div>
</div>
<!-- ENTRY STACK end -->
<div id="entry_stack">
<!-- Entry Stack Foreword -->
<div id="entry_stack_foreword">
</div>
<!-- Entry Block -->
<!-- Entry Stack Afterword -->
<div id="entry_stack_afterword">
</div>
</div>
<!-- ENTRY STACK end -->
References
Blogger Template Walkthrough (blogger.com)
Wednesday, July 12, 2006
Template Object: Blogger Stack
Parent Object: core_panel
Child Objects: entry_stack, endnote_stack
Schematic
Stylesheet
HTML
References
Template Tag List (blogger.com)
Child Objects: entry_stack, endnote_stack
Schematic
<!-- BLOGGER STACK: #blogger_stack -->
<!-- NOTE: Anything between Blogger tags will be repeated for every post on page -->
<div id="blogger_stack">
<Blogger>
<$entry_stack$>
<$endnote_stack$>
</Blogger>
</div>
<!-- BLOGGER STACK end -->
<!-- NOTE: Anything between Blogger tags will be repeated for every post on page -->
<div id="blogger_stack">
<Blogger>
<$entry_stack$>
<$endnote_stack$>
</Blogger>
</div>
<!-- BLOGGER STACK end -->
Stylesheet
/* BLOGGER STACK */
#blogger_stack {}
#blogger_stack {}
HTML
<!-- BLOGGER STACK: #blogger_stack -->
<!-- NOTE: Anything between Blogger tags will be repeated for every post on page -->
<div id="blogger_stack">
<Blogger>
<!-- Entry Stack -->
<!-- Endnote Stack -->
</Blogger>
</div>
<!-- BLOGGER STACK end -->
<!-- NOTE: Anything between Blogger tags will be repeated for every post on page -->
<div id="blogger_stack">
<Blogger>
<!-- Entry Stack -->
<!-- Endnote Stack -->
</Blogger>
</div>
<!-- BLOGGER STACK end -->
References
Template Tag List (blogger.com)
Monday, July 10, 2006
Sub-Template: Backlink Block
Stylesheet
HTML
References
Blogger Backlink Tags (blogger.com)
/* BACKLINK BLOCK */
.backlink_block {}
.backlink_title {}
.backlink_body {}
.backlink_footer {}
.backlink_footer .backlink_author {}
.backlink_footer .backlink_datetime {}
.backlink_footer .backlink_trigger {}
.backlink_block {}
.backlink_title {}
.backlink_body {}
.backlink_footer {}
.backlink_footer .backlink_author {}
.backlink_footer .backlink_datetime {}
.backlink_footer .backlink_trigger {}
HTML
<!-- BACKLINK BLOCK begin : .backlink_block -->
<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>
<!-- BACKLINK BLOCK end -->
<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>
<!-- BACKLINK BLOCK end -->
References
Blogger Backlink Tags (blogger.com)
Sub-Template: Comment Block
Stylesheet
Current Stylesheet
HTML
References
Blogger Comment Tags (blogger.com)
/* COMMENT BLOCK */
.comment_block {}
.comment_body {}
.comment_footer {}
.comment_footer .author {}
.comment_block {}
.comment_body {}
.comment_footer {}
.comment_footer .author {}
Current Stylesheet
/* COMMENT BLOCK */
.comment_block {}
.comment_body {}
.comment_footer {}
.comment_footer .author {}
.comment_block {}
.comment_body {}
.comment_footer {}
.comment_footer .author {}
HTML
<!-- COMMENT BLOCK begin : .comment_block -->
<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>
<!-- COMMENT BLOCK end -->
<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>
<!-- COMMENT BLOCK end -->
References
Blogger Comment Tags (blogger.com)
Sunday, July 09, 2006
Template Object: Entry Block
Stylesheet
Stylesheet for This Blog
HTML
<!-- ENTRY BLOCK begin : .entry_block -->
<!-- Entry Date -->
<BlogDateHeader>
<div class="entry_date_header"><$BlogDateHeaderDate$></div>
</BlogDateHeader>
<!-- Entry Block -->
<div id="<$BlogItemNumber$>" class="entry_block">
<!-- Entry Title -->
<BlogItemTitle><div class="entry_title">
<BlogItemURL><a href="<$BlogItemURL$>"></BlogItemURL>
<$BlogItemTitle$></a>
</div></BlogItemTitle>
<!-- Entry Body -->
<div class="entry_body">
<$BlogItemBody$>
</div>
<!-- Entry Footer -->
<div class="entry_footer">
<!-- Permalink -->
» <a class="permalink" href="<$BlogItemPermalinkURL$>" title="permalink"> <$BlogItemDateTime$></a>
<!-- Comment Trigger -->
<MainOrArchivePage><BlogItemCommentsEnabled>
<a class="comment_trigger" href="<$BlogItemCommentCreate$>"
<$BlogItemCommentFormOnClick$>>
<$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled></MainOrArchivePage>
<!-- Link to Backlinks -->
<MainOrArchivePage><BlogItemBacklinksEnabled>
<a class="backlink_link" href="<$BlogItemPermalinkUrl$>#links">Links to this post</a>
</BlogItemBacklinksEnabled></MainOrArchivePage>
</div>
</div>
<!-- ENTRY BLOCK end -->
References
Blogger Template Walkthrough (blogger.com)
/* entry_block */
.entry_block {}
.entry_date_header {}
.entry_title {}
.entry_body {}
.entry_footer {}
.entry_footer .permalink {}
.entry_footer .comment_trigger {}
.entry_footer .backlink_link {}
.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 {}
.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
<!-- ENTRY BLOCK begin : .entry_block -->
<!-- Entry Date -->
<BlogDateHeader>
<div class="entry_date_header"><$BlogDateHeaderDate$></div>
</BlogDateHeader>
<!-- Entry Block -->
<div id="<$BlogItemNumber$>" class="entry_block">
<!-- Entry Title -->
<BlogItemTitle><div class="entry_title">
<BlogItemURL><a href="<$BlogItemURL$>"></BlogItemURL>
<$BlogItemTitle$></a>
</div></BlogItemTitle>
<!-- Entry Body -->
<div class="entry_body">
<$BlogItemBody$>
</div>
<!-- Entry Footer -->
<div class="entry_footer">
<!-- Permalink -->
» <a class="permalink" href="<$BlogItemPermalinkURL$>" title="permalink"> <$BlogItemDateTime$></a>
<!-- Comment Trigger -->
<MainOrArchivePage><BlogItemCommentsEnabled>
<a class="comment_trigger" href="<$BlogItemCommentCreate$>"
<$BlogItemCommentFormOnClick$>>
<$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled></MainOrArchivePage>
<!-- Link to Backlinks -->
<MainOrArchivePage><BlogItemBacklinksEnabled>
<a class="backlink_link" href="<$BlogItemPermalinkUrl$>#links">Links to this post</a>
</BlogItemBacklinksEnabled></MainOrArchivePage>
</div>
</div>
<!-- ENTRY BLOCK end -->
References
Blogger Template Walkthrough (blogger.com)
Saturday, July 08, 2006
New Template Object Model
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:
Part-by-part analysis to follow.
* 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.
a bloggerstack template
