CSS Comment Serial number below Commentators Avatar

CSS Comment Serial number below Commentators Avatar

Comments: 0
data:blog.title
comment numbering

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.

Speak Your Mind

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *