Skip to main content

Auto Number Threaded Comments in Blogger

Today we'll be seeing how to add comments counter to the threaded comments in blogger. I'm not wasting my time explaining about blogger comments system and threaded comments. I guess you know it and you don't want me to explain.


We'll be using the code shared by Mohammad Mustafa Ahmedzai on his blog. And he has used a non-JavaScript approach to show threaded comments in blogger.

And by the way i hope you've switched to threaded comments in blogger. If you haven't please do.

VIEW A DEMO

Adding Automatic Numbering Threaded Comments

  1. First of all navigate to blogger dashboard > template and click on Edit HTML
    don't forget to backup your template
  2. Now search for </b:skin> and paste the following code just above it. And save the changes.
/*----- Comment Counter -----*/
.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;} 

Customize it for you

✔change the values highlighted in green to customize the font size and colour in main comments counter
✔ change the values highlighted in blue to customize the font size and colour in reply comments counter

I've kept the tutorial to simple and short, so if you've and queries do leave back comments. Thanks.
Read the original article @ Mybloggertricks

Labels:

Comments

Post a Comment

Popular posts from this blog

Automatic Read More With Thumbnails for Blogger

Blogger gives us an option to add jump break to posts. It enables us to display a a short summary of the post on the homepage of our blog with a link to the full post. Most of us add jump break to our posts, because displaying a short summary instead of the full post on the main page has many advantages. The main reason is that it increases page views and the visitors can easily get a selection of your posts.
Post a Comment
Read more

Responsive Recent Posts Slider Widget for Blogger

Here is one amazing responsive featured post slider for your blogs. This slider is Here i am with a fully automated featured posts slider for blogger blogs. This widget features a complete responsive design and is coded to fetch the most recent posts automatically from your blog. Yes i said fully automated, you only need to add your blog url in the code.
3 comments
Read more

Recent Comments Widget for Blogger Blogs using simple JavaScript and Feeds

Recent comments widget show the feed of latest comments on your blog in your sidebar. It helps you to boost the engagement of your readers in your blog and also shows the new readers what’s happening on your blog. We have many ways to add one to your blogger blog. And today i’ll share with you two simple methods of adding one to your blog.
Post a Comment
Read more