Plugin for Automatic Numbering in Blogger Threaded Comments

In this tutorial i am gonna tell you about automatic numbering for blogger as show in the image. so lets forwared to the article.

DEMO

How it works???

Like any of the ordered list, BlogSpot blogs uses the <ol> tag  for displaying comments in hierarchal order. Each comment holds a separate <li> tag. The counter-reset Property sets the value to zero as soon as the loop ends and counter-increment property increases the value by one unit depending on the number of li tags used inside the parent loop. Well enough of theory, now its time to implement this effect on your blogs!

Note: This tutorial can also be applied to Wordpress blogs. you just need too change the name of CSS classes to that used by twenty12 theme used by WP engine.

Lets Count Comments in the Blogger!!!

For this tutorial to work you must be using  the threaded comments in your blogger templates. If you have not yet switched to that then please do so by reading the following tutorial

1. Go to blogger > template
2. Backup yours template
3. Click Edit HTML
4. Search for </b:skin>.  Click the black arrow to expand the code.

    5.  Paste the following Styles just above </b:skin>

/*----- Comment Counter by MBT -----*/.comment-thread ol {counter-reset: mbt-comments;}.comment-thread li:before {content:counter(mbt-comments);counter-increment: mbt-comments;font-size: 30px;float:left;position:relative;top:0px;left:-10px;margin-right:0px;height:100px;margin-right:0px;font-weight:bold;font-family:arial, georgia;color: #666;}.comment-thread ol ol {counter-reset: mbt-comments-sub;}.comment-thread li li:before {content: counter(mbt-comments) "." counter(mbt-comments-sub,lower-latin);counter-increment:mbt-comments-sub;font-size: 12px;color: #666;position:relative;top:10px;}
.comments .comments-content .comment-header, .comments .comments-content .comment-content {  margin:0px 0px 8px 28px!important;} 

Customization:

• You can adjust the font size and color of the comment counts for Main section using the yellow highlighted regions
• To edit the font size and color of sub sections (nested replies) change orangehighlighted regions
• lower-latin: Nested replies for first comment are counted in this order 1.a,  1.b,  1.c ... If you wish to display them in roman like 1.I, 1.II, 1.III, 1.IV... then replace lower-latin with Upper-roman,  if you wish to display them as integers then change it to decimal. Following are some other styles you can use for nested replies: lower-greek, circle, square, disc, lower-roman

       6.   Save your template and you are all done!

Visit your blog to see it working just fine! :)

Need any help feel free to contact us !!!