Bookmark and Share

Blog Settings : Fine Tuning the Classical Template

From Page 25
Structure of a Web Page  
 
For a reader a blog is nothing but a Web Page. Thinking of the appearance of your blog is thinking of the design of the web displaying the blog. The template you choose for your blog decides this appearance.

To understand the template and its contents, you need to understand the structure of a web page.
<html> 
<head> 
</head>
<body>  
</body> 
</html>
A web page (HTML file) is delimited by the <html> tag i.e. <html> indicates the beginning and </html> the ending of the web page (HTML content).

The total content within the HTML file is divided into two main sections, the HEAD and the BODY.

  • The content within the head is invisible to the person viewing the web page. It contains instructions to the browser.
  • The content within the body is what is displayed in the browser window.

The browser identifies the content as HTML content based on the <html> tags and not based on the file name extension. That is the reason we see web pages with different file name extensions also being interpreted correctly by the browser.

Learning HTML involves learning about the various HTML tags and where they are to be present i.e. whether in the HEAD section or the BODY section of the web page.

Move To  

HTML code relating to a Classical Template  
 
HTML tags, Blogger Page-Level Tags and Blogger Item-Level Tags are the three types of codes/tags that you come across within the template.

When you publish a post or save a draft of the post, the content relating to the post is stored in a database. The blogger program at the time of building up your blog page places the appropriate content in the web page, using the Item Level and Page Level Tags present in the template.

• Item Level Tags <$____$>

The Item-Level tags represent the post/blog data stored in the blogger database in relation to the blog.

Its name is delimited within <$ and $>

The blogger program at the time of building up your blog (web) page would fetch and pour the data represented by the item level tag at the place where the tag is located in the template.

Eg: <$BlogDateHeaderDate$> is an item level tag.
The data relating to the date of publishing the blog post would be inserted at the location where (wherever) the item level tag, <$BlogDateHeaderDate$> is present.

The content below gives the location of the various Blogger Item Level Tags used within a template.

• Page Level Tags <____>

The Page-Level tags represent instructions for the design and structure of the page. They act as containers for one or more Item-level tags.

<BlogDateHeader>
<$BlogDateHeaderDate$>
</BlogDateHeader>
The page level tags are similar in appearance to normal HTML tags. They have both an open and close tags. The <BlogDateHeader> is a page level tag that acts as a container for the page level tag <$BlogDateHeaderDate$>.

• HTML Tags <____>

The HTML tags have their normal functionality just like in any other web page. The page level tags and HTML tags look similar. Unless you know HTML you may not be able to identify which is a Blogger Page Level Tag and which is a HTML tag.

A brief explanation of the various tags within the template is given below under the various sections.

HTML Document beginning  
 

• Document Type Declaration

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

According to HTML standards, each HTML document requires a document type declaration. A HTML document begins with the "DOCTYPE" definition. It tells a validator which version of HTML to use in checking the document's syntax.

The document type declaration precedes the beginning of the HTML document. Many web sites ignore placing this tag in their web pages. If you want your web documents to be standards compliant you should ensure its presence in the web document.

• HTML Begin

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >

The beginning HTML tag. This tag is an indication to the browser that the content from here on is in HTML (Hyper Text Markup Language).

The end tag </html> that indicates the end of the HTML content, can be found towards the end (generally as the last piece of code) in any HTML document.

Move To  

HTML Document Head  
 
<head>
	<title>
		<$BlogPageTitle$>
	</title>
	<$BlogMetaData$>
<style type="text/css">
	/*
	-----------------------------------------------
	Blogger Template Style
	Name:     Rounders 3
	Designer: Douglas Bowman
	URL:      www.stopdesign.com
	Date:     27 Feb 2004
	----------------------------------------------- */
The style definitions 

</style>
</head>

• Document (Web Page) Head Section

<head>
...
...
</head>
The HEAD element (the document header) contains as its content is all the hidden code that is used by the browser. The HEAD element is a child of the HTML element i.e. it is contained within the HTML element..

We can also say, that the HEAD element

  • is delimited by the <head> (begin tag) and the </head> end tag..
  • is initiated by the <head> (begin tag) and terminated by the </head> end tag..

• Document/Web Page Title

The content of the html TITLE element is displayed in the browser's title bar.
<title>
<$BlogPageTitle$>
</title>

We can also say, that the TITLE element

  • is delimited by the <title> (begin tag) and the </title> end tag..
  • is initiated by the <title> (begin tag) and terminated by the </title> end tag..

The content of the title element is represented by the blogger item level tag <$BlogPageTitle$ >. The blogger program would place

  • "Blog Name" for the index page,
  • "Blog Name: Date Info" for the archive pages, and
  • "Blog Name: Post Title" for the Post Pages.

• Meta Data

metadata is data about data. An item of metadata may describe an individual data item or a collection of data items.

The item level tag, <$BlogMetaData$> represents the meta data to be included within the page header.

An example of the content placed when this tag is used is given below.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="MSSmartTagsPreventParsing" content="true" />

<meta name="generator" content="Blogger" />

<link rel="service.feed" type="application/atom+xml" title="A Different Kind of Thought" href="http://thezing.blogspot.com/atom.xml" />

<link rel="service.post" type="application/atom+xml" title="A Different Kind of Thought" href="https://www.blogger.com/atom/26040249" />

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.blogger.com/rsd.pyra?blogID=26040249" />

<meta name="ROBOTS" content="NOINDEX,NOFOLLOW" />
This tag will appear only if you choose not to list your blog (set to unlisted)

• Style Definitions » CSS

<style type="text/css">
...
...
</style>
The html STYLE element holds the various formatting definitions for the html elements in the document/webpage applied thorough the style attribute.

This element is delimited by the <style> (begin tag) and </style> (end tag).

No separate CSS file is used for web pages generated by blogger and all the formatting options would be present here itself.

The content of this element forms a major part of the template content within the header.

The various formatting definitions are explained near the element that they influence.

Body beginning  
 

• Document Body Section

</head>
<body>
..
</body>
</html>
The body of the web page is the content of the html BODY element. This element starts immediately after the head ends and is delimited by <body> (begin tag) and the </body> (end tag).

The end </body> tag is the penultimate tag in the HTML code and can be found just before the </html> tag towards the end of the template.

» Formatting Options

Defined for the <body> element in the document head within the <style> element.
body 
{
	background:#123;
	margin:0;
	padding:20px 10px;
	text-align:center;
	font:x-small/1.5em "Trebuchet MS",Verdana,Arial,Sans-serif;
	color:#ccc;
	font-size/* */:/**/small;
	font-size: /**/small;
}

This style definition for the anchor tag works for all the links created using the anchor tag by default.
a:link {
	color:#9db;
}
a:visited {
	color:#798;
}
a:hover {
	color:#fff;
}
a img {
	border-width:0;
}

• Division holding the total Content

<!-- Begin #content - Centers all content and provides edges for floated columns -->
<div id="content">
...
...
</div>
<!-- End #content -->
</body>
The total content in the web page is included within a division. The terminating tag (</div>) for this division can be found just before the </body> (end tag).

» Formatting [id="content"]

@media all 
{
	#content 
	{
		width:740px;
		margin:0 auto;
		text-align:left;
	}
@media handheld 
{
	#content 
	{
		width:90%;
	}

Move To  

Blog Header [Title and Description]  
 
<!-- Blog Header -->
<div id="header">
	<div>
		<h1 id="blog-title">
		    <ItemPage><a href="<$BlogURL$>"></ItemPage>
			<$BlogTitle$>
		   <ItemPage></a></ItemPage>
		</h1>
		<p id="description">
			<$BlogDescription$>
		</p>
	</div>
</div>

• Blog Header Container

A html DIV element nested within another html DIV element (id=header) holds the content that forms the blog title and description. A html DIV element is delimited by a <div> being tag and the </div> end tag. Any attribute being included within the begin tag.

» Formatting [id="header"]

/* Page Structure
----------------------------------------------- */
	/* The images which help create rounded corners depend on the 
	    following widths and measurements. If you want to change 
	    these measurements, the images will also need to change.
	*/
* Blog Header
----------------------------------------------- */
@media all 
{
   #header 
   {
	  background:#456 url("http://www.blogblog.com/rounders/corners_cap_top.gif") no-repeat left top;
	margin:0 0 0;
	padding:8px 0 0;
	color:#fff;
   }
   #header div 
   {
	background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat left bottom;
	padding:0 15px 8px;
   }
}
@media handheld 
{
	#header 
	{
		  background:#456;
	}
	#header div 
	{
		  background:none;
	}
}

• Blog Title

» Formatting [id="blog-title"]

#blog-title 
{
	margin:0;
	padding:10px 30px 5px;
	font-size:200%;
	line-height:1.2em;
}
#blog-title a 
{
	text-decoration:none;
	color:#fff;
}
A html H1 element delimited by the <H1> (begin tag) and the </H1> (end tag) holds the blog title content. The related attribute being included within the begin tag.

The following Blogger Item Level Tags place the respective data from the blogger database

  • <$BlogURL$> places the content relating to the blog home page URL.
    This will be placed as the value of the href attribute.
  • <$BlogTitle$> places the content relating to the blog title

The blogger item level element <$BlogTitle$> being outside the ItemPage element, would be included in the web page always.

» <ItemPage> : Page level Conditional Element

<ItemPage> is a blogger page level Conditional element. The content of this element would be included/displayed only on the individual post pages and will not be included/displayed on the blog's main page.

The <$BlogTitle$> not being included within the <ItemPage> element, the title text/images would be displayed on all pages.

The html anchor (a) element is made a part of content of the "ItemPage" element. Thus the title content would be formatted as a link to the blog main page when it is a page other than the blog main page (like individual blog post pages) only.

• Blog Description

» Formatting [id="description"]

#description 
{
	margin:0;
	padding:5px 30px 10px;
	font-size:94%;
	line-height:1.5em;
	color:#abc;
}
<p id="description">
    <$BlogDescription$>
</p>
A html paragraph (P) element holds the blog description content. It is delimited by the <p> (begin tag) and the </p> (end tag). The related attribute being included within the begin tag.

The Blogger Item Level Tag <$BlogDescription$> places the data relating to the blog description from the blogger database

Blog post Content holder  
 
<!-- Begin #main - Contains main-column blog content -->
<div id="main">
	<div id="main2">
		<div id="main3">
			<Blogger>
	...
	...
				 <!-- End #comments -->
			</Blogger>
	</div></div></div>
	<!-- End #main -->
<!-- Begin #sidebar -->

• Post Content Containers

The post content is placed within a division with an id="main3", which is nested in another division id="main2" which itself is nested within another division with id="main", each division with its own formatting.

The content relating to the post header, post body, post footer, post comments, post backlinks are all held within the division with id=main3.

You can find the end tags for these divisions just after the end of the code for comments. You can identify them with the </Blogger>, <!-- End #main --> etc.

» Formatting [id="main"]

@media all {
...
#main
{
	width:485px;
	float:left;
	background:#eec url("http://www.blogblog.com/rounders3/corners_main_bot.gif") no-repeat left bottom;
	margin:15px 0 0;
	padding:0 0 10px;
	color:#333;
	font-size:97%;
	line-height:1.5em;
}
...
@media handheld {
...
#main
{
	width:100%;
	float:none;
	background:#eec 
}
...
#main a:link {
	color:#347;
}
#main a:visited {
	color:#666;
}
#main a:hover {
	color:#68a
}

» Formatting [id="main2"]

@media all {
...
#main2
{
	float:left;
	width:100%;
	background:url("http://www.blogblog.com/rounders3/corners_main_top.gif") no-repeat left top;
	padding:10px 0 0;
}
...
@media handheld {
...
#main2
{
	float:none;
	width:100%;
	background:none 
}
...

» Formatting [id="main3"]

No formatting is specified for <div id="main3">.

• <Blogger> : Page level element

The total post content forms part of the blogger page level element <Blogger>.

All the tags/elements relating to the blog post-content should be a part of this element i.e. they should be placed after the <Blogger> (begin tag) and before the </Blogger> (end tag) in the template.

The code within these tags would be processed as many times as the number of posts whose content is to be displayed in the web page.

Move To  

Post Date Header  
 
<Blogger>

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

<!-- Begin .post -->

• Post Date Header

» Formatting [class="date-header"]

.date-header
{
	margin:0 28px 0 43px;
	font-size:85%;
	line-height:2em;
	text-transform:uppercase;
	letter-spacing:.2em;
	color:#586;
}
The post publishing date is displayed within the post header. The text representing the date is placed as the content of a html H2 element, delimited by a <h2> (begin tag) and a </h2> (end tag) with the attributes placed within the begin tag.

The blogger page level tags <BlogDateHeader> and </BlogDateHeader> wrap the content relating to the date. This would result in the date being formatted in a form and displayed in a language you have chosen in your blog date and time settings. The date format defines how the date is expressed [23/03/2007 (or) 23rd March 2007 (or) March 23rd 2007, etc.].

The Blogger Item Level Tag <$BlogDateHeaderDate$> places the data relating to the publishing date from the blogger database.

The formatting options for the html H2 element defines how it is displayed (font face, font size, color, etc).

Container for Post Title, Body and Footer  
 
<!-- Begin .post -->
<div class="post">
	<a name="<$BlogItemNumber$>"></a>
	...
</div>

• Container

The html DIV element holding the content of the post (title, body and footer) is delimited by the <div> (begin tag) and </div> (end tag)

» Formatting [class="post"]

.post
{
	margin:.3em 0 25px;
	padding:0 13px;
	border:1px dotted #bb9;
	border-width:1px 0;
}
.post p {
	margin:0 0 .75em;
  }
.post img {
	margin:0 0 5px 0;
	padding:4px;
	border:1px solid #586;
}

• Block Quote

Blockquote is a html element delimited by the <blockquote> (being tag) and </blockquote> (end tag).

This is inserted into the post container using the tools available on the blogger post create/edit pages.

» Formatting[blockquote]

blockquote	{
	margin:.75em 0;
	border:1px dotted #596;
	border-width:1px 0;
	padding:5px 15px;
}

» Formatting[class=post | blockquote | p]

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

• POST ID

The post ID is assigned to the post by blogger when the post is published or saved as a draft for the first time. This ID is used to create a book mark within the web page for the starting point of the content division.

<a name="<$BlogItemNumber$>">
</a>
The blogger Item Level tag <$BlogItemNumber$> places the data relating to the post ID from the blogger database as the value of the name attribute.

Though a html anchor (a) element is used, it is does not form a hyperlink. This can be understood from the absence of the href="" attribute within the opening tag of the anchor element.

This type of anchors would be useful as bookmarks. This anchor element would form the bookmark for the beginning of the content division for the post.

Move To  

Post Title and Body  
 
<!-- Begin .post -->
	...
	...
	<BlogItemTitle>
		<BlogItemUrl>
			<a href="<$BlogItemUrl$>" title="external link" class="title-link">
		</BlogItemUrl>
		<h3 class="post-title">
			<$BlogItemTitle$>
		</h3>
		<BlogItemUrl>
			</a>
		</BlogItemUrl>
	</BlogItemTitle>
	<div class="post-body">
		<p>
			<$BlogItemBody$>
		</p>
	</div>

• Post Title

<BlogItemTitle>
	...
	...
</BlogItemTitle>
The blogger page level element <BlogItemTitle> surrounds the post title content.

Where the display of the "Title" field in the post compose page has been disabled, the post title would not be published. In such a case, the content within this element would not be processed by blogger.

» Title Text

<h3 class="post-title">
  <$BlogItemTitle$>
</h3>
The html H3 element holding the post title content is delimited by a <H3> (begin tag) and the </H3> (end tag). Any attribute being included within the begin tag.

» Formatting [class="post-title"]

.post-title
{
	margin:0;
	font-size:135%;
	line-height:1.5em;
	background:url("http://www.blogblog.com/rounders3/icon_arrow.gif") no-repeat 10px .5em;
	display:block;
	border:1px dotted #bb9;
	border-width:0 1px 1px;
	padding:2px 14px 2px 29px;
	color:#333;
}
#main a.title-link, .post-title strong {
  text-decoration:none;
  display:block;
  }

» Title Link

<BlogItemUrl>
 <a href="<$BlogItemUrl$>" 
   title="external link" class="title-link">
</BlogItemUrl>
	...
<BlogItemUrl>
 </a>
</BlogItemUrl>
The Blogger Page Level Element <BlogItemUrl> is used to place a HTML anchor element, which makes the post title work as a link. The begin tag <a> and the end tag </a> are placed using separate page level <BlogItemUrl> elements.

The blogger Item Level Tag <$BlogItemUrl$> is used to place the data entered in the Title Link box at the time of creating the blog post. This data is inserted as the value for the href="' attribute for the anchor element.

Where the display of the Link field in the post compose page is not enabled or where it is enabled and left empty, the value of the href attribute would be the url of the permanent link to the post.

» Formatting [class="title-link"]

#main a.title-link, .post-title strong {
  text-decoration:none;
  display:block;
  }
#main a.title-link:hover {
  background-color:#fff;
  color:#000;
  }

• Post Body

<div class="post-body">
 <p> <$BlogItemBody$> </p>
</div>
A paragraph (p) html element nested within a division (div) html element is used to hold the post body content.

The blogger Item level tag <$BlogItemBody$> places the data relating to the post body from the blogger database.

» Formatting [class="post-body"]

.post-body
{
	border:1px dotted #bb9;
	border-width:0 1px 1px;
	border-bottom-color:#eec;
	padding:10px 14px 1px 29px;
}
html>body .post-body 
{
	border-bottom-width:0;
}

Move To  

Post Footer  
 
<div class="post">
...
...
   <p class="post-footer">
	<em>
	<$I18NPostedByAuthorNickname$>
	@ 
	<a href="<$BlogItemPermalinkUrl$>" title="permanent link">
	<$BlogItemDateTime$>
	</a>
	</em>
	<BlogItemCommentsEnabled>
	   <a class="comment-link" href="<$BlogItemCommentCreate$>" <$BlogItemCommentFormOnclick$>>
		<span style="text-transform:lowercase">
			<$I18NNumComments$>
		</span>
	   </a>
	</BlogItemCommentsEnabled>
	<BlogItemBacklinksEnabled>
	   <a class="comment-link" href="<$BlogItemPermalinkUrl$>#links">
		<span style="text-transform:lowercase">
			<$I18NLinksToThisPost$>
		</span>
	   </a>
	</BlogItemBacklinksEnabled>
	<$BlogItemControl$>
   </p>
</div>
<!-- End .post -->

• Post Footer Container

The total footer content is held within a paragraph (p) html element delimited by a <p> (begin tag) and </p> (end tag). Any attribute being included within the begin tag.

The end tag is found just before the </div> for the total post content.

» Formatting [class="post-footer"]

p.post-footer
{
   background:#fff;
   margin:0;
   padding:2px 14px 2px 29px;
   border:1px dotted #bb9;
   border-bottom:1px solid #eee;
   font-size:100%;
   line-height:1.5em;
   color:#666;
   text-align:right;
}
html>body p.post-footer 
{
   border-bottom-color:transparent;
}
p.post-footer em
{
   display:block;
   float:left;
   text-align:left;
   font-style:normal;
}

• Post Author

The content forming a part of the <em> HTML element would be emphasised.

@ would be replaced by the word to mean at.

The Blogger Item level tag <$I18NPostedByAuthorNickname$> places the data relating to the post body from the blogger database. The author name is the name set as the display name in your profile information.

• Time Stamp » Perma Link

PERMALINK is a link to the blog post. The actual url is dependent on the settings chosen for the post pages and archiving frequency for your blog. (Caution: Please do not change those settings frequently as that would result in a change in the post url thereby making it difficult for those who have bookmarked your post to access it).

The Blogger Item level tag <$BlogItemPermalinkUrl$> places the data relating to the post PERMALINK (url) from the blogger database as the value for the href attribute.

The Blogger Item level tag <$BlogItemDateTime$> places the data relating to the time of publishing the post from the blogger database. This text works as the display text for the PERMALINK.

The end </em> tag ends applying the emphasis format for the text.

• Links for Comments Pages in Footer

The blogger page level tag <BlogItemCommentsEnabled> is like a conditional tag. The contents within this tag are processed by the blogger program only when the comments are enabled for the post (comments can be disabled for all the posts together or for each individual post)

» Comments Page URL

The blogger item level tag <$BlogItemCommentCreate$> places the data relating to the URL for accessing the web page displaying the comments for the post. The page also has a form for writing new comments.

Where the comments are made to open up in a pop up window, (&isPopup=true) would not be present in the URL.

» OnClick event to Open the Comments Page in a new window

The blogger item level tag <$BlogItemCommentFormOnclick$> places value for the onclick="" event (javascript code for opening the comment in a new window) which is also placed within the anchor element opening tag.

» Number of Comments

The blogger item level tag <$I18NNumComments$> places the numerical data indicating the number of published comments on the post. It is placed as the content of the HTML <span> element. The style attribute is included within the opening tag. The style property converts the characters to lower case (using a style property) .

» Formatting [class="comment-link"]

a.comment-link {
  /* IE5.0/Win doesn't apply padding to inline elements,
     so we hide these two declarations from it */
  background/* */:/**/url("http://www.blogblog.com/rounders3/icon_comment.gif") no-repeat 0 45%;
  padding-left:14px;
  }
html>body a.comment-link {
  /* Respecified, for IE5/Mac's benefit */
  background:url("http://www.blogblog.com/rounders3/icon_comment.gif") no-repeat 0 45%;
  padding-left:14px;
  }

• Links for Backlinks Page in Footer

The blogger page level tag <BlogItemBacklinksEnabled> is like a conditional tag. The contents within this tag are processed by the blogger program only when the backlinks are enabled for the post (backlinks can be disabled for all the posts together or for each individual post)

» URL for Page Displaying Backlinks

The Blogger Item level tag <$BlogItemPermalinkUrl$> places the data relating to the post PERMALINK (url) from the blogger database as the value for the href attribute ading a bookmark #links.

When a blog reader clicks on this link a page with only the post is displayed. The post content, the comments made on the post and the backlinks for the post are displayed one below the other in that order. The bookmark will ensure that the browser would display that part of the page with the beginning of the backlinks section.

» Number of Backinks

The blogger item level tag <$I18NNumComments$> places the numerical data indicating the number of backlinks created for the post. It is placed as the content of the HTML <span> element. The style attribute is included within the opening tag. The style property converts the characters to lower case (using a style property) .

» Formatting [class="comment-link"]

This style definition is the same as that for the comments above.

• Quick Edit & Email Post Links

<$BlogItemControl$> The blogger item level tag, <$BlogItemControl$> places links for Quick Edit and Email Post if they are enabled for display in the blog settings.

These are also placed within the same paragraph holding the total footer content.

Comments and Backlinks Display division  
 
<Blogger>
...
...
<!-- End .post -->
<!-- Begin #comments -->
<ItemPage>
	<div id="comments">
...
...
	</div>
</ItemPage>
<!-- End #comments -->
</Blogger>

• Comments Division

The total content relating to Comments and Backlinks for a post is included within a division element with the id=comments.

You can find the end tag for the division just after the code for the backlinks along with the Itempage end tag.

» Formatting [id=comments]

#comments
{
	margin:-25px 13px 0;
	border:1px dotted #6a7;
	border-width:0 1px 1px;
	padding:20px 0 15px 0;
}

• <ItemPage> » Comments Conditional Display

The content within the blogger conditional tags, <ItemPage> and </ItemPage> would be displayed only on the inner pages where the blog posts are displayed individually and not on the blog main page.

These tags hold the code for the Comments and the Backlinks for the post. You can find the end tag after the code for the backlinks subsequently.

Move To  

Comments display (on Post Page)  
 
<div id="comments">
	<BlogItemCommentsEnabled>
	<a name="comments">
	</a>
	<h4>
		<$I18NNumComments$>:
	</h4>
	<dl id="comments-block">
		<BlogItemComments>
			<dt class="comment-data" id="c<$BlogCommentNumber$>">
				<a name="c<$BlogCommentNumber$>">
				</a>
				<$I18NAtCommentTimeWithPermalink$>,
				<$I18NCommentAuthorSaid$>	
			</dt>
			<dd class="comment-body">
				<p>
					<$BlogCommentBody$>
				</p>
				<$BlogCommentDeleteIcon$>
			</dd>
		</BlogItemComments>
	</dl>
	<p class="comment-timestamp">
		<$BlogItemCreate$>
	</p>
	<p id="postfeeds">
		<$BlogItemFeedLinks$>
	</p>
	</BlogItemCommentsEnabled>

• Comments » Enabled/Disabled

<BlogItemCommentsEnabled>
...
</BlogItemCommentsEnabled>
The content within the <BlogItemCommentsEnabled> conditional page level tags would be processed and its content displayed by blogger only when comments are enabled for the blog post.

The total code relating to comments is included within these tags.

• Bookmark for the Comments Display area

<a name="comments">
</a>
Though a html anchor (a) element is used, it is does not form a hyperlink. This can be understood from the absence of the href="" attribute within the opening tag of the anchor element.

This type of anchors would be useful as bookmarks. This anchor element would form the bookmark for the beginning of the area on the webpage displaying the comments for the post.

• Number of Comments

The blogger Item Level tag <$I18NNumComments$>, places the data relating to the number of published comments on the post at the top within the h4 HTML element.

» Formatting [id=comments | h4]

#comments h4 {
	margin:0 0 10px;
	padding:0 14px 2px 29px;
 	border-bottom:1px dotted #6a7;
	font-size:120%;
	line-height:1.4em;
	color:#333;
  }

• Comments Block

<dl id="comments-block">
...
</dl>
The <dl> tag indicates a Definition list. It is used in conjunction with <dt> to define definition terms and <dd> to define definition descriptions.

» Formatting [id=comments-block]

#comments-block {
	margin:0 15px 0 9px;
}

• Comment Filler

<BlogItemComments>
...
</BlogItemComments>
The blogger page level tag <BlogItemComments> holds the code for each comment within it.

The content within this tag would be processed as many times as there are comments i.e. once for each comment.

The total code relating to placing a single comment is included within these tags.

• Comment ID : Author

<dt class="comment-data" id="c<$BlogCommentNumber$>">
	<a name="c<$BlogCommentNumber$>"> </a>
	<$I18NAtCommentTimeWithPermalink$>,
	<$I18NCommentAuthorSaid$>	
</dt>

The data relating to comment author is made a part of a definition term by delimiting it within a <dt> (opening tag) and </dt> (end tag).

Sample output relating to a post comment.
<dt class="comment-author" id="comment-614157385342593746">
<a name="comment-614157385342593746"></a>
<a href="http://www.blogger.com/profile/09622048748094105118" rel="nofollow">The Edifier</a>
     said...
</dt>

» Comment ID

Each comment when saved is assigned a unique numerical id. The blogger item level tag <$BlogCommentNumber$> would bring in this data from the blogger database and include it as the value of the id="__" attribute within the <dt> tag as well as the value of the name="__" attribute within the <a>

» Bookmark

Though a html anchor (a) element is used, it is does not form a hyperlink. This can be understood from the absence of the href="" attribute within the opening tag of the anchor element.

<a name="comment-614157385342593746"></a>

This type of anchors would be useful as bookmarks. This anchor element would form the bookmark for the beginning of the comment.

» Author Name : Link

The author name would be the blogger display name, if the comment is posted by a blogger user. The value of the href="__" attribute in such a case would be the link to the blogger profile page.

For an anonymous comment, if the author name is filled by the comment poster, that would be displayed as the comment author name. The link filled in the link field would be taken as the value of href="__" attribute in such a case.

<a href="http://www.blogger.com/profile/09622048748094105118" rel="nofollow">The Edifier</a> said...

For an anonymous comment, the name Anonymous is displayed and no value is fillled for the value of the href="__" attribute

The blogger item level tags <$I18NAtCommentTimeWithPermalink$> and <$I18NCommentAuthorSaid$> would place this data into the web page.

» Formatting [id=comment-data]

.comment-data {
	background:url("http://www.blogblog.com/rounders3/icon_comment.gif") no-repeat 2px .3em;
	margin:.5em 0;
	padding:0 0 0 20px;
	color:#666;
}

• Comment Body : Permalink

<dd class="comment-body">
	<p>
		<$BlogCommentBody$>
	</p>
		<$BlogCommentDeleteIcon$>
</dd>

The data relating to comment body and the perma link to the comment are made a part of a definition description by delimiting it within a <dd> (opening tag) and </dd> (end tag).

» Formatting [class=comment-body]

.comment-body {
	margin:0 0 1.25em;
	padding:0 0 0 20px;
}

Sample output relating to a post comment.

<dd class="comment-body">
<p>Good going.  Your tips are very useful.  Could you write something more on making the blogs more meaningful and purposeful for readers.</p>
</dd>
<dd class="comment-footer">
<span class="comment-timestamp">
<a href="#comment-614157385342593746" title="comment permalink">
15 December, 2006 7:32:00 PM IST
</a>
<span class="item-control blog-admin pid-1713955340">
<a href="http://www.blogger.com/delete-comment.g?blogID=2132555782912734125&postID=614157385342593746" title="Delete Comment">
<span class="delete-comment-icon"> </span>
</a>
</span>
</span>
</dd>

» Comment Body

The blogger page level tag <$BlogCommentBody$>, fetches the post body content from the blogger database. This is placed within a html paragraph element.

» Formatting [class=comment-body | p]

.comment-body p {
	margin:0 0 .5em;
  }

» Comment Perma Link

The blogger page level tag <$BlogCommentDeleteIcon$> fetches the content relating to creating a perma link for the comment with the time stamp for the comment working as the link text.

Where the person viewing the blog pages has the administrative authority for the blog, a delete icon (bin image) would also be displayed.

» Formatting [class=deleted-comment]

.deleted-comment {
	font-style:italic;
	color:gray;
}

• Post a Comment Link

The blogger page level tag <$BlogItemCreate$>, fetches the content relating to creating a link using which the page to create/publish a new comment can be accessed by the blog reader.

This is included within a paragraph (p) element delimited by the <p> (opening tag) and a </p> (end tag).

» Formatting [class=comment-timestamp]

.comment-timestamp {
	margin:0 0 .5em;
	padding:0 0 .75em 20px;
	color:#fff;
}
.comment-timestamp a:link {
	color:#fff;
}

• Link for Comments Feed

The blogger page level tag <$BlogItemFeedLinks$>, fetches the content relating to creating a link for the feeds for the comments on the post.

This is included within a paragraph (p) element delimited by the <p> (opening tag) and a </p> (end tag).

This link can be found at the bottom of the page just after the navigational links below the content relating to backlinks.

» Formatting [id=postfeeds]

#postfeeds {
	padding:0 15px 0;
}

Move To  

Backlinks display (on Post Page)  
 
<Blogger>
...
...
</BlogItemCommentsEnabled>

<BlogItemBacklinksEnabled>
	<a name="links">
	</a>
	<h4>
		<$I18NLinksToThisPost$>:
	</h4>
	<dl id="comments-block">
		<BlogItemBacklinks>
			<dt class="comment-title">
				<$BlogBacklinkControl$>
				<a href="<$BlogBacklinkURL$>" rel="nofollow">
					<$BlogBacklinkTitle$>
				</a>
				<$BlogBacklinkDeleteIcon$>
			</dt>
			<dd class="comment-body">
				<$BlogBacklinkSnippet$>
				<br/>
				<span class="comment-poster">
					<em>
					<$I18NPostedByBacklinkAuthor$> @ 
					<$BlogBacklinkDateTime$>
					</em>
				</span>
			</dd>
		</BlogItemBacklinks>
	</dl>
	<p class="comment-timestamp">
		<$BlogItemBacklinkCreate$>
	</p>
</BlogItemBacklinksEnabled>

• Backlinks » Enabled/Disabled

<BlogItemBacklinksEnabled>
...
</BlogItemBacklinksEnabled>
The content bound within the <BlogItemBacklinksEnabled> conditional page level tags would be processed and its content displayed by blogger only when backlinks are enabled for the blog post.

The total code relating to backlinks is included within these tags.

• Bookmark for the Backlinks Display area

<a name="links">
</a>
Though a html anchor (a) element is used, it is does not form a hyperlink. This can be understood from the absence of the href="" attribute within the opening tag of the anchor element.

This type of anchors would be useful as bookmarks. This anchor element would form the bookmark for the beginning of the area on the webpage, displaying the backlinks for the post.

• Number of Backlinks

The blogger Item Level tag <$I18NLinksToThisPost$>:, places the data relating to the title for the backlinks section. This does not include the number of backlinks for the post.

The links to the post in other blogger blog posts, are verified at the time of displaying the post page and only the working links are listed. The number of backlinks is not a static figure whose data can be obtained from the blogger database (unlike in the case of comments).

» Formatting [id=comments | h4]

#comments h4 {
	margin:0 0 10px;
	padding:0 14px 2px 29px;
 	border-bottom:1px dotted #6a7;
	font-size:120%;
	line-height:1.4em;
	color:#333;
  }
The style properties used are the same for the elements within the comments display section as well as the backlinks display section.

• Backlinks Block

<dl id="comments-block">
...
</dl>
The <dl> tag indicates a Definition list. It is used in conjunction with <dt> to define definition terms and <dd> to define definition descriptions.

» Formatting [id=comments-block]

#comments-block {
	margin:0 15px 0 9px;
}

• Backlinks Filler

<BlogItemBacklinks>
...
</BlogItemBacklinks>
The blogger page level tag <BlogItemBacklinks> holds the code for each backlink within it.

The content within this tag would be processed as many times as there are backlinks i.e. once for each backlink.

The total code relating to placing a single backlink is included within these tags.

• Backlink Title : Link

<dt class="comment-title">
	<$BlogBacklinkControl$>
	<a href="<$BlogBacklinkURL$>" rel="nofollow">
		<$BlogBacklinkTitle$>
	</a>
	<$BlogBacklinkDeleteIcon$>
</dt>

The data relating to comment author is made a part of a definition term by delimiting it within a <dt> (opening tag) and </dt> (end tag).

» Formatting [class=comment-title]

.comment-title {
..
}

This formatting style is not defined.

Sample output relating to a backlink to the post.

<dl id="comments-block" class="comments-block">  
<div class="collapsed-backlink backlink-control"> 
<dt class="comment-title"> 
<span class="backlink-toggle-zippy"> </span> 
<a href="http://www.adhemari.com/2007/07/learning-blogging-learning-about-posts.html" rel="nofollow">Learning Blogging: Learning about Posts</a> 
<span class="item-control pid-979509998"> 
<a title="" href="http://www.blogger.com/delete-backlink.g?blogID=2132555782912734125&postID=8409992624940352877&backlinkURL=http%3A%2F%2Fwww.adhemari.com%2F2007%2F07%2Flearning-blogging-learning-about-posts.html"> 
<span class="delete-comment-icon"> </span> 
</a> 
</span> 
</dt>

» Backlink Control

The blogger item level tag <$BlogBacklinkControl$>, places the controls within a span (<span class="backlink-toggle-zippy"> </span>) that would enable the backlink detail to be folded and unfolded.

» Backlink Title : Link

The blogger item level tag <$BlogBacklinkURL$> places the data relating to the url of the post where the link to the current post exists as the value of the href="__" attribute within the anchor tag.

The blogger item level tag <$BlogBacklinkTitle$> places the data relating to the title of the post where the link to the current post exists. This text works as the display text for the link to that post i.e. the backlink.

• Content of the Post holding the link

A snippet of the content of the post where the link to the current post has been placed would be placed along with the backlink. This content is hidden by default and can be displayed in a pane that is expanded on clicking on the right arrow icon to the left.

The blogger item level tag <$BlogBacklinkSnippet$> places the data relating to the snippet.

» Formatting [class=comment-body]

.comment-body {
	margin:0 0 1.25em;
	padding:0 0 0 20px;
}

» Formatting [class=comment-body | p]

.comment-body p {
	margin:0 0 .5em;
  }

» Formatting [class=comment-timestamp]

.comment-timestamp {
	margin:0 0 .5em;
	padding:0 0 .75em 20px;
	color:#fff;
}
.comment-timestamp a:link {
	color:#fff;
}

• Author of the Post holding the link

The name of the author publishing the post containing the link would be displayed along with time stamp indicating the time of publishing the post. This content is hidden by default and can be displayed in a pane that is expanded on clicking on the right arrow icon to the left.

The blogger item level tag <$I18NPostedByBacklinkAuthor$> places the data relating to the author and the item level tag <$BlogBacklinkDateTime$> places the data relating to the time stamp.

» Formatting [class=comment-poster]

.comment-poster {
	font-weight:bold;
}

• Create a Link

The blogger page level tag <$BlogItemBacklinkCreate$> fetches the content relating to creating a link using which the page to create a new post with a link to the current post can be accessed by the blog reader.

This is included within a paragraph (p) element delimited by the <p> (opening tag) and a </p> (end tag).

End of Post Content Holder  
 
<Blogger>
...
...
</BlogItemBacklinksEnabled>

					   <p style="padding-left:20px;">
					      <a href="<$BlogURL$>"><< <$I18NHome$>
					      </a>
					   </p>
					</div>
				</ItemPage>
				<!-- End #comments -->
			</Blogger>
		</div>
	</div>
</div>
<!-- End #main -->

Link to Blog Main Page (HOME)

Towards the end of the posts container after all the content is placed a link to the home page is created.

The blogger item level tag <$BlogURL$> would place the blog url as the value of the href="__" attribute and the blogger item level tag <$I18NHome$> would place the text that works as the display text for the link (Home - by default).

Move To  

Side Bar Container  
 
<!-- End #main -->
<div id="sidebar">       ← <!-- Begin #sidebar -->
<!-- Begin #profile-container -->
	<$BlogMemberProfile$>
<!-- End #profile -->
...
...
</div>         ← <!-- End #sidebar -->

• Sidebar Container

The side bar code starts immediately after the end of the main post section code.

The total content within the side bar is made a part of a html div element.

» Formatting [id=sidebar]

@media all {
	#sidebar {
	width:240px;
	float:right;
	margin:15px 0 0;
	font-size:97%;
	line-height:1.5em;
}
...
}

@media handheld {
	#sidebar {
	width:100%;
	float:none;
}
..
}

• Member Profile Box

The total code for forming the member profile box is placed into the web page by the blogger item level tag <$BlogMemberProfile$>.

Thus any changes to be made to it have to be by using the style properties.

Sample output from a blog page.

<!-- Begin #profile-container -->
<div id="profile-container">
	<h2 class="sidebar-title">About Me</h2>
	<dl class="profile-datablock">
		<dt class="profile-img">
			<a href="http://www.blogger.com/profile/12624555414640007574">
			<img width="80" alt=" My Photo" src="http://farm1.static.flickr.com/85/233472093_1f1d235e7b_m.jpg" height="53">
			 </a> 
		</dt>
		<dd class="profile-data">
			<strong>Name:</strong>The Edifier
		</dd>  
	</dl>
	<p class="profile-link">
		<a href="http://www.blogger.com/profile/12624555414640007574">View my complete profile</a>
	</p>
	<p class="profile-textblock"> 
	I wish to help out people in their pursuit of knowledge acquisition by sharing what i know and learning what i dont 
	</p>  
</div> 
<!-- End #profile -->

» Formatting [id=profile-container]

@media all {
   #profile-container {
   background:#586 url("http://www.blogblog.com/rounders3/corners_prof_bot.gif") no-repeat left bottom;
   margin:0 0 15px;
   padding:0 0 10px;
   color:#fff;
}
...
}

@media handheld {
	#profile-container {
	background:#586;
}
..
}

» Formatting [id=profile-container | h2]

@media all {
...
	#profile-container h2 {
	background:url("http://www.blogblog.com/rounders3/corners_prof_top.gif") no-repeat left top;
	padding:10px 15px .2em;
	margin:0;
	border-width:0;
	font-size:115%;
	line-height:1.5em;
	color:#fff;
}
...
}

@media handheld {
	#profile-container h2{
	background:none;
}
..
}

» Formatting [id=profile-container | P]

#profile-container p {
	margin:0 15px .5em;
}

» Formatting [id=profile-container | a]

#profile-container a {
	color:#fff;
}

» Formatting [id=profile-container | class=profile-textblock]

#profile-container .profile-textblock {
	clear:left;
}

» Formatting [class=sidebar-title]

.sidebar-title {
	margin:0;
	padding:0 0 .2em;
	border-bottom:1px dotted #456;
	font-size:115%;
	line-height:1.5em;
	color:#abc;
}

» Formatting [class=profile-datablock]

.profile-datablock {
	margin:0 15px .5em;
	border-top:1px dotted #7a8;
	padding-top:8px;
}

» Formatting [class=profile-datablock | ul]

ul.profile-datablock {
	list-style-type:none;
}

» Formatting [class=profile-image]

.profile-img {display:inline;}

» Formatting [class=profile-image | img]

.profile-img img {
	float:left;
	margin:0 10px 5px 0;
	border:4px solid #bec;
}

» Formatting [class=profile-data | strong]

.profile-data strong {
	display:block;
}

» Formatting [class=profile-link | a]

.profile-link a {
	background:url("http://www.blogblog.com/rounders3/icon_profile.gif") no-repeat 0 .1em;
	padding-left:15px;
	font-weight:bold;
}

Move To  

Side Bar Boxes  
 
<!-- End #profile -->
	<!-- Begin .box -->
	<div class="box"><div class="box2"><div class="box3">


	</div></div></div>
	<!-- End .box -->
</div>         ← <!-- End #sidebar -->

All the other content in the side bar, apart from the Member Profile is placed in a division which is nested two levels deep.

» Formatting [class=box]

@media all {
	.box {
	background:#234 url("http://www.blogblog.com/rounders3/corners_side_top.gif") no-repeat left top;
	margin:0 0 15px;
	padding:10px 0 0;
	color:#abc;
}
...
}

@media handheld {
	.box {
	background:#234;
	}
..
}

» Formatting [class=box | ul]

.box ul {
	margin:.5em 0 1.25em;
	padding:0 0px;
	list-style:none;
}

» Formatting [class=box | ul | li ]

.box ul li {
	background:url("http://www.blogblog.com/rounders3/icon_arrow_sm.gif") no-repeat 2px .25em;
	margin:0;
	padding:0 0 3px 16px;
	margin-bottom:3px;
	border-bottom:1px dotted #345;
	line-height:1.4em;
}

» Formatting [class=box | p ]

.box p {
	margin:0 0 .6em;
}

» Formatting [class=box]

@media all {
	.box2 {
	background:url("http://www.blogblog.com/rounders3/corners_side_bot.gif") no-repeat left bottom;
	padding:0 13px 8px;
}
...
}

@media handheld {
	.box2 {
	background:none;
	}
..
}

Side Bar » Links List  
 
<div class="box3">
<MainOrArchivePage>
	<h2 class="sidebar-title"><$I18NLinks$></h2>
	<ul>
		<li><a href="http://news.google.com/">Google News</a></li>
		<li><a href="http://help.blogger.com/bin/answer.py?answer=41427">Edit-Me</a></li>
		<li><a href="http://help.blogger.com/bin/answer.py?answer=41427">Edit-Me</a></li>
	</ul>
</MainOrArchivePage>

• Title

The blogger item level tag $I18NLinks$> places the data relating to the title of the links list (links by default).

» Formatting [class=sidebar-title ]

.sidebar-title {
	margin:0;
	padding:0 0 .2em;
	border-bottom:1px dotted #456;
	font-size:115%;
	line-height:1.5em;
	color:#abc;
}
The class "sidebar-title" is used for formatting multiple html elements (title of member profile box, title of links list, title of previous posts list, title of archived posts list). Thus if you intend to modify the appearance of the title of those elements where the class is applied, use a new (different) class and define the characteristics for that.

• Links List » Conditional Display

The links list is formatted using an unordered (bulleted list). Each link is formed as a list item within the list.

To create/modify entries within the list, you need to create/modify the relevant list item.

The list is placed within the blogger page level conditional tag <MainOrArchivePage> (begin tag) and </MainOrArchivePage> (end tag) which would ensure that the list is displayed only on the blogs main page or the blog pages when the archive list is being displayed. The list would not be displayed on the post pages when the individual posts are displayed.

Move To  

Side Bar » Previous Posts List  
 
<div class="box3">
...
<h2 class="sidebar-title"><$I18NPreviousPosts$></h2>
	<ul id="recently">
	<BloggerPreviousItems>
		<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
	</BloggerPreviousItems>
	</ul>

• Title

The blogger item level tag $I18NPreviousPosts$> places the data relating to the title of the previous posts list (Previous Posts by default).

» Formatting [class=sidebar-title ]

.sidebar-title {
	margin:0;
	padding:0 0 .2em;
	border-bottom:1px dotted #456;
	font-size:115%;
	line-height:1.5em;
	color:#abc;
}
The class "sidebar-title" is used for formatting multiple html elements (title of member profile box, title of links list, title of previous posts list, title of archived posts list). Thus if you intend to modify the appearance of the title of those elements where the class is applied, use a new (different) class and define the characteristics for that.

• List

The list of previous posts is also formatted using an unordered list. Each post listed is a list item forming a link (with the permalink as the url) to the relevant post. The title of the posts is used as the display text for the hyperlink.

The blogger item level tag <$BlogItemPermalinkURL$> places the data relating to the posts perma link (url) as the value of the href="__" attribute and the blogger item level tag <$BlogPreviousItemTitle$> places the data relating to the post title.

The code for generating the list items is placed within the blogger page level tags <BloggerPreviousItems> and </BloggerPreviousItems>. To ensure that the published posts prior to the first post (in display on the blog page) are listed, the code generating the list has to be processed anew every time the post in display changes.

The list is displayed on all the blog pages. On the main page, the list displays the 10 most recent posts. On the post pages and other pages, the list would display the posts prior to the first post in display.

Side Bar » Archives List  
 
<div class="box3">
...
<MainOrArchivePage>
	<h2 class="sidebar-title"><$I18NArchives$></h2>
	<ul class="archive-list">
	<BloggerArchives>
		<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
	</BloggerArchives>
		<ArchivePage>
		<li><a href="<$BlogURL$>"><$I18NCurrentPosts$></a></li>
		</ArchivePage>
	</ul>
</MainOrArchivePage>

• Title

The blogger item level tag $I18NArchives$> places the data relating to the title of the archives list (Archives by default).

» Formatting [class=sidebar-title ]

.sidebar-title {
	margin:0;
	padding:0 0 .2em;
	border-bottom:1px dotted #456;
	font-size:115%;
	line-height:1.5em;
	color:#abc;
}
The class "sidebar-title" is used for formatting multiple html elements (title of member profile box, title of links list, title of previous posts list, title of archived posts list). Thus if you intend to modify the appearance of the title of those elements where the class is applied, use a new (different) class and define the characteristics for that.

• Archives List

The list of Archived posts is also formatted using an unordered list. Each set of archived posts is a list item forming a link to the page displaying the set of posts. The display text for the hyperlink is dependent on the options chosen for archiving frequency and post pages.

» Conditional

The list is placed within the blogger page level conditional tag <MainOrArchivePage> (begin tag) and </MainOrArchivePage> (end tag) which would ensure that the list is displayed only on the blogs main page or the blog pages when the archive list is being displayed. The list would not be displayed on the post pages when the individual posts are displayed.

The code for creating the list is placed within the blogger conditional page level tags <BloggerArchives> and </BloggerArchives>. The code within these tags would not be processed if archiving is disabled for the blog.

» The Link

The blogger item level tag <$BlogArchiveURL$> places the data relating to the page displaying the archived posts as the value of the href="__" attribute and the blogger item level tag <$BlogArchiveName$> places the data that works as the display text for the link. The url and the display text are dependent on the archiving frequency and the post pages settings chosen for the blog.

» Link to Home Page

Additional piece of code is placed within the blogger conditional tags <ArchivePage> and </ArchivePage> which will be processed only if the page in display is one which is displaying the archived posts. Whenever you access the archive pages from any blog page, an additional link at the end of the list is placed that would work as a link to the blog's main page.

The blogger item level tag <$BlogURL$> would place the blog url as the value of the href="__" attribute and the blogger item level tag <$I18NCurrentPosts$> would place the text that works as the display text for the link (Current Posts - by default).

Move To  

Side Bar » End  
 
<div class="box3">
...
<p id="powered-by">
<a href="http://www.blogger.com">
<img src="http://buttons.blogger.com/bloggerbutton1.gif" alt="Powered by Blogger" />
</a>
</p>

<p id="blogfeeds"><$BlogFeedsVertical$></p>

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

</div></div></div>          ← End of box, box2, box3
</div> <!-- End #sidebar -->

• Blogger button

Towards the end of the side bar code you will find the above noted code which would place an image button within the side bar.

The additional line of code within the paragraph element is to work as a hint to those searching for customising the side bar code.

• Feed Link

Where your blog has feeds enabled, you may also find a link to the blog feed at the end after the button.

» Formatting [id=blogfeeds]

#blogfeeds {

}
No style properties are defined for this.

• Adding content to the sidebar

If you understand the total template code (atleast the sidebar code) it would be convenient for you to make insertions into the sidebar. If you insert anything at the end (before the 3 </div> tags that end the side bar boxes), it would be added to the side bar at the bottom.

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

<!-- End #footer -->
</div>
<!-- End #content -->
</body>
</html>

• Container

The footer container is formed by three html divisions nested one within the other. Where the footer is empty, only the container is displayed on the blog pages initially. You can fill the footer with your own content as you intend.

» Formatting [id=footer]

#footer {
	clear:both;
	margin:0;
	padding:15px 0 0;
}
An invisible horizontal ruler and an empty paragraph are included within the content of the footer.

The content within the paragraph is commented out so as not to be displayed. It works as a hint to those intending to include content in the footer.

» Formatting [id=footer | hr]

#footer hr{
	display:none;
}

» Formatting [id=footer | p]

#footer p{
	margin:0;
}

» Formatting [id=footer | a]

#footer a{
	color:#fff;
}

» Formatting [id=footer | div]

@media all {
	#footer div {
	background:#357 url("http://www.blogblog.com/rounders3/corners_cap_top.gif") no-repeat left top;
	padding:8px 0 0;
	color:#fff;
}
...
}

@media handheld {
	#footer div {
	background:#357;
	}
..
}

» Formatting [id=footer | div | div]

@media all {
	#footer div div {
	background:url("http://www.blogblog.com/rounders3/corners_cap_bot.gif") no-repeat left bottom;
	padding:0 15px 8px;
	}
...
}

@media handheld {
	#footer div {
	background:none;
	}
..
}
Author Credit : The Edifier ... Continued Page 27

Move To  
Bookmark and Share

♣ Copyright � Krishbhavara. All rights reserved
♣ Site optimized for Internet Explorer 5.5 and above