Comment Link in Blogger - make it attractive and visible

February 6, 2009

In default Blogger templates, the comment link (the one that allows your visitors to leave a comment when clicked) looks like this:

Current appearance may be confusing for some readers...
► appearance: link is "stuffed" in the footer with all the other items...not quite visible
► interactivity: it does not invite your reader to leave a comment, and this can cause less comments on your Blog

In this tutorial, we'll learn how to:
► replace the word comment(s) with something else
► add some text beside the comment link (like: Leave your comment here: 4 comments)
► add the comment icon beside the link
► fix the singular/plural bug - 1 comments
► add a description (a tooltip) to your comment link when hovered

***

Replace the word comments with something else
This is an easy customization. You can replace the word comments with your own text (examples: Reactions, Leave your comment here, Comment here, Say something,....). Ready?
Go to:
LAYOUT ► PAGE ELEMENTS ► click on Edit in the BLOG POSTS box
In the pop up window, replace the word comments with reactions (just an example, you can use any text you like...)

***

Add some text beside the comment link
We can place some text before the comment link, or just after it.
To do this, you will have to tweak the code. Just a bit. So I advise to:
Back up your current Blogger template

When you did, go to:
LAYOUT ► EDIT HTML ► click on Expand widget templates (in the upper right corner). Now, you can see the complete code of your template. Use [Ctrl] + F (or Edit ► Find from your browser's menu), and locate the following part of code:

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>

This is the code for the comment link. All we have to do now, is place some text in appropriate places in the code:

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>Leave a comment...<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if> so far</a>
</b:if>
</b:if>
</span>

...in orange, you can see the custom text in front of the comment link
...in pink, custom text after the comment link
...nothing from the code is deleted. We've just added some text.

This example is made on dummies template, and therefor it's not eye catching. But it should give you the idea...you can stylize your post footer to suit your needs.

***

Add the comment icon beside the comment link
This is a great way to make your comment link more visible and attractive. There will be more talk about comment icons in some other tutorial...
For now, you'll learn how to place a picture with a comment icon (bubble) or the picture of your choice, beside the comment link.
Here's the code:

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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><img src='http://i39.tinypic.com/33z5njo.jpg' style='border:0px'/>
</b:if>
</b:if>
</span>

...in orange, you can see where the picture is placed
...you will REPLACE the part in pink with the URL address of your pic (you can use photobucket.com, tinypic.com......for free pic hosting)

In this example, the picture is placed after the comment link....
To place it before the comment link, you'll have to change it's place:

<b:if cond='data:post.allowComments'><img src='http://i39.tinypic.com/33z5njo.jpg' style='border:0px'/>

...place the image code right after the line in orange

***

How to fix a singular/plural error with comment link
This one goes for all Neat Freaks and Pedantic Petes.....
You've probably noticed this bug:

► 0 comments
► 1 comments (here's the bug)
► 2 comments

What to do?

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<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>

...replace the part in orange with: comment
...replace the part in pinkish with: comments
...that's right, only with the word, without brackets...

***

Add a Tooltip to your comment link
This is a great feature. The user hovers the mouse cursor over the comment link, without clicking it, and a small "hover box" appears with description.
You can add any kind of text to your comment link in order to make it more attractive and descriptive.
Here's how:

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='Click here to view/post comments'><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 orange, you can see the added text...

I would like to thank BeautifulBeta for this nice hack....

Smile!