Comments

Apart from the main post, the listing of comments is another area of your blog that you may want to customise.

There are two views to the comments on your blog, the list of comments you see when you view the post on it’s own and the list of comments when you are leaving a comment yourself.

There are several main differences between these two posts.

  • Without major hacking and editing you cannot change the way that the comments appear when you are leaving a post yourself.
  • There is not a easy way to insert the profile image of the commenter into the list of comments under the posting.
  • Even though you change the way comments appear under the posting, when you post a comment, the other format will be displayed.

Although there are these restrictions, we can make it all look a little nicer when you view the comments under the posting. This is also referred to as ItemPage and a corresponding Blogger tag <ItemPage> is used to show content in this format.

What I want to do is as follows:

Highlight my comments so they appear in a different color to the others.
Highlight the commenters names in bold.

The code which displays the comments at the bottom of each posting can be found in Zone 3 as follows:

<!– 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>


<p class=”comment-timestamp”>
<a xhref=”<$BlogURL$>” mce_href=”<$BlogURL$>” ><< Home</a>
</p>
</div>

</ItemPage>

<!– End #comments –>

Now at first glance, this looks a little overwhelming, but we do not need to change very much to achieve the effects I wanted to make.
Firstly, we will make the commenters name bold as this is the quickest and easiest to do. We need to locate the <$BlogCommentAuthor$> tag which is used to display the name of the person who made the comment and enclose it within the HTML tags to make text bold <B> and </B>. 9 lines into the code above is the following line:

<$BlogCommentAuthor$> said…

All we will need to do is amend the code as follows:

<B><$BlogCommentAuthor$></B> said…

This will change the commenters name to appear as follows:

You could also change the “said…” text to something else if you wanted, but I am quite happy with it.

Now, I want to change the background color of any comments made by me. Any color will do – as long as its not bright pink! When reading other blogs I always like to see if the writer is part of the comment stream after their posts and this effect allows you to see that immediately.
For this part of the tutorial I will be writing some Javascript to achieve the background color change. If you are daunted by this then leave now, otherwise… let’s go!

The basis for this code is as follows:

  • Check the name of the commenter by reading the contents of the <$BlogCommentAuthor$> tag.
  • If that name is “Taoski” then send back some code to make the font bold and green.
  • Otherwise, do nothing.

The Javascript code is as follows:

<script type=”text/Javascript”>
var author = ‘Taoski’;
var commenter = ‘<$BlogCommentAuthor$>’;
if (commenter.match(author))
{
document.write(‘<b style=”color: green;”>’)
};
</script>

Don’t worry too much about the code itself. What you will need to change is the author variable to have your name in instead of Taoski.

To activate their code, copy and paste it on the line underneath the <BlogItemComments> tag as follows:

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

<BlogItemCommentsEnabled><a name=”comments”></a>
<h4><$BlogItemCommentCount$> Comments:</h4>
<dl id=”comments-block”>
<BlogItemComments>

<script type=”text/Javascript”>
var author = ‘Taoski’;
var commenter = ‘<$BlogCommentAuthor$>’;
if (commenter.match(author))
{
document.write(‘<b style=”color: green;”>’)
};
</script>

<dt class=”comment-poster” id=”c<$BlogCommentNumber$>”><a name=”c<$BlogCommentNumber$>”></a>
<B><$BlogCommentAuthor$></B> 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>
</b>
</BlogItemComments>

You will also need to add a </b> tag just before the </BlogItemComments> tag at the end to stop the font being bold on the next comment.

The result will show up like this:


And that rounds up the comments section overhaul!

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

Related: