Nov 16, 2015

How To Add Numbering System to Threaded Comments in Blogger

data:blog.title
Today's tutorial will take blogger comment system one step more closer to WordPress commenting system. What are you thinking guys? Hope you understand what we are going to share today with all of you. If you don't understand then we tell you, Today I am going to share a very simple CSS trick which will add numbers to your threaded comments inside a comment bubble. It will add numbers like this way 1, 1.a, 1.b & 2 here 1, 2 are the main comments and 1.a, 1.b are the replies. Beside This, Numbering system in your blogger comments might help you to improve to look and feel of your blog. You can see a screenshot below in image.

Working Strategy Of This Trick.

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!

How To Add Numbered To Comments in Blogger

How to Add Numbers To Blogger Threaded Comments

  • The first thing you need to do is to login into your blogger dashboard.
  • Now it's up to you on which blog you would like to add numbers to your comments.
  • After selecting the blog to customize, go to Template >> Edit HTML and search for the ]]></b:skin> Tag.
  • After selecting the blog to customize, go to Template >> Edit HTML and search for the ]]></b:skin> Tag.
.comment-thread ol {    counter-reset: countcomments;}
.comment-thread li:before {    content: counter(countcomments,decimal);    counter-increment: countcomments;    float: right;    font-size: 22px;    color: #555555;    padding-left: 10px;    padding-top: 3px;    background: url(http://3.bp.blogspot.com/-f6ByQfbwApQ/T4x_8p1FGpI/AAAAAAAAB2A/WJKf-ybmvQk/s1600/comment+bubble2.png) no-repeat;    margin-top: 7px;    margin-left: 10px;    width: 50px; /*image-width size*/    height: 48px; /*image-height size*/}
.comment-thread ol ol {    counter-reset: contrebasse;}
.comment-thread li li:before {    content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);    counter-increment: contrebasse;    float: right;    font-size: 18px;    color: #666666;}
  •  Once everything is done, press the “Save Template” button to finish the whole process.

Possible Customizations:

  • You can change Bubble Image Width 50px;
  • You can change Bubble Image Height 48px;
You can change Bubble counter image from below list. Right click on any bubble, select Copy Image URL and replace it with above Comment Bubble URL.


how to blog    blogger blogspot    blogspot blogger, how to blog    widget blogger blogspot    blogs, how to blog     blogspot or blogger, how to blog    tutorials, how to    comments, how to, blogspot blogger    new comment, how to blog    blog design, blogger blogger.com comments bubble  comment counting bubble for blogger  blogger comment counting bubble    Blogger comments counting bubble    numbering comment bubble for blogger    comments numbering bubble for blogger   bubble comment count, bubble blogger posts   blogger comments, comment count, numer for blogger comments, add numbering system to blogger threaded comments    blogger blogspot, blogger comments, numer for blogger comments, add numbering system to blogger threaded comments   blogger bubble comment count   comments in blogger titles    blogger tips, blogger tricks   blogger widgets, bubble comment count    bubble comment count    Bubble Comment Count    Bubble Comment Count, blogger blogspot                how to add numbering comments bubble images to blogger blog    add numbering comments bubble images to blogger blog    add numbering comments bubble images to blogger    numbering comments bubble images for blogger    Add numbering system to threaded comments in blogger

Important : You can use any image instead of the one linked in the code above but after you need to change the size values (width 50px; and height 48px;), so that the numbers inside the bubble won't float outside of it.

Our Recommended Blogger Widgets

  1. WordPress Like Floating Social Sharing Widget for Blogger with Counter.
  2. AllInOne Admin Box Widget with Social buttons and Subscription Box.
  3. Add Sticky Notification Bar To Blogger with Show/Hide Button.
  4. Stylish Contact Form For Blogger! Add to Static Page, Responsive & Pro Version.
  5. Cute & Stylish Email Popup Subscription Widget.

Conclusion:

So above guide is about How To Add Numbering System to Threaded Comments in Blogger? We hope you enjoyed this post. If you are facing any kind of problem then feel free to ask us by dropping a comment below. Don't forget to share it with your friends.

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.