Blogger Template Overhaul – Part 2 of 8

Posted by taoski | Filed under Coding, Geeky, Web

Enter The Matrix!
Lets start by having a look at a basic Blogger template. For this example and for the rest of this series I will be using Blogger’s “Minima” template designed by Douglas Bowman. Mainly because it gives me a good blank canvas to work with and does not include anything too fancy that can be mucked up easily. And yes, this will happen!

Here’s a cut and paste of the unaltered Minima template code, but I have coded the different areas into “Zones” for future reference:

Zone 1:<!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>

<$BlogMetaData$>Zone 2:

body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
a:link {
color:#58a;
text-decoration:none;
}
a:visited {
color:#969;
text-decoration:none;
}
a:hover {
color:#c60;
text-decoration:underline;
}
a img {
border-width:0;
}

/* Header
———————————————– */
@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
}
}
@media handheld {
#header {
width:90%;
}
}
#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #eee;
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
font-weight:normal;
color:#666;
text-transform:uppercase;
letter-spacing:.2em;
}
#blog-title a {
color:#666;
text-decoration:none;
}
#blog-title a:hover {
color:#c60;
}
#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:700px;
font:78%/1.4em “Trebuchet MS”,Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

/* Content
———————————————– */
@media all {
#content {
width:660px;
margin:0 auto;
padding:0;
text-align:left;
}
#main {
width:410px;
float:left;
}
#sidebar {
width:220px;
float:right;
}
}
@media handheld {
#content {
width:90%;
}
#main {
width:100%;
float:none;
}
#sidebar {
width:100%;
float:none;
}
}

/* Headings
———————————————– */
h2 {
margin:1.5em 0 .75em;
font:78%/1.4em “Trebuchet MS”,Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

/* Posts
———————————————– */
@media all {
.date-header {
margin:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #ccc;
padding-bottom:1.5em;
}
}
@media handheld {
.date-header {
padding:0 1.5em 0 1.5em;
}
.post {
padding:0 1.5em 0 1.5em;
}
}
.post-title {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:#c60;
}
.post-title a, .post-title a:visited, .post-title strong {
display:block;
text-decoration:none;
color:#c60;
font-weight:normal;
}
.post-title strong, .post-title a:hover {
color:#333;
}
.post div {
margin:0 0 .75em;
line-height:1.6em;
}
p.post-footer {
margin:-.25em 0 0;
color:#ccc;
}
.post-footer em, .comment-link {
font:78%/1.4em “Trebuchet MS”,Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
.post-footer em {
font-style:normal;
color:#999;
margin-right:.6em;
}
.comment-link {
margin-left:.6em;
}
.post img {
padding:4px;
border:1px solid #ddd;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

/* Comments
———————————————– */
#comments h4 {
margin:1em 0;
font:bold 78%/1.6em “Trebuchet MS”,Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}
#comments h4 strong {
font-size:130%;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block dt {
margin:.5em 0;
}
#comments-block dd {
margin:.25em 0 0;
}
#comments-block dd.comment-timestamp {
margin:-.25em 0 2em;
font:78%/1.4em “Trebuchet MS”,Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block dd p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

/* Sidebar Content
———————————————– */
#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;
list-style:none;
}
#sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}
#sidebar p {
color:#666;
line-height:1.5em;
}

/* Profile
———————————————– */
#profile-container {
margin:0 0 1.5em;
border-bottom:1px dotted #ccc;
padding-bottom:1.5em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-img {
display:inline;
}
.profile-img img {
float:left;
padding:4px;
border:1px solid #ddd;
margin:0 8px 3px 0;
}
.profile-data {
margin:0;
font:bold 78%/1.6em “Trebuchet MS”,Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
.profile-data strong {
display:none;
}
.profile-textblock {
margin:0 0 .5em;
}
.profile-link {
margin:0;
font:78%/1.4em “Trebuchet MS”,Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}

/* Footer
———————————————– */
#footer {
width:660px;
clear:both;
margin:0 auto;
}
#footer hr {
display:none;
}
#footer p {
margin:0;
padding-top:15px;
font:78%/1.6em “Trebuchet MS”,Trebuchet,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
</style>

</head>

Zone 3:

<body>

</div>

Zone 4:

<!– Begin #content –>
<div id=”content”>

<!– Begin #main –>
<div id=”main”><div id=”main2″>

<!– Begin .post –>
<div class=”post”><a name=”<$BlogItemNumber$>”></a>
<BlogItemTitle>
<h3 class=”post-title”>
<BlogItemUrl><a xhref=”<$BlogItemUrl$>” mce_href=”<$BlogItemUrl$>” title=”external link”></BlogItemUrl>
<$BlogItemTitle$>
<BlogItemUrl></a></BlogItemUrl>
</h3>
</BlogItemTitle>

<p class=”post-footer”>
<em>posted by <$BlogItemAuthorNickname$> at <a xhref=”<$BlogItemPermalinkUrl$>” mce_href=”<$BlogItemPermalinkUrl$>” title=”permanent link”><$BlogItemDateTime$></a></em>
<MainOrArchivePage><BlogItemCommentsEnabled>

<a class=”comment-link” xhref=”<$BlogItemCommentCreate$>” mce_href=”<$BlogItemCommentCreate$>” <$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments</a>

</BlogItemCommentsEnabled><BlogItemBacklinksEnabled>
<a class=”comment-link” xhref=”<$BlogItemPermalinkUrl$>#links” mce_href=”<$BlogItemPermalinkUrl$>#links” >links to this post</a>
</BlogItemBacklinksEnabled>
</MainOrArchivePage> <$BlogItemControl$>
</p>

</div>
<!– End .post –>

<!– Begin #comments –>
<ItemPage>
<div id=”comments”>

<BlogItemCommentsEnabled><a name=”comments”></a>
<h4><$BlogItemCommentCount$> Comments:</h4>
<dl id=”comments-block”>
<BlogItemComments>
<dt class=”comment-poster” id=”c<$BlogCommentNumber$>”><a name=”c<$BlogCommentNumber$>”></a>
<$BlogCommentAuthor$> said…
</dt>
<dd class=”comment-body”>

<p><$BlogCommentBody$></p>
</dd>
<dd class=”comment-timestamp”><a xhref=”http://geeklimit.com/#<$BlogCommentNumber$>” mce_href=”http://geeklimit.com/#<$BlogCommentNumber$>” title=”comment permalink”><$BlogCommentDateTime$></a>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
</dl>
<p class=”comment-timestamp”>

<$BlogItemCreate$>
</p>
</BlogItemCommentsEnabled>
<BlogItemBacklinksEnabled>
<a name=”links”></a><h4>Links to this post:</h4>
<dl id=”comments-block”>
<BlogItemBacklinks>
<dt class=”comment-title”>
<$BlogBacklinkControl$>
<a xhref=”<$BlogBacklinkURL$>” mce_href=”<$BlogBacklinkURL$>” rel=”nofollow”><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$>
</dt>
<dd class=”comment-body”><$BlogBacklinkSnippet$>
<br />
<span class=”comment-poster”>
<em>posted by <$BlogBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em>
</span>
</dd>
</BlogItemBacklinks>
</dl>
<p class=”comment-timestamp”><$BlogItemBacklinkCreate$></p>
</BlogItemBacklinksEnabled>

</ItemPage>

<!– End #comments –>

</Blogger>
</div></div>
<!– End #main –>

Zone 5:

<!– Begin #sidebar –>
<div id=”sidebar”><div id=”sidebar2″>

<!– Begin #profile-container –>

<$BlogMemberProfile$>

<!– End #profile –>

<MainOrArchivePage>
<h2 class=”sidebar-title”>Links</h2>
<ul>
<li><a xhref=”http://news.google.com/” mce_href=”http://news.google.com/” >Google News</a></li>
<li><a xhref=”http://help.blogger.com/bin/answer.py?answer=110″ mce_href=”http://help.blogger.com/bin/answer.py?answer=110″ >Edit-Me</a></li>
<li><a xhref=”http://help.blogger.com/bin/answer.py?answer=110″ mce_href=”http://help.blogger.com/bin/answer.py?answer=110″ >Edit-Me</a></li>
</ul>
</MainOrArchivePage>

<h2 class=”sidebar-title”>Previous Posts</h2>
<ul id=”recently”>
<BloggerPreviousItems>
<li><a xhref=”<$BlogItemPermalinkURL$>” mce_href=”<$BlogItemPermalinkURL$>” ><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>
<MainOrArchivePage>

<h2 class=”sidebar-title”>Archives</h2>
<ul class=”archive-list”>
<BloggerArchives>
<li><a xhref=”<$BlogArchiveURL$>” mce_href=”<$BlogArchiveURL$>” ><$BlogArchiveName$></a></li>
</BloggerArchives>

</ul>
</MainOrArchivePage>

<!–
<p>This is a paragraph of text that could go in the sidebar.</p>
–>

</div></div>
<!– End #sidebar –>

</div>
<!– End #content –>

Zone 6:

<!– Begin #footer –>
<div id=”footer”><hr />
<p><!–This is an optional footer. If you want text here, place it inside these tags, and remove this comment. –> </p>

</div>
<!– End #footer –>

</body>
</html>

Template Zones
I have decided to use the term “Zones” in order to describe the various areas of the template code. It makes it easy to refer to the template in this way rather than directing you to specific areas or individual lines of code. In future parts of this series I will refer to adding or changing code in Zone 3 rather than saying edit the line that starts with <$BlogTitle$> for example.

Here’s a list of the the six Zones from the above template code.

Zone 1: HTML Header and blog meta data
Zone 2: The CSS stylesheet
Zone 3: Blog page header
Zone 4: Blogger code (posts/comments)
Zone 5: Blog sidebar code
Zone 6: Blog footer

Zone 1:
This contains the basic HTML building blocks for the page. To be honest, you don’t often need to change anything in here.
People have referred to adding HTML META tags here to try and improve your ranking in search engines, but I personally never touch it.

Zone 2:
This area contains the CSS code that defines the way your site looks, what colors it uses, what size, colour and font the text is. it is surrounded with two HTML tags, <style> and </style>.
The CSS codes are broken down into the different areas of the blog design. Layout, header information, post text, sidebar titles, blog title, footer text and links are just some of the things you will find in here. Most are labelled informatively though – so you know that when you edit the .post-title CSS code, you will be changing the design of the title you gave your post. Zone 2 is where most of the updates will be done to change the blog design. In fact, you could just change this zone and make the whole blog look very different!

Zone 3:
This area defines the bit at the top of the blog called the header. The header contains both the blog title and description. In the case of the Minima template the title and description are enclosed inside a box. The settings for which has been defined in Zone 2. The most common change in the header is adding an image instead of the blog title.

Zone 4:
This is the guts of the blog where your posts and comments are displayed. It all takes place between two tags <blogger> and </blogger>. Anything between these two tags will be shown for each posting in your blog. Again, the majority of the design of this section is taken care of in Zone 2 but you can add and make changes to the code in Zone 4 so that extra things appear if you want to. Remember, this section applies to ALL posts on your blog, regardless of whether they are in the archives or not.

Zone 5:
This area is used to define what is seen in the Sidebar of your blog. The sSidebar is the column that appears to either side of your posts and usually contains your profile information, a list of your previous posts, a list of your archived posts and a list of links you can add to or edit. You also get the “I power Blogger” image in there too.
The sidebar is a good place to add extra lists of links to sites you like, a blogroll of the blogs you read, some images, a hit counter or even a live chat box. The benefit of using the sidebar means that the content will be seen all the time, which ever post your reader is looking at.

Zone 6:
This area of the template code defines what appears right at the very bottom of your blog page after the posts. The Minima template has no information in the footer, but you can add your own text, images, links or whatever for people to see when the scroll all the way down. On my blog I use my footer to show my previous posts and archive links.

In the next part of the series, I will be looking at changing the design of the blog and setting out some objectives on how I want the blog to look and feel.This is part of the Blogger Template Overhaul series.

Part 1 – Introduction
Part 2 – Template Code
Part 3 – Design
Part 4 – Headers
Part 5 – Posts
Part 6 – Comments
Part 7 – The Sidebar
Part 8 – The Footer

Comments (6) | May 12th, 2006

6 Responses to “Blogger Template Overhaul – Part 2 of 8”

Jennas Blog Says:
May 13, 2006 at 10:40 am

Can you add code to create categories in the blogger template? If so, how difficult is it?
taoski Says:
May 13, 2006 at 4:02 pm

There are various ways to do this and various 3rd party sites that can do it for you too.

See here for one example: Freshtags
Blogger Template Overhaul - Part 4 of 8 at GeekLimit Says:
May 21, 2006 at 4:55 pm

[...] Part 1 – Introduction Part 2 – Template Code Part 3 – Design Part 4 – Headers Part 5 – Posts Part 6 – Comments Part 7 – The Sidebar Part 8 – The Footer [...]
Part 6 - comments at GeekLimit Says:
June 1, 2006 at 4:50 pm

[...] Part 1 – Introduction Part 2 – Template Code Part 3 – Design Part 4 – Headers Part 5 – Posts Part 6 – Comments Part 7 – The Sidebar Part 8 – The Footer [...]
Blogger Template Overhaul - Part 5 of 8 at GeekLimit Says:
June 2, 2006 at 10:01 am

[...] Part 1 – Introduction Part 2 – Template Code Part 3 – Design Part 4 – Headers Part 5 – Posts Part 6 – Comments Part 7 – The Sidebar Part 8 – The Footer [...]
How To Start A Blog Says:
October 26, 2007 at 7:23 pm

How To Start A Blog…

I couldn’t understand some parts of this article, but it sounds interesting…

GeekLimit

Blogger Template Overhaul – Part 2 of 8

6 Responses to “Blogger Template Overhaul – Part 2 of 8”

Leave a Reply

Categories

Archives

Contact Info

Follow Us

Pages

Blogroll

About