--> Automatic Numbering for Blogger Threaded Comments | Experience Lab - Online business creation and development guide for bloggers and startups

Automatic Numbering for Blogger Threaded Comments

Today's tutorial will take blogger comment system one step more closer to wordpress commenting engine. I was amazed today when I discove...

Numbering blogger threaded commentsToday's tutorial will take blogger comment system one step more closer to wordpress commenting engine. I was amazed today when I discovered that W3 has already introduced an excellent way of automatically numbering lists in a HTML structure using pure CSS3 properties like counter-reset and counter-increment. Both these functionality provide a non-JavaScript approach to show comment counts for threaded and nested comments in blogger. MBT has contributed a lot in changing Blogger's Comment-body Styles for the past three years and this time we are introducing an interesting trick to add more spice to your blog comments. We are using a non-JavaScript approach unlike Wordpress's popular plugin called Greg's threaded Numbering

 

DEMO

 

How it works?

Like any 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 to change the name of CSS classes to that used by twenty12 theme used by WP engine.

Lets Count Comments in Blogger!

For this tutorial to work you must be using 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 your template
  3. Click Edit HTML
  4. Search for </b:skin>.  Click the black arrow to expand the code.

compressed blogger stylesheet

    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 comment counts for Main section using the yellow highlighted regions
  • To edit the font size and color of sub sections (nested replies) change orange highlighted 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! :)

Must Read:

Following are some posts that you would surely like to read:

Need Help?

I just hope this new addition to blogger tricks brings a delightful change to all of you who have been looking for a way to count comments in threaded list. I would really appreciate hearing form you all. Take good care of yourselves buddies. Peace and blessings be upon you all! :)

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,4,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,3,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Automatic Numbering for Blogger Threaded Comments
Automatic Numbering for Blogger Threaded Comments
http://lh6.ggpht.com/-ctpkYfCmAfc/UZ0b-5fFIOI/AAAAAAAAJuY/8CSCsK7EFrA/image%25255B7%25255D.png?imgmax=800
http://lh6.ggpht.com/-ctpkYfCmAfc/UZ0b-5fFIOI/AAAAAAAAJuY/8CSCsK7EFrA/s72-c/image%25255B7%25255D.png?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2013/05/automatic-numbering-for-blogger.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2013/05/automatic-numbering-for-blogger.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy