Blogger Tips
This cool Blogger trick will help you to add comment count inside a speech bubble, so that you & your readers can use the numbers to mention or point to a particular comment on any of your posts. Besides this, numbering your comments might help you to improve the look and feel of your blog.
Note: This works with the previous blogger commenting system, so if you want to apply this trick, first you need to remove the Blogger threaded comments. See here How to remove Blogger threaded comments
UPDATE! Now you can have a comment bubble in your threaded comments also! For more info, please read this tutorial: How to Add Numbered Comments In Threaded Comments
Step 1. From your Blogger Dashboard, go to Template and click on the Edit HTML button:
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box:
Step 3. Type or paste the following code inside the search box and hit Enter to find it:
Note:
Comment Bubbles
To choose a comment bubble, right-click on the image and select "Copy Image Address/Location":
IMPORTANT: You can use any image instead of the one linked in the code above (STEP 8) but after you need to change the size values (width and height), so that the numbers inside the bubble won't float outside of it.
Step 9. Save the template and enjoy your comments :]
Related tutorial: Add a Comment Bubble to Blogger Post Titles
- Show/hide Blogger And Google+ Comments System With Toggle
Many Blogger site owners received the new Google+ Comment System pretty negatively because it forced all commenting users to create their own Google+ account before they were able to write a comment. The Google+ Comment System on Blogger was convenient...
- Add A Cool Style To Blogger Threaded/nested Comments
If you need a fresh style to the threaded comments of a standard Blogger template, here's a simple CSS that will help you to apply a different background, make your avatars rounded, add a border with rounded corners and a triangle which is actually...
- How To Customize Blogger Comments By Adding A Background Color And Border
The comments are an essential part of any blog as in them readers express their opinions about a post or a blog, thus it is important to spend a little of our time to make this part looking more stylish, accessible and neat. To put our comments in order,...
- How To Add A Comment Count Bubble To Blogger Post Titles
A comment bubble (or speech balloon) with the current number of comments displayed on each blogger post titles might be an excellent addition if you want to make your blog more attractive and engaging. Having a comment bubble icon could help you not only...
- Add A Comments Counter Button To Blogger Blogspot
In this Blogger tutorial (Blogspot tutorial) you will learn how to add a comments counter button to Blogger (Blogspot) to show off the number of comments each of your posts has received. A comment counter button (bubble) will have the effect of encouraging...
Blogger Tips
How to number comments in Blogger/BlogSpot
This cool Blogger trick will help you to add comment count inside a speech bubble, so that you & your readers can use the numbers to mention or point to a particular comment on any of your posts. Besides this, numbering your comments might help you to improve the look and feel of your blog.
Note: This works with the previous blogger commenting system, so if you want to apply this trick, first you need to remove the Blogger threaded comments. See here How to remove Blogger threaded comments
UPDATE! Now you can have a comment bubble in your threaded comments also! For more info, please read this tutorial: How to Add Numbered Comments In Threaded Comments
How to add numbered comments on our Blogger/Blogspot blog
Step 1. From your Blogger Dashboard, go to Template and click on the Edit HTML button:
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box:
Step 3. Type or paste the following code inside the search box and hit Enter to find it:
<b:loop values='data:post.comments' var='comment'>Step 4. Just above it, paste this code:
<script type='text/javascript'>var CommentsCounter=0;</script>Step 5. The, find this code:
<data:commentPostedByMsg/>Step 6. And just below/after it, copy and paste this:
<!--comments-count-starts-->Step 7. Find (CTRL+F) this tag:
<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-->
</head>Step 8. Just above the </head> tag, paste this code:
<!-- comments-count-starts-->
<style type="text/css">
.comments-number a:link, .comments-number a:visited {
color: black !important;
text-decoration: none !important;
background: url(blogger-tips/blogger-tips-57642f41ba07b.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 text in red from above with your address
- To change the color of the numbers, replace the text in blue with the hex value of your color. This tool can help you to pick up any color that you may need: Color code generator
Comment Bubbles
To choose a comment bubble, right-click on the image and select "Copy Image Address/Location":
IMPORTANT: You can use any image instead of the one linked in the code above (STEP 8) but after you need to change the size values (width and height), so that the numbers inside the bubble won't float outside of it.
Step 9. Save the template and enjoy your comments :]
Related tutorial: Add a Comment Bubble to Blogger Post Titles
- Show/hide Blogger And Google+ Comments System With Toggle
Many Blogger site owners received the new Google+ Comment System pretty negatively because it forced all commenting users to create their own Google+ account before they were able to write a comment. The Google+ Comment System on Blogger was convenient...
- Add A Cool Style To Blogger Threaded/nested Comments
If you need a fresh style to the threaded comments of a standard Blogger template, here's a simple CSS that will help you to apply a different background, make your avatars rounded, add a border with rounded corners and a triangle which is actually...
- How To Customize Blogger Comments By Adding A Background Color And Border
The comments are an essential part of any blog as in them readers express their opinions about a post or a blog, thus it is important to spend a little of our time to make this part looking more stylish, accessible and neat. To put our comments in order,...
- How To Add A Comment Count Bubble To Blogger Post Titles
A comment bubble (or speech balloon) with the current number of comments displayed on each blogger post titles might be an excellent addition if you want to make your blog more attractive and engaging. Having a comment bubble icon could help you not only...
- Add A Comments Counter Button To Blogger Blogspot
In this Blogger tutorial (Blogspot tutorial) you will learn how to add a comments counter button to Blogger (Blogspot) to show off the number of comments each of your posts has received. A comment counter button (bubble) will have the effect of encouraging...