Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Jun 13, 2007

Digg This Story

Post Footer – Customize Template (II)

We continue from where we left off in Post Footer – Customize Template (I). In the first part, we went through how you can change and customize the appearance of the “Posted by author” link and replace it with another name or picture. You could also remove the timestamp if you want. In this part, we continue with customization of the “Comments”, “Labels” and other icons shown in the Blogger Post Footer.

Comments

1. Settings

If you simply want to enable or disable Comments, login into your Dashboard and under Settings -> Comments, you will see the options for “Comments”. You can either “Show” or “Hide”. You can choose “Hide” so as not to show the Comment link, without deleting existing comments.

2. Change the word “Comments”

Should you want to retain the Comment link but change the word “Comments” to something else, scroll to this part of the template:-

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/> <b:else/><data:post.numComments/> <data:top.commentLabelPlural/> </b:if></a>
</b:if>
</b:if>
</span>


In my spiderman example, I wanted to use the phrase “Friendly Neighbors”. Where the blue code is, I replaced it with the phrase “Friendly Neighbor”, the singular form when there is only 1 comment. At the red part of the code, I replaced it with the plural form “Friendly Neighbors” when there are 2 comments or more. The resulting code is:-

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 Friendly Neighbor<b:else/><data:post.numComments/> Friendly Neighbors</b:if></a>
</b:if>
</b:if>
</span>


And this is what you will see:-

Post Footer – Customize Template

Links to Post

If you do not want this in your Post Footer, go to Dashboard, under Settings -> Comments, you can choose to “Show” or “Hide” the “Backlinks”. If you select “Hide”, the backlinks to your Post and the words “Links to this Post” will not be displayed.

Email Post icon

In your Dashboard, under Settings -> Basic, you can see a query “Show Email Post links?” If you choose “Yes”, you will see the little envelope image for viewers to click to email the Post to other people. Should you choose “No”, that image will not be displayed.

Labels

1. Change “Labels” name

To suit the theme of your Blog, you may want to change the word “Labels” to something else, like “Subjects”, “Topics”, “Categories”, “Genre”, etc. Scroll to this part of the template:-

<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</p>


Substitute the part of the code (shown in red) with the word that you want to use. The result is this:-

Post Footer – Customize Template

2. Image instead of name

In Part I of this article, we went into details on how you can use an image to replace the author's name. If you want to have a picture to replace the word “Labels”, the procedure is the same. Instead of the name to replace the part of the above code (shown in red), insert the image code. The resulting code would appear like this:-

<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<a href="URL of your Blog"><img src="Image URL" /></a>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</p>


Further reading:-

Remove Older Post and Posts (Atom) Links

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

4 comments:

Jimi said...

If you change "data:commentLabel/" to something else you should also change this too a little further down to reflect those changes:

<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>


Great help as always!

Joseph Patrick said...

Is there anyway to put a comment box directly on the page instead of taking the reader to a generic blogger page? For example, I know AmericaBlog.com uses blogger, yet you can post comment directly on the page. Any idea how to do this? Thanks and great site,

Joseph Patrick
http://www.politidose.com/

Ashutosh Mishra said...

Dear bizwhiz,
I like your posts very much, and I have implemented quite a lot of them in my blog. Just one more query: can you tell the procedure to include a Post a Comment box right below the Post (without going to a separate page for posting a comment). As you must be knowing, this is available by default in WordPress themes and I have also seen a Blogger template implementing this:
http://techgeekatin.blogspot.com/2008/01/microsoft-zunephone-o.html

Thanks!
:)

Damian Zerek said...

just a question.

How do I change the comment link to a button. It is a button I made.

http://img523.imageshack.us/my.php?image=commentsbutton2jg6.png

That up there is the button.