How to add Serial Number on Blogger Comments list

index Number on Blogger Comments list

0
data:blog.title
number on comments

Google Blog has changed their interface by improving different parts but except their commenting system. You would see that your blog comment cannot be modified by using javaScript. Google seems to me little strict about this. But by using CSS code we can modify to add features and give them a new shape. Earlier I have released many tutorials about changing comment form, adding message above comment box. So now I am going to share a trick to add serial number on Blogger comment list. I have used simple CSS code and designed 2 style rounded rectangle and circle. This trick will add some extra spice on your blog commenting system. Please follow the simple steps to add this on your blog.


Add rounded rectangle style Serial number on Blogger Comments list

Rounded rectangle style is very standard. Currently many blogger designing their widget by sung this style. You can use this style to add extra spice on your blog comment section.

rectangle style comment number


Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML-> Unfold code  

Step 3 Now Find this code ]]></b:skin> by pressing Ctrl + F

Step 4 Copy the code from below and Paste it  Before/above ]]></b:skin>


/**Trick by www.bloggerspice.com**/
.comments {
  counter-reset:number;
}
.comments .comment {
  position:relative;
  counter-increment:number;
}
.comments .comment-content {
  margin-right:50px !important;
}
.comments .comment:after {
  content:counter(number);
  display:block;
  width:40px;
  height:40px;
  text-align:center;
  font:italic normal 20px/40px Times,Serif;
  color:#ccc;
  position:absolute;
  top:10px;
  right:10px;
  -webkit-border-radius:30%;
  -moz-border-radius:30%;
  border-radius:30%;
  border:3px solid #3c3c3c;
  background-color:#0066B3;
  -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
  -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
}
.comments .comment .comment-thread.inline-thread {
  counter-reset:number;
}
 .comments .comment .comment-thread.inline-thread .comment:after {
  font-size:18px;
  line-height:30px;
  width:30px;
  height:30px;
}
.comments .comment:hover:after {
  background-color:#04BDFA;
  border-color:#333333;
  color:#FFFFFF;
}


Add circle style Serial number on Blogger Comments list

Circle style also looking good and eye-catching. Hope you would like this style too.

Circle style comment number


Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML-> Unfold code  

Step 3 Now Find this code ]]></b:skin> by pressing Ctrl + F

Step 4 Copy the code from below and Paste it  Before/above ]]></b:skin>


/**Trick by www.bloggerspice.com**/
.comments {
  counter-reset:number;
}
.comments .comment {
  position:relative;
  counter-increment:number;
}
.comments .comment-content {
  margin-right:50px !important;
}
.comments .comment:after {
  content:counter(number);
  display:block;
  width:40px;
  height:40px;
  text-align:center;
  font:italic normal 20px/40px Times,Serif;
  color:#ccc;
  position:absolute;
  top:10px;
  right:10px;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  border:3px solid #3c3c3c;
  background-color:#0066B3;
  -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
  -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
}
.comments .comment .comment-thread.inline-thread {
  counter-reset:number;
}
.comments .comment .comment-thread.inline-thread .comment:after {
  font-size:18px;
  line-height:30px;
  width:30px;
  height:30px;
}
.comments .comment:hover:after {
  background-color:#04BDFA;
  border-color:#333333;
  color:#FFFFFF;
}

Customization

  • Change 3c3c3c and 0066B3 for background and border color
  • Change 04BDFA and 333333 for background and border color of hover effect.


You can use our color picker to get wide range of color code.

If you face trouble to install this then fell free to contact with me. I will response you as soon as possible. Happy Blogging!!!
How to add Serial Number on Blogger Comments list
4 Stars stars - "How to add Serial Number on Blogger Comments list" Google Blog has changed their interface by improving different parts but except their commenti...
Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *