A few weeks back we published a post with An Elegant New Comment Theme For Blogger Blogs called Blue Ice.One of the neat features of that comment theme was the comments were numbered with counter increment.If the full theme was not to your liking but you want to number comments this tutorial is for you.
The counter increment works very well with comment replies by numbering those comments as siblings to the original comment.As seen in the image below the replies to the first comment are numbered 1.1, 1.2 etc..Other comments are then numbered naturally, you can see the comment from the screenshot as a live demo here.
We do this with a simple piece of CSS that;s really easy to add to your blog so lets do it.
Add The Code
Step 1. – In Your (New Design) BloggerDashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css, as shown in the video below.
Step 2. Copy and Paste the following code into the Css Section then click Apply To Blog.
/**Numbered Comments By http://www.spiceupyourblog.com **/
.comments ol {
counter-reset: trackit;
}
.comments ol li {
counter-increment: trackit;
}
.comments ol li:before {
content: counters(trackit, ".");
font-size: 3.5rem;
color: rgba(0, 0, 0, 0.16);
right: 0.3em;
position: absolute;
padding: .2em 0 0 0;
text-shadow:1px 1px 1px white
}
.comment .comment-content{max-width:85%;}
/**Numbered Comments By http://www.spiceupyourblog.com **/
That’s all check out your numbered comments.Drop your comments and questions below.
Author – Paul Crowe is the owner and main author of Spice Up Your Blog.Paul lives in Ireland, has been blogging since 2006 and writing Spice Up Your Blog since 2009.You can find him in the usual social networks.
How To Change The Comment Font Face And Color On Blogger
How Receiving Comments Helps Your Blog Rank Higher On Google
Add CSS Auto Zoom Effect To Post Images On Blogger
How To Number Comments On Blogger With CSS
A few weeks back we published a post with An Elegant New Comment Theme For Blogger Blogs called Blue Ice.One of the neat features of that comment theme was the comments were numbered with counter increment.If the full theme was not to your liking but you want to number comments this tutorial is for you.
The counter increment works very well with comment replies by numbering those comments as siblings to the original comment.As seen in the image below the replies to the first comment are numbered 1.1, 1.2 etc..Other comments are then numbered naturally, you can see the comment from the screenshot as a live demo here.
We do this with a simple piece of CSS that;s really easy to add to your blog so lets do it.
Add The Code
Step 1. – In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css, as shown in the video below.
Step 2. Copy and Paste the following code into the Css Section then click Apply To Blog.
That’s all check out your numbered comments.Drop your comments and questions below.
How To Show Post Titles Only On Your Blogs Homepage
Author – Paul Crowe is the owner and main author of Spice Up Your Blog.Paul lives in Ireland, has been blogging since 2006 and writing Spice Up Your Blog since 2009.You can find him in the usual social networks.
What My Robot Recommends: