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 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-->
<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:
</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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq0i_4rDpYVembzjj5j5JwZytFaFPnbhpE-8FAcE2F9_YDmGHp4ktos45P_lRnUA14Y5cORCsfNInLdCuj1iJUoaxMh-qc7KX74Fcg2G9JMAnLQZrC9rOLffUVg3VK0baK_qfmqKHyg3D4/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 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.
0 comments:
Post a Comment