How to add Serial Number on Blogger Comments list

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.

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.

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!!!