Another Amazing trick for bloggers that is highly recommended for them.This trick is about How you can add numbered comments count that will show inside a speech bubble in your Blogpost page.
With this Trick You or Your readers can easily count how many Total number of Comments were found on Blogger Post page.By Adding the Comments count in your Blogger will help you to improving your Blog value and Importance.
How to Add Numbered Comments on your Blogger
Step 1: Go to your Blogger Dashboard ,then go to your Blogger "Template" and hit on "Edit HTML" button.
Step 2: In Blogger Template HTML ,Press (CTRL+F) for opening the Search Box.
Step 3:Then Type this Following Code for searching it inside your Blogger template.
Code:
<b:loop values='data:post.comments' var='comment'>
Step 4:Once you will Find it , Now copy and paste this code just Above it.
Code:
<script type='text/javascript'>var CommentsCounter=0;</script>Step 5: Now again go to the blogger Template Search for this Code.
<data:commentPostedByMsg/>Step 6:When you will find this above Code inside your Blogger template , Then paste this Code just right after it.
<!--comments-count-starts-->Step 7:Again search for this HTML Tag inside your Blogger template.
<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: Now just Above this HTML tag "</head>" ,paste this code.
<!-- comments-count-starts-->Step 9:If you want to change the Color of your Comments then replace the Red Highlighted Text with your required color HEX VALUE and paste it their.
<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/AVvXsEgjH4AhhgW6_yRZX0pBr7uFZQ5eM5-r5DXsLjMXJHpaAFJGrNAx7bX24SxsXTcfknN81ryEOTib9nw-MRrMGXgsP7DBTxu0rBFkWLM0-ySPY8kiFsxpkqiZZbQp9oMfDE4ydyo1LMahDKRL/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://mytrickspedia.blogspot.com-->
And if you want to change the Comment Bubble , then simply replace the Blue Highlighted Text link with new comment bubble link.There are a number of comment bubbles that you can easily find on Google.
After completing all the Steps , Now Save your blogger Template and Enjoy !!
0 comments:
Post a Comment