HackingUniversity - Hacks . Tricks . How-To's

23 August 2013

Numbering Comments in Blogger using Simple CSS

numbering-comments-bloggerBlogger has provided us with every possible medium to show our presence online, we can build a free blog, write unlimited posts, pass comments, make money and everything, well it has even provided is a free and simple way to customize out blog on the go according to my wish, but still blogger lacks with few designing things like customizing the default commenting system but still people and designers have come up with easy options to customize it and today we will be showing you how you can add number in your comment stream, so it can show how many comments are there and which comment are you reading, so its just for personal use nothing attached to it. But still people might want to add it to their blog so here you go.

  1. Open Blogger > Template > Edit HTML.
  2. Press Ctrl + F & search for ]]></b:skin> tag & paste below code above it.

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

  3. That's it now this above code provides you the round shaped commenting numbers design, well if you have some CSS skills then you can manipulate it accordingly.

Have fun designing and customizing your commenting system, we will be providing you more blogger tutorials and tuts till then do subscribe to out blog :)