Add Bubble numbered count for blogger comments / blogspot comments
Lets quickly get into the process on how to add numberd comments in the blogger / blogspot simple tutorial
STEP 1)
Those who using Old Blogger interface:
Those who using New Blogger interface:
STEP 2) Now find (CTRL+F) this code in the template:
STEP 3) Immediately above/before that, paste this code:
<script type='text/javascript'>var CommentsCounter=0;</script>
STEP 4) Now find this code:
STEP 5) And immediately below/after it, paste this code:
Step 6) Find (CTRL+F) this code in the template:
Step 7) And immediately above/before it, paste this code:
Note:
Here are few images which may you like to use in this tutorial:
















STEP 8) Finally save the template... voila you can see the magic in comments
Lets quickly get into the process on how to add numberd comments in the blogger / blogspot simple tutorial

STEP 1)
Those who using Old Blogger interface:
- Go to Dashboard > Design > Edit HTML > (check the check box)Expand Widget Template
Those who using New Blogger interface:
- Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)
STEP 2) Now find (CTRL+F) this code in the template:
<b:loop values='data:post.comments' var='comment'>
STEP 3) Immediately above/before that, paste this code:
<script type='text/javascript'>var CommentsCounter=0;</script>
STEP 4) Now find this code:
<data:commentPostedByMsg/>
STEP 5) And immediately below/after it, paste this code:
<!--comments-counter-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-counter-stops-->
Step 6) Find (CTRL+F) this code in the template:
</head>
Step 7) And immediately above/before it, paste this code:
<!-- comments-counter-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/AVvXsEimumBNDbdRB8tjvD0tzNDhImm-6pTRFPC-haKDil4_COQbwGKplL8QXqyGzsmyOWVLY4JJkUuKxw7ubBUZrkXgNjcUcX-vI6wF-v2oFA8QGJ1Syd9eDWNOcJpcAWhuFkFHaxCSsY52_ibG/s1600/blue+comment+bubble.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-counter-stops-http://gugly4u.blogspot.com-->
Note:
- Edit the above red code to your image you like
- Edit the above blue color code to change the color of number in comment
Here are few images which may you like to use in this tutorial:
















STEP 8) Finally save the template... voila you can see the magic in comments
0 comments:
Post a Comment