CSS Comment Serial number below Commentators Avatar

CSS Comment Serial number below Commentators Avatar

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.
CSS Comment Serial number below Commentators Avatar
4 Stars stars - "CSS Comment Serial number below Commentators Avatar " Adding Comment serial number generally simple trick but adding serial number below commentator...

Post a Comment

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

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 *