Adding Comment serial number generally simple trick but adding serial number below commentator avatar is rare. Comment serial number is use for counting the comment. This is just for quick look to get the information about the number of comment. I have already share with you to add comment number top right site of the comment box but adding comment number below commentator avatar is new. In this tutorial I have used pure CSS code which doesn't affect loading time. This widget has designed template original code hacking.
When any visitor make a comment then automatically it will display comment serial number below commentator avatar.
I have simple figure out the position of the comment avatar and but using this trick It would able to display serial.
Step 1 Log in to your Blogger account and Go to your Blogger Dashboard
Step 2 Click on Now click on -> Template -> Edit HTML-> Unfold code ?
Step 3 Now Find this code ]]></b:skin> by pressing Ctrl+F
Step 4 Copy the code from below and Paste it Before/above ]]></b:skin>
.comments-number{position:absolute;top:55px;left:-44px;border-radius:10px;background:#005C91;width:20px;height:20px;font-size:10px;line-height:2em;color:#fff;text-align:center}
.comments .comment-thread.inline-thread .comments-number{top:44px;left:-38px}
Customization
- Change #005C91 with other color code. You can get color code from BS Color Picker.
Step 5 Now Find this code like below
(function() {
var items = <data:post.commentJso/>;
Step 6 Now replace the above code by below code
var items_copy=[];
(function() {
var items = <data:post.commentJso/>;
items_copy=items;
Step 7 Now Find this code like below
<data:post.commentHtml/>
Step 8 Now paste the below code just after above 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>
Step 9 Now simply hit the save button.
Hope you have done. If all the steps followed properly then you would see the serial number below commentator avatar. It will also display serial number below all of your previous commentator avatar.
Hope you have done. If all the steps followed properly then you would see the serial number below commentator avatar. It will also display serial number below all of your previous commentator avatar.
EmoticonEmoticon