My Blogger Template
This article documents my Blogger template.
Blogger is Google's blogging software. A template is an HTML document that controls the internal organization and external appearance of a blog.
Blogger offers 30 or so selectable templates, authored by 8 or so individuals. They work as advertised. However, the underlying HTML lacks professional rigor and standards. As a result, these templates are vexingly difficult to customize. Not so my Blogger template. It manifests skills honed during my nearly 40 years as a software professional. Consequently, my template is easy to customize.
Let's discuss the innards of templates a little more.
A template is an integral HTML document. In fact, it must be. Browsers are able to process only a small set of specific document types. The most rudimentary and common of these types is HTML.
All Blogger templates, mine included, use Cascading Style Sheets (CSS). On the post-Jurassic Web, HTML is used for content, and CSS for presentation.
An HTML document becomes a template via the addition of Template Tags. These template tags control the retrieval, placement, and display of all the blog-specific information: Post title, date, and time, Post body, Comments to your Post, a list of your past Posts, your Profile, Links, etc.
A typical template subdivides the display screen into 7 different areas:
Let's synthesize. Note the following when you display my Blogger template as an HTML document:
1) The 7 areas
a) From top to bottom, the screen is subdivided into a Header area (the box around the flag), a Content area, and a Footer area (the bottommost horizontal line and everything below).
b) From left to right, the Content area is subdivided into a Main and a Sidebar area.
c) From top to bottom, the Main area is subdivided into a Post and a Comment area.
d) The Sidebar area is further subdivided.
2) The template tags and their placement
Just like HTML tags, template tags are bracketed by the less-than and greater-than signs: <$BlogMetaData$>, <$BlogTitle$>, <$BlogDescription$>, etc.
3) The specific template-defined information
Basically, everything that is not a template tag is template-specific information, defined by the template's HTML and CSS.
4) The presentation elements: Background, colors, fonts, images, links, literals, the discrete items in the Sidebar area, etc.
If you use my template as your template, you'll find it easy to change or customize any of these presentation elements.
Intro complete.
To do any serious customization, you should have a working knowledge of HTML and CSS, and a good understanding of Blogger Template Tags. The Template Walkthrough article is worth a read.
In it, note the CSS style definitions bracketed by the <style>…</style> tags. Frankly, as I peruse these styles, I become lost and confused. The definitions are too dense, barely distinguishable from one another. They demand intense concentration. As you shall soon see, mine are radically different.
My goals for the customization were:
1) Corpus-callosumize: Employ the right side of my brain.
2) Simplify: Use the bare minimum CSS and HTML.
3) Standardize: Author professional CSS and HTML.
4) Synchronize: Make my blog look like my Web site.
5) Browser-proof: Make sure the blog renders the same in both Internet Explorer 6 (IE6) and Firefox.
6) Augment: Add nifty styles used exclusively within posts.
7) Limit: Restrict the number of times I needed to revise the template and republish the blog needed to fewer than 1,000.
I believe I achieved goals #1 thru #6.
I customized Douglas Bowman's Minima template. Following is the template source:
Following is the source for my template:
I do not fault Bowman for his template's less-than-professional HTML and CSS. When he developed his template, he probably did what other template developers did: Took an existing template and customized it. The sometimes-troglodyte HTML and CSS already existed. If you peruse Blogger's 30 or so standard templates, most look pretty much alike, as if they are all ancestors of an Eve template lost in the mists of prehistory.
Besides, I rate the CSS style definitions in the Template Walkthrough article as unacceptable. Their appearance sucks. Sure, they work, but I learned a hard lesson decades ago: If one does not apply artistic and rigorous standards to appearances, substance suffers, in some cases fatally.
Yes, artistic standards. The source should look pretty. Although authoring HTML and CSS is a decidedly left-brained, analytic activity, the right brain's capacity for gestalt can play a valuable role.
Peruse my template's source. At a glance, the right brain is able to perceive discrete sections. Now peruse the CSS style definitions in the Template Walkthrough article. The right brain perceives density and little else. Finally, peruse the source for the Minima template, particularly the HTML <body> section. The right brain perceives disorder, and makes a negative summary judgment.
Still, the most important consequence of rigor being applied to appearances is that rigor is automatically applied to substance, too. Source that looks disorganized is. If the appearance sucks, so does substance.
OCD mania for detail is not a pathology.
I removed these facilities from my template:
1) Access to the blog from handhelds
2) Backlinks
3) Blogger profiles
Handhelds? My target audience would not use handhelds to access my blog
Backlinks don't seem all that useful. Their enabling cluttered the display. If my blog becomes the Center of the Universe, I might re-enable them.
Instead of Blogger profiles, I prefer a Bio.
This section discusses the overall structure of my Blogger template.
There are 2 general types of CSS styles. Using my template as an example, these are:
1) CSS properties applied to HTML tags
body {
margin: 0;
padding: 0;
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
background: url(http://www.livefreediefree.com/gen/Background_Grid.png) repeat-y;}
a:link {
color: #FF8000;
text-decoration: none;
border-bottom: dashed 1px;}
2) Customized CSS styles
p.Post_BlogDateHeaderDate {
margin-bottom: 1em;
color: #999999;
letter-spacing: 0.2em;}
p.Comments_BlogCommentBody {
margin-left: 2em;
margin-bottom: 1em;}
In the original template, these 2 types are intermingled. For example, the following CSS style exists amidst other customized CSS styles:
.post-title strong, .post-title a:hover {
color:#333;
}
This customized style applies CSS properties to the HTML <strong> and <a> tags.
In my template, these 2 types of CSS styles are physically and logically separated:
Styles applied to HTML tags appear first in the template source, followed by customized styles.
All customized CSS styles never refer to HTML tags.
Much cleaner.
The original template uses 2 forms of the HTML <div> tag:
<div id="header">
<div class="post">
The CSS definitions associated with the 2 above forms are:
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #ccc;
padding-bottom:1.5em;
}
I do not use the “#header” form. All <div> tags in my template use the “class” and not the “id” selector:
<div class=”header”>
<div class=”post”>
Much cleaner.
In the original template, there are 11 separate <div>'s nested up to 6 deep. In the corresponding sections of my template, there are 5 separate <div>'s nested up to 3 deep.
Much cleaner.
I did add 4 <div>'s:
Three used for the new-facility, 2-column header; &
One used to clear the left and right floats used in the Content section, an addition mandated by the different ways IE6 and Firefox process floats.
In the <body> section of an HTML document, there are 3 hierarchical levels, each associated with a specific HTML tag:
Division: <div>
Paragraph: <p>
In-line: <span>
In the original template, it is difficult to distinguish these levels. In my template, it is clear which is which:
div.Header {
margin-top: 40px;
margin-bottom: 1em;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
text-align: center;
width: 760px;}
p.Post_BlogDateHeaderDate {
margin-top: 1em;
margin-bottom: 1em;
color: #C44000;
font-size: 16px;
font-weight: bold;}
.Post_BlogItemCommentCount {
text-transform: capitalize;}
Much cleaner.
In the original template, one CSS style definition sometimes specifies 2 class names:
.post-footer em, .comment-link {
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
Not so in my template. Each CSS definition specifies one and only one class name.
This 1:1 rule is applied with rigor:
Each Blogger template tag is associated with one and only one CSS style definition.
Each CSS style definition is associated with one and only one Blogger template tag.
This standard is the key reason why customizing my Blogger template is easy.
In the original template, I believe some style definitions are not referenced. In fact, there is much appendix HTML and CSS. The Sherlock Holmes barking dog analogy is pertinent here:
Inspector Gregory: “Is there any other point to which you would wish to draw my attention?”
Holmes: “To the curious incident of the dog in the night-time.”
“The dog did nothing in the night-time.”
“That was the curious incident,” remarked Sherlock Holmes.
Because the dog didn't bark, I reason that Doug Bowman and other template developers did not create their templates from scratch, but instead modified an existing template.
Class names are formatted. They have a prefix and an optional suffix. If a suffix, the prefix and suffix are separated by an underscore.
The prefix identifies the 7 screen display areas, and the 7 corresponding <div>'s: Header, Content, Main, Post, Comment, Sidebar, and Footer.
If the first 4 letters of the suffix are “Blog”, the CSS class associates with a specific Blogger template tag:
p.Post_BlogDateHeaderDate 
<$BlogDateHeaderDate$>
.Post_BlogItemCommentCount <$BlogItemCommentCount$>
Note that the CSS class name includes the actual Blogger template tag name.
If the first 4 letters of the suffix are not “Blog”, the suffix is self-descriptive:
div.Header_Text
p.Post_Footer
p.Sidebar_Body11px
Operating room, chip-fabrication room clean.
Time for an expanded graphic of the screen display area that highlights important technical details.
Following are comments.
The width of the template sums to 100%, and not to some fixed pixel width like the typical 800 pixels that the original Minima template uses. According to Browser Statistics maintained by W3Schools, fully 70% of computer displays are at least 1024 X 768; only about 25% are 800 X 600. The template uses the CSS float property to dynamically access the entire width, whatever it may be. The left margin is 5% of this width, and the right margin 2% which is sufficiently wide to accommodate vertical scroll bars. The blog displays in the remaining 93%. Please see glish.com's Look Ma, No Tables article for further documentation on the CSS float property.
The Header area uses the float property. The header is centered, with a fixed width of 760 pixels. Text is centered in the left float; the image is right aligned in the right float.
The Content and Footer areas occupy the 93% display area.
The Content area uses the float property. The left-float Main area that includes Posts and Comments uses 70% of the width; the right-float Sidebar area 28%. The remaining 2% is spacing between.
The Post area uses 5 Blogger template tags. Three of these tags (the post date, title, and body) are assigned individual CSS paragraph-level styles, while the remaining two tags (the post time and the number of comments for the post) are assigned individual CSS in-line styles encapsulated by the “Post_Bottom” CSS paragraph-level style. Data for these latter 2 tags displays on the same screen line.
The Comments area uses 5 Blogger template tags, each assigned its own CSS paragraph-level style. As per the usual Blogger convention, the physical comments themselves appear only on the Item page. The “Comments_Home” paragraph displays a link back to the main Blogger page. The dashed lines that appear in the Comments area of the above graphic also appear on the Item page.
The Sidebar area uses 2 Blogger template tags: Current Posts and their titles, and archived Posts by month. However, I customized the Sidebar area more than any other. For example, I eschew the Blogger-maintained Profile (“My very favorite animal is a baby fawn with bunny eyes”) and supply a link to a Bio page, instead.
The Footer area includes only stock, constant information.
If you haven't already, this may be a good time to peruse the HTML and CSS for the original and customized templates. The differences are stark.
Yes.
My Blogger template looks pretty. Use of white space is rigorous. Comments are effectively used. The HTML markup and CSS style definitions are professional quality. The blog looks like my Web site. The blog renders the same in both IE6 and Firefox.
OK, so I had to update the template and republish the blog about 1,500 to 2,000 times. What the fuck.
This section discusses the nitty-gritties.
When authoring posts, you may elect to use Compose mode (aka, a WYSIWYG editor).
You enable Compose mode from the Blogger Dashboard:
Settings Basic Show Compose Mode for all your blogs? = ‘Yes’.
Via a toolbar, Compose mode facilitates basic HTML formatting: Font faces and sizes; bold and italicized text; colors; links; alignments; numbered and bulleted lists; block quotes; a spell checker; and image insertion.
These Compose-mode facilities work as advertised with my Blogger template.
The following Blogger setting dovetails with Compose mode:
Settings Formatting Convert Line Breaks? = ‘Yes’.
The Blogger explanation for this setting is:
If Yes is selected, single hard-returns entered in the Post Editor will be replaced with single <br /> tags in your blog, and two hard-returns will be replaced with two tags (<br /><br />). This also applies to the comment-posting form.
When you hit 2 returns or enter keys, you ‘see’ an inserted blank line. Since you ‘see’ it, you will ‘get’ it when the post is published.
I use HTML mode when authoring posts:
Settings Basic Show Compose Mode for all your blogs? = ‘No’.
The reason I do is that I use the equivalent of HTML mode for my Web site.
Years ago, I evaluated high-powered WYSIWYG software like Dreamweaver and FrontPage, but rejected them. Yes, what you see may be what you get, but the actual HTML these software packages generate is often shit.
Instead, I author Web pages using Word, Excel, and HTML editors: Word for long documents, and HTML editors for short Web pages.
The lengthy but necessarily lengthy Word-to-Web Styles document of my Web Publishing tutorial details the process I use to convert a Word document into an HTML document. The basic process is simple: After saving the Word document in HTML format, I use HTML editors to convert the Word-generated HTML into non-troglodyte HTML that will pass W3C validation as XHTML 1.0 Strict. All documents on my Web site so validate.
Another standard I embrace is using CSS for presentation, and HTML only for content. To rigorize this standard, all CSS definitions reside in files external to HTML documents. The master Cascading Style Sheet is named Web.css. It defines the general-purpose CSS styles Web documents need. There are 2 others: Tables.css defines presentation elements for HTML tables, and Misc.css sundry definitions. The Word-to-Web Styles document discusses Web.css in depth.
These 2 standards (XHTML, and using CSS to separate content from presentation) I consider inviolable. Since so, shouldn't my blog also honor them?
No Blogger blog validates as XHTML. The HTML markup that Blogger adds when it publishes a post will not pass W3C muster. I know. I tried to W3C-validate my RealityTopia blog. The W3C gave it the finger, listing some hundred-odd validation errors.
Additionally, no Blogger template validates as any flavor of HTML, much less XHTML 1.0 Strict. Since less-than and greater-than signs bracket Blogger template tags, the W3C validator interprets these template tags as HTML tags, and flags them as errors.
Finally, no Blogger posts validate, either, since they are not integral HTML documents; ie, they do not include these mandatory HTML tags:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Therefore, it is the height of foolishness to even try to apply the XHTML standard to blogs, right? Well, standards are standards because they are standards. Their pitiless nature is a ruthless inevitability -- except, of course, if we all live in a circa 1957 Walt-Disney-style Progressive utopia where hugging physically excises our ‘bad’ DNA, and where every human being eschews religion, the nation-state, and possessions.
Then, again, perhaps it isn't so foolish?
The Blogger blog
The blog itself is a lost cause.
The Blogger template
What if all Blogger template tags are removed, and the rest of the template is left unchanged?
Scope RealityTopia_Template_NoBloggerTemplateTags.htm. Scroll to the bottom of this template-tag-denuded template. Note the 2 W3C icons. Clicking the first will W3C-validate the XHTML, and the second the CSS.
Blogger posts
Why if Blogger posts are inserted into in an integral XHTML 1.0 document, and that document W3C-validated?
Scope the following integral XHTML 1.0 document.
Scroll to the bottom. Note the "(Inserted Blogger post)" reference. I copy Blogger posts into this document, and then W3C-validate the document. Doing so validates the post itself as XHTML 1.0 Strict.
Scope one post I validated: Progressivism is a 1-word oxymoron. Scroll to the bottom. Click the 2 W3C icons.
Why do this? Well, the answer requires a semi-tome. In fact, I've written one: the 2.0 Upgrade document of Web Publishing. This lengthy but necessarily lengthy document discusses the benefits of XHTML. Suffice it to say that the benefits are many, and that these benefits accrue to the XHTML-validated Blogger template and posts.
If you'd like more, the Is XHTML an Imperative? section of the 2.0 Upgrade document discusses the benefits of XHTML.
The following customized styles exist in my Blogger template:
p.Normal {
margin-top: 0em;
margin-bottom: -1.2em;}
p.Indent {
margin-top: 0em;
margin-left: 3em;
margin-bottom: -1.2em;}
p.List {
margin-top: 0em;
margin-left: 3em;
margin-bottom: -1.2em;
text-indent: -1.5em;}
.B {
font-weight: bold;}
.I {
font-style: italic;}
.Sup {
vertical-align: .33em;}
.BoldYellow {
background-color: #FFFF99;}
.Monospace {
font-family: 'Courier New', monospace;}
.Serif {
font-family: Georgia, serif;}
div.Images {
text-align: center;
margin-top: -2em;
margin-bottom: -2em;}
As my Blog evolves, there may be more. The following Customized template styles section explains and examples some of these styles.
These CSS styles facilitate the separation of HTML-defined content from CSS-defined presentation. I use the same scheme for my Web site. In fact, styles analogous to the above exist in Web.css, the master Cascading Style sheet for my Web site.
Why do this? Again, the semi-tome 2.0 Upgrade document answers this question. Suffice it to say that the benefits of using CSS the way it was intended to be used are radical and instantaneous. If you'd like more, the Goal #2: Use CSS to cleave content & presentation section of the 2.0 Upgrade document briefly discusses these benefits.
My blog synchs with my Web site, not only externally in appearance, but also internally in substance. As a result, HTML code can be copied-and-pasted between them nearly as is. The few changes required are no-brainers.
However, the blog must be properly structured:
1) Blogger posts must be created using HTML posting mode.
No big deal. I use HTML editors to create and maintain my Web site. I am habituated to their use.
2) All post paragraphs must be bracketed by the HTML <p>…</p> tags.
Again, no big deal. All paragraphs in my Web-site HTML documents are so bracketed. I am habituated to this rudimentary HTML standard.
Even paragraphs with no special formatting are bracketed by <p>…</p> tags:
<p class="Normal">This is a Normal paragraph with no special formatting.</p>
3) All CSS styles used in posts must be defined in the Blogger template.
Again, no big deal. All general-purpose CSS presentation elements used in my Web-site HTML documents are defined in Web.css. The corresponding CSS styles in the template are clones of these styles. I am habituated to using these CSS styles.
4) In the HTML source, blank lines must separate HTML paragraphs.
For my Web-site HTML documents, I always separate HTML paragraphs with a blank line. I like white space, and am habituated to seeing it.
View the source for this document. Note the white space.
However, satisfying this requirement mandates something odd: Customized paragraph-level CSS styles in the template need to define negative bottom margins and, sometimes, negative top margins.
Why negative? Well, remember the “Convert line breaks” setting? When Blogger publishes the following HTML:
<p class="Normal">This is a Normal paragraph.</p>
<p class="Indent">This is an indented paragraph.</p>
it automatically replaces ‘hard’ returns with line breaks:
<p class="Normal">This is a Normal paragraph.</p><br /><br /><p class="Indent">This is an indented paragraph.</p>
Unfortunately, the other HTML that Blogger adds when it publishes a post results in 3 blank lines being displayed after each paragraph. A negative bottom margin essentially zaps 2 of these blank lines.
Below is the CSS definition for the Normal style:
p.Normal {
margin-top: 0em;
margin-bottom: -1.2em;}
The net effect is one blank line after the paragraph.
As another example, the following HTML inserts an image into a post:
<div class="Images">
<img alt="GDP Chart" src="http://www.livefreediefree.com/RealityTopia/Chart_GDP.png" width="528" height="321" />
</div>
Below is the template CSS definition for the Images <div>
div.Images {
text-align: center;
margin-top: -2em;
margin-bottom: -2em;}
The net effect is one blank line before and after the image.
Not to worry. Functionally, these negative margins are wholly transparent. If you use Compose posting mode and set the “Convert line breaks” option to ‘Yes”, the blank lines you insert via physical returns or enter keys will appear when the post is published -- no more, no less.
The same applies to comments. When someone posts a comment to your eternal prose and uses returns or enter keys to separate text, blank lines will appropriately appear.
To restate, these negative margins are wholly transparent within the blog.
The minor downsides of the above requirements are more than offset by the upside: I can copy-and-paste HTML code between my blog and my Web site nearly as is.
The downsides of “nearly as is” are also minor. There are 3 affected styles, all dealing with indents: Simple indents, indented bulleted lists, and indented numbered lists. Straightforward HTML editor global search-and-replace's do the job.
Below are the blog and Web-site HTML, respectively, for the 3 styles:
Simple indents
<p class="Indent">
<p class="BTI">>
Indented bulleted lists
<p class="List"><img alt="" src="http://www.livefreediefree.com/RealityTopia/B.png" />
<p class="ListBullet"><img alt="" src="gen/B.png" />
Indented numbered lists
<p class="List">1)
<p class="ListNumber">1)
I like indented text, and bulleted and numbered lists. My writing style has evolved to depend upon them.
We've seen these before:
p.Normal {
margin-top: 0em;
margin-bottom: -1.2em;}
p.Indent {
margin-top: 0em;
margin-left: 3em;
margin-bottom: -1.2em;}
p.List {
margin-top: 0em;
margin-left: 3em;
margin-bottom: -1.2em;
text-indent: -1.5em;}
.BoldYellow {
background-color: #FFFF99;}
The following post examples these styles:
<p class="Normal">This is a Normal paragraph.</p>
<p class="Normal">Simple Indent:</p>
<p class="Indent">Now is the time for all good men to come to the aid of their country and <span class="BoldYellow">expunge Hard Leftists</span>. Now is the time for all good men to come to the aid of their country.</p>
<p class="Normal">Indented Bulleted List:</p>
<p class="List"><img src="http://www.livefreediefree.com/RealityTopia/B.png" /> Now is the time for all good men to come to the aid of their country and <span class="BoldYellow">expunge Hard Leftists</span>. Now is the time for all good men to come to the aid of their country.</p>
<p class="Normal">Indented Numbered List:</p>
<p class="List">2) Now is the time for all good men to come to the aid of their country and <span class="BoldYellow">expunge Hard Leftists</span>. Now is the time for all good men to come to the aid of their country.</p>
<p class="Normal">This is a Normal paragraph.</p>
You use the “List” style to create either bulleted or numbered lists. As highlighted above, you vertically-align the text using 2 hard spaces (ie, ) for bulleted lists, and 1 hard space for numbered lists. Additionally, bulleted lists use an image for the bullet, exactly wide enough to effect precisely aligned vertical columns.
The above post exists on my blog as Test CSS Styles that use indents.
The template uses 13-pixel Verdana as the standard font. Using this font size, browsers render a line of text in the Post area as 16 or 17 pixels high.
I femto-obsessed on this pixel line height. As a result, I tweaked the CSS top and bottom margin properties to assure that all lines of text, including blank lines, are a uniform 16 or 17 pixels high.
Doing so required some fractional and even negative values for margins:
p.Normal {
margin-top: 0em;
margin-bottom: -1.2em;}
p.BlogTitle {
margin-top: 0.5em;
margin-bottom: -0.5em;
color: #C44000;
font-family: Georgia, serif;
font-size: 20px;
font-weight: bold;}
p.Sidebar_ImageSubsequent {
margin-top: 2.5em;
margin-left: 0em;
margin-bottom: 1em;}
Not to worry. They work.
Another example of precise vertical spacing is the Sidebar section. 17 pixels separate the 5 section headers (ie, Articles, Archives, Bio, Email, and Links) from the following links. 33 pixels separate the last link in each section from the next section's header (eg, Archives).
Why do this? Well, while precise horizontal and vertical spacing may not be consciously perceived when someone views your blog, that visitor may unconsciously note the regularity and order, and think to themselves, “Hey, this dud/ette is cool, and is heretofore forevermore enshrined as a first-tier icon in my Pantheon of Iconic Bloggers!”
IE6 and Firefox can render HTML markup differently. Specifically, IE6 rendered the flag image in the header differently than Firefox. IE6 added 3 extra pixels to the bottom of the image, assigning these pixels the header background color: #FFFFF0 or (255,255,240).
Rather than employing a hack, I solved the problem indirectly.
The original flag image was 134 X 75. The ‘soft’ hack involves adding 3 pixels to the top and right of the image, making it 137 X 78, and assigning the background color to these extra pixels.
Problem solved. Both browsers display the image with 3 pixels of padding on the top, right, and bottom of the image.
Don't cry for me, Argentina. Sure, my OCD re rigor and standards sometimes causes me to spend months of my life on tasks that most everybody would peremptorily dismiss as ruthlessly, radically, and remorselessly inconsequential. No matter. My pathologies are my own affair.
But, do you care how the sausage or -- if you're a Vegan -- the tofu was made?
© Copyright 2006 by George Mikos. Plagiarizing is OK, but attributing is even better.
1.0 Publication Date: None
2.0 Publication Date: 03 Apr 06
Revised Date: 25 Aug 06
