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
- Login to your blogger dashboard.
- Navigate to Page Elements >> Edit HTML >> Expand Widget templates
- Search for the following codes inside your template and add what is highlighted.
- Note that you have to add the highlighted codes only. You can change the font size to suit your template.
- Now we are done with the basic set up. Let’s add some style to it by customizing the CSS part.
- Search for ]]></skin> inside your template. Add the following code just above it.
- Save your template to reflect the changes we have made.
- You are done.
<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>.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;
}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.
Below are some more related articles to the topic:
I am having issues with this. It is only numbering my comments, and not all comments posted. Can you please help!!?
Thank you!
Layla
@ Layla : This hack is to assign numbers to each comment. However, it should show total number of comments on Blogger homepage and labels page. Check if you have followed all steps properly.
Hi Bapun,
I followed all steps. If i send you a copy of my script, can you help me?
Please email me at couponjourney @ gmail . com
Thanks,
Layla
@ Layla : Sure. Download the template and send it to bapun [at] solidblogger [dot] com as an attachment.
Thanks so much for this!!
I have done all of this over and over and I still can’t get it to work. Can you help me? I have giveaways that I need to find the winners by number..pls help!
I too cannot get it to work if you could please help I miss my numbers
Just followed all the step and no numbers are showing…..I re- did it a couple of time…..am I missing something??
Never mind works wonderfully!!
Hello friend! I have a different code in my HTML than what you have above so I have no idea where to put the highlighted codes. Would you mind helping me as I also need my comments numbered for giveaway purposes. Please email me at the address provided and I’ll show you the HTML! Thanks!!!
I, like Joy have a different html code and am having trouble. If there is any way you could help me that would be great. I am sending you an email. Thanks:) LissaL
Hi! I am trying to add the numbers to my friends blog. It worked fine on mine, but when I add the CSS codes it shows it at the top of her blog and doesn’t show any numbers in the comments section. Could you please email me and let me know what might be wrong?
One of the main feature of using third party comment system is Reply option to comments which blogger lack.
I recently saw this tutorial on How to add reply option to blogger comments and thought to share with you