Add Comment Counter on Blogger Threaded Comment

We all know blogger comment system is not so advance like wordpress,so it may distract your visitor from commenting on your blog.So,we need a little customization to make it attractive.So we decided to make it attractive by putting a attaractive comment number system.If you wanna saw a Demo then take a look on the below screenshot.

You may also like it too.So,here am going to tell you how to do that.

How to Do This?

Go to blogger dashborad >> select a blog>> click template >>edit HTML >> proceed >> expand widget template
Search for “]]></b:skin>” and above it paste the below code

.comments-number {
position: absolute;
top: 55px;
left: -48px;
border-radius: 3px;
background: #D80556;
width: 20px;
height: 20px;
width: 30px;
font-size: 15px;
line-height: 1em;
color: white;
text-align: center;
}
.comment-thread ol {
counter-reset: countcomments;
}
.comment-thread li:before {
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: Centre;
color: #555555;
padding-left:10px;
padding-top:3px;
position:relative;top:40px;Right:63px;border-

radius:3px;background:#D80556;height:20px;width:20px;font-size:15px;line-

height:1em;color:#fff;text-align:center
margin-top:7px;
margin-left:10px;
}
.comment-thread ol ol {
counter-reset: contrebasse;
}
.comment-thread li li:before {
content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
counter-increment: contrebasse;
float: Centre;
font-size: 15px;
}
color: #fff;}

Then search for

(function() { var items = <data:post.commentJso/>;

and replace it with

var items_copy=[]; (function() { var items = <data:post.commentJso/>; items_copy=items;

Then search for

<data:post.commentHtml/>

Below it paste the following code

<script type='text/javascript'> //<![CDATA[ for(i=0;i<items_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);b=a.innerHTML+'<span class="comments-number">'+(i+1)+'</span>';a.innerHTML=b} //]]> </script>