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
A great example here of thinking smarter to solve a problem. Instead of giant arrays of solar panels, just get a whole lot of mirrors together and focus them on a high-temp single panel. Looks like a 4-meter (13.1 feet) dish can put out 8 kilowatts, more than enough for a normal home. Also, they can go all the way up to a massive 64-meter (209.9 feet!) dish, capable of just over 2 megawatts! (Might want to put that one in the desert instead of the front lawn)
Google has yet again offered for free what others decide to outrageously charge for. Welcome to 
Google adapts SketchUp to be a basic 2D, vector-based design application to compete with Illustrator.
In the fight against spam and scams, it appears 
Thanks Bryce! I prefer the one done by 
There has recently been a wealth of resources coming out addressing some of the major problems we’ve all got, and how we can go about solving them. Of course, it’s Geeks leading the way with online multimedia and support. Here are some links to get you Geeking out with some of the better ‘understand what’s going on, but don’t bore me to death’ resources I’ve found, in true stream-of-consciousness fashion:
Entries