TechCular

Topics: Blogger Hacks, Blogger Tricks, Comments

Blogger template can be highly customized if you know how to do this! You can change the look, feel and presentation by making small changes to your blogger template. You have might have seen WordPress blogs that displays comments with numbers. There are several WordPress plugins for comments section to customize, but now you can also show comments on blogger posts with numbers. By applying numbering comments hack to your blogger template, you add a special identity to each comment and it makes the comments section look professional.

Add Numbering Comments or Comment Numbers hack to Blogger Comments section

1. Login to your blogger dashboard.
2. Navigate to Page Elements >> Edit HTML >> Expand Widget templates
3. Search for the following codes inside your template and add what is highlighted.

<b:includable id='comments' var='post'>

........

<dl id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

<b:loop values='data:post.comments' var='comment'>

<dt style='clear: both;' class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/>
</a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<span class='numberingcomments' style='float: right; font-size: 20px;'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>

<dd class='comment-body'>
.......
</dd>

</b:loop>
</dl>

4. Note that you have to add the highlighted codes only. You can change the font size to suit your template.
5. Now we are done with the basic set up. Let’s add some style to it by customizing the CSS part.
6. Search for ]]></skin> inside your template. Add the following code just above it.

.comment-number {
float: right;
background: url(http://i40.tinypic.com/14tmp9e.jpg) no-repeat;
width:50px;
height:50px;
margin-right: 15px;
margin-top: -35px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 18px;
font-weight: bold;
}

/*since the numbers are actually links, we need to force the color properties*/

.comment-number a:link, .comment-number a:visited {
color: #445566 !important;
text-decoration: none !important;
}
.comment-number a:hover, .comment-number a:active {
color: #FF9933 !important;
text-decoration: none !important;
}

7. Save your template to reflect the changes we have made.
8. You are done.

If you face problems like image counter not aligned to the proper place, you can play with the comments counter position until it gets aligned to proper location. You can edit the following lines in the above code and keep trying until it looks perfect :

margin-right: 15px;
margin-top: -35px;

Now numbering comments hack has been implemented and your blog should display all comments with numbers. If you face any problems, don’t hesitate to use the following comments section.