A lot of blogger tricks are given about
the numbered comments. I am giving you the very easy and cool blogger trick to
number the comments of your readers. By this cool widget, your readers can
mention or point the comment about which they are concerned or if they have previous
discussion to you or any other reader. This numbered bubbled comment system
will give your blog a completely professional look.
To work on “How to number comments in blogger/BlogSpot”, you have to use
previous blogger commenting system. For this purpose you first have to delete
the threaded comment system. For this follow this blogger tutorial "How to remove blogger threaded comments?"
How to add number
comments in blogger/BlogSpot?
|
STEP 1:
Click on Edit Template
Click inside the template code anywhere
Press ctrl+F, a search box will open
like this
STEP 2:
Now find the below given code (paste
the below given code in search box and hit enter to find it)
<b:loop values='data:post.comments' var='comment'>
Now after finding this code, paste the
below given code just above it
<script type='text/javascript'>var CommentsCounter=0;</script>
STEP 3:
Now find this code
<data:commentPostedByMsg/>
Now just after/below it, paste the
below given code
<!--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 4:
This is just the last step before customization.
Find this now
</head>
Just above </head> paste the below given
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/AVvXsEguFwAqKP-LU38eQufdueaoG_e1BKHxcYZDffqtPbptBSZ8USyP3Fwhqq9jfU5fIKhupm8rgeOg714AcU7sgRbQjIoNr_pqo2aLJWu1-a0JSmjaSQGbycmSz4oP27LzMrVgUdiCkiIK1g2_/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://operaorbis.blogspot.com-->
Customization
|
- 1- To change the color of number, change the Yellow text with hex code (get the hex code from Color Code Generator)
- 2- To change the bubble of comment, change the URL in Pink with your desired image URL.
- 3- To change the image width and height, replace the values in Green. I will suggest don’t change it the numbers might float outside the bubble.
After customization, click on Save.
That’s it. Congratulations!
You have done all. Happy blogging!
|
Comment Bubbles
|
To change the comment bubble and to use
the any one of below given comment bubble, just right click on the image and
copy “image location/address”
Admin Words
|
In this blogger tutorial, I tried my level best to give you the easiest way of “How to add number comments in blogger/BlogSpot”. If you like this tutorial please shares this to your friends and keeps in touch.
Hey just wanted to give you a brief heads up and let you
ReplyDeleteknow a few of the images aren't loading correctly. I'm not sure why but I think
its a linking issue. I've tried it in two different web
browsers and both show the same results.
Have a look at my web site ... long tail pro tutorials
Just desire to say your article is as surprising.
ReplyDeleteThe clarity in your submit is simply spectacular and that i can assume you are
an expert in this subject. Fine together with your permission let me to clutch your feed to
stay updated with drawing close post. Thanks 1,000,000 and
please carry on the gratifying work.
Feel free to visit my web site; best flea treatment for pugs