Auto Numbering For Blogger Threaded Comments.

5/23/2013 , 6 Comments

Today'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. 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.



Install It Into Blogger

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 BAXE -----*/
.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 DoNe.

Mack See

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard.

6 comments:

Subscribe to: Post Comments (Atom)