After waiting several times we got threaded comment system for blogger just like wordpress ,but still we all know blogger comment system is not so advance like
wordpress,so it may distract your visitor from commenting on your blog.You may gonna loose traffic for that as well.So,we
need a little customization to make it attractive.Do something new,something great to make it attractive.So we decided to make it
attractive by putting an attaractive comment number system.If you wanna saw a Demo then take a look on the below screenshot.
We guess you're going to like it.So,here am going to tell you how to do that.
Add Comment Counter on Blogger
- 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>
Hope you liked it and wish to make a try on your blog.If you
face any kind of problem don’t be shy to ask using the comment box below.Thank
you.
|
|
Articles You May Like |
About The Author
I think this would make commenting a lot better and would also look better.
ReplyDeleteCool... i think I need to try this :)
ReplyDeleteyup,you should give it a try :)
DeleteI'll try this one soon. It looks so cool! :D
ReplyDeletevery nice!! i have put a counter as well to my blog like this since i wanted to be updated with my comments in each of my post great idea! xx
ReplyDeleteYeah, I really do find Blogger's commenting feature difficult. For one, it doesn't work on my chrome browser. Have to open blogger blogs on Firefox to make it work :(
ReplyDeleteWow, that trick seems neat! :) I'd like to try that too!
ReplyDeletevery useful this one indeed. Masubukan ko nga to sa site ko :)
ReplyDeleteThanks for your sharing, I love this tip. I will apply it for my blogger blog! :)
ReplyDelete