Note: This works with the previous blogger commenting system, so if you want to add this hack, you should remove first the Blogger threaded comments. Learn here How to remove Blogger threaded comments
UPDATE! Now you can add comment bubble in your threaded comments too. Read this tutorial:
How to Add Numbered Comments In Threaded Comments
How to add numbered comments on our Blogger/Blogspot blog
Step 1. Go to Dashboard - Template - Edit HTML (click on Proceed button, if needed)
Step 2. Select "Expand Widget Template" (make a backup)
Step 3. Now find (CTRL+F) the following code in your template:
<b:loop values='data:post.comments' var='comment'>
Step 4. Immediately above/before it, paste this code:
<script type='text/javascript'>var CommentsCounter=0;</script>
Step 5. Find this code:
<data:commentPostedByMsg/>
Step 6. And immediately below/after it, copy and paste this:
<!--comments-count-starts-->
<span class='comments-number'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
<!--comments-count-stops-->
Step 7. Find (CTRL+F) this tag in the template:
</head>
Step 8. Paste this code just above/before it:
<!-- comments-count-starts-->
<style type="text/css">
.comments-number a:link, .comments-number a:visited {
color: black !important;
text-decoration: none !important;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAivPp1I8mg-8Dhl_G1JAkqebZqYqjASZ6f5pwNbCgl5TkR0CCuyEex2DK5juwST-OHNsHFg_EAgYHhaqIkBLkcBpINJ70QZ44r4aKd8VBCdcKmbodtrUdca7OGnKQW4e5VoiNU2O4FpVs/s1600/comment+bubble+1.png) no-repeat;
width: 50px; /*image-width size*/
height: 48px; /*image-height size*/
float: right;
display: block;
margin-right: 5px;
margin-top: -15px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
}
.comments-number a:hover, .comments-number a:active {
color: #1BA0E1 !important;
text-decoration: none !important;
}
</style>
<!-- comments-count-stops-http://helplogger.blogspot.com-->
Note:
- To change the comment bubble, replace the red text from above with your own address
- To change the color of the numbers, replace the blue text with the hex value of your color
Comment Bubbles
To choose a comment bubble, right-click on the image and select "Copy Image Address/Location":
IMPORTANT: You could use any image instead of the one linked in the code above (STEP 8) but after that, you should modify the size values (width and height), so that the numbers inside the bubble to be correctly adjusted.
Step 9. Save the template... and enjoy your comments :]
You might also be interested in this tutorial from the same category:
How to Add a Comment Bubble to Blogger Post Titles.
