How to add Serial Number on Blogger Comments list

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 1Log in to your Bloggeraccountand Go to yourBloggerDashboard Step 2Click on Now click on-Template-Edit HTML- Unfoldcode Step 3Now Find thiscode]]/b:skinby pressingCtrl+F Step 4Copy thecodefrom 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 1Log in to your Bloggeraccountand Go to yourBloggerDashboard Step 2Click on Now click on-Template-Edit HTML- Unfoldcode Step 3Now Find thiscode]]/b:skinby pressingCtrl+F Step 4Copy thecodefrom 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 Change3c3c3cand0066B3for background and border color Change04BDFAand333333for 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!!!