Blogger Template Anatomy

Note:

All text in blue is CSS code that is contained in the head section of the template between the <style> and </style> tags.

All text in red is HTML code that is contained in the body section of the template between the <body> and </body> tags.

A.) Header, located at the top of the body section of the template. Contains the Blog Title and Description.

CSS=
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
}

HTML=
<div id="header">
<h1 id="blog-title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>
<ItemPage> </h1> <p id="description"><$BlogDescription$>
</div>

B.) Navigation Bar, The Code that adds this item is not visible in your template but if you wish to remove the Nav Bar you simply place this code in the style section of your template.

CSS=
#b-navbar { height:0px; visibility:hidden; display:none
}

C.) Blog Title, This item is entered via the dashboard under the settings tab.The Html code for this item is located in the header division.

CSS=
#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;
}

HTML=
<$BlogTitle$>

D.) Blog Description, This item is entered via the dashboard under the settings tab. The Html code for this item is located in the header division.

CSS=
#blog-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;
}

HTML=
<$BlogDescription$>

E.) Blog Date Header. Automatically generated at the time the post is created. HTML located in the main division just above the beginning of the post. It is designated as a H2 class header.

CSS=
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;

.date-header {
margin:1.5em 0 .5em; }

HTML=
<BlogDateHeader>
<h2 class="date-header"><$BlogDateHeaderDate$></h2>
</BlogDateHeader>

F.) Blog Item Title. User designated title given to each post during creation. HTML located at the top of the post division. It is designated as a H3 class header.

CSS=
.post-title {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:#c60;

HTML=
<BlogItemTitle>
<h3 class="post-title">
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<$BlogItemTitle$>
<BlogItemUrl></a></BlogItemUrl>
</h3>
</BlogItemTitle>

G.) Post Division. Contains the Blog Date header, Blog Item Title, Blog Item Body and all Blog Item Footer Items.

CSS=
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #ccc;
padding-bottom:1.5em;

.post div {
margin:0 0 .75em;
line-height:1.6em;

HTML=
<div class="post">
</div>

H.) Post Block Quote. Utlized during post creation to indent a block of text.

CSS=
.post blockquote {
margin:1em 20px;
}

.post blockquote p {
margin:.75em 0;
}

HTML=
<blockquote>

I.) Blog Item Body. Main text added during post creation. Adding a html color number to this css section would change the default text color.

CSS=
.post div {
margin:0 0 .75em;
line-height:1.6em;
}

HTML=
<$BlogItemBody$>

J.) Blog Member Profile Division. Contains user data and image entered from the "Edit Profile" menu. The associated html code is located within the sidebar division.

CSS=
#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;
}

HTML=
<$BlogMemberProfile$>

K.) Post Footer. Contains the Authors Nickname, Item Date Time, Item Comment Count, Comments and blog item control variables. .

CSS=
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;
}

HTML=
<p class="post-footer">
<em>posted by <$BlogItemAuthorNickname$> at <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em>
<MainOrArchivePage><BlogItemCommentsEnabled>
<a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled><BlogItemBacklinksEnabled>
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#links">links to this post</a>
</BlogItemBacklinksEnabled>
</MainOrArchivePage> <$BlogItemControl$>
</p>

L.) Links. Area to add and edit links. The "Link" title is designated as a H2 header and the actual links are controlled by the "a" elements. The links are also part of a unordered list (ul) so they are effected by the sidebar ul css to. The html code for this is located in the sidebar division.

CSS=
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;
}

#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;
list-style:none;
}

HTML=
<h2 class="sidebar-title">Links</h2> <ul> <li><a href="http://news.google.com/">Google News</a></li> <li><a href="http://help.blogger.com/bin/answer.py?answer=110">Edit-Me</a></li> <li><a href="http://help.blogger.com/bin/answer.py?answer=110">Edit-Me</a></li> </ul>

M.) Previous Posts. Titles of previous posts are automatically generated by the <BloggerPreviousItems> tag. The "Previous Post" title is designated as a H2 header. The titles are also part of a unordered list (ul) so they are effected by the sidebar ul css to. The html code for this is located in the sidebar division.

CSS=
#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;
list-style:none;
}

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;
}

HTML=
<h2 class="sidebar-title">Previous Posts</h2> <ul id="recently"> <BloggerPreviousItems> <li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li> </BloggerPreviousItems> </ul>

N.) Archives . Titles of archived posts are stored monthly by default. This can be changed from the dashboard/settings/achiving/ tab. The "Previous Post" title is designated as a H2 header. The titles are also part of a unordered list (ul) so they are effected by the sidebar ul css to. The html code for this is located in the sidebar division.

CSS=
#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #ccc;
list-style:none;
}

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;
}

HTML=
<h2 class="sidebar-title">Archives</h2>
<ul class="archive-list">
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
</ul>

O.) Sidebar Division. This is area of your blog that contains the Member Profile, Links, Resent Posts and Archives. It is defined with the <div id="sidebar"> opening tag and ends with a </div> closing tag. This is where the majority of additional content will be added.

CSS=
#sidebar {
width:220px;
float:right;
}

#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;

HTML=
<div id="sidebar"><div id="sidebar2">
</div>

P.) Footer Division. This area is blank in the default Minima template. There are preset CSS elements to control any text you add to this division

Power by WOW派™

CSS=
#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;
}

#sidebar p {
color:#666;
line-height:1.5em;

HTML=
<div id="footer"><hr /> <p> </p> </div>