This cool Blogger trick will help you to add comment count inside a speech bubble, so that you & your compendiums can use the figures to mention or point to a particular comment on any of your posts. Besides this, numbering your commentary might help you to ameliorate the look and sense of your blog.
Note This works with the former blogger opining system, so if you want to apply this trick, first you need to remove the Blogger threaded commentary. See then How to remove Blogger threaded commentary
UPDATE! Now you can have a comment bubble in your threaded commentary also! For further word, please read this tutorial How to Add Numbered Commentary In Threaded Commentary.
1. Step one go to blogger dashboard and click on the themes with drop down menu, and then click on edit HTML.
2. Press anywhere inside the code area and then press CTRL + F to open the search box.
3. Type or pasted the following code into to search box and hit Enter to find it.
<b:loop values='data:post.comments' var='comment'>
4. Just above it, paste this code .
<script type='text/javascript'>var CommentsCounter=0;</script>
5. Step 5 Find this code by pressing CTRL + F to open the search box and paste this code inside the sear box.
<data:commentPostedByMsg/>
6. Step six! Just copy and paste this code and pasted it after/below it
<!--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-->
7. Step Seven Find this head by doing the same tips on the last number way in search box.
</head>
8. Step eight! Just above/before the </head> tag paste the following codes.
<!-- 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
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.
0 comments:
Post a Comment