5 Threaded Comment styles


Threaded comments are awesome but their default styling is just so simple. Modifying it is a very simple and only requires CSS. I am sharing 5 different styles for the comment sections which you can implement easily into your blog. The motivation for this post came from 54BLOGGER post about some nicely designed Comment sections. I tried to convert them so that they looked very similar to the originals.



Note: Before going any further make sure you have Threaded Comments enabled. Refer this article on how to enable them

Update: Blogger has added some code from behind and therefore all the comments avatars with circular images have a bit of problem. To solve it just add the following CSS:

.comments .avatar-image-container img {max-width: 40px !important;}

CSS-Tricks Comment Section Demo

Copy the following CSS Code into your Blog

.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: white;position: relative;border-radius: 0px 100px 120px;padding:5px;}
span.comment-actions, .continue {width:120px;background: #F1F1F1;border-radius: 20px 20px;text-align:center;font-weight:bold;text-decoration:none !important;}
span.comment-actions:hover, .continue:hover {background: #EBDDE2;text-decoration:none !important;}
.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .thread-toggle {background: #F3F3F3;border-radius: 20px;padding: 6px 12px 6px;font-weight: bold;}
.comments .thread-toggle:hover {background: #EBDDE2;}
.comments .comment-block {padding: 11px !important;margin-left: 48px;position: relative;left: 60px;background:#F1F1F1;border-radius: 10px;width: 400px;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:40px !important;background: #F1F1F1;padding: 5px;border-radius: 100px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {border-radius:20px;position:relative;height:40px;width:40px;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important;}
.comments .comments-content .comment-header {width: 450px;background:#F1F1F1;position: relative;left: -73px;}
.comments .comments-content .user {font-style: normal;font-weight: bold;position: relative;left: 80px;}
.comments .comments-content .datetime {position: absolute;left: 270px;}
.comment-thread ol div.continue {display:none !important;}

Line25 Comment Section Demo

Just copy the following CSS Code into your Blog

.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRQC7k2AC1JqOr4R_EGl6q2L4rWCdL10-08EJC07CrQ_7Bn6XbcrSZEaLs1M0t37kWm9gYazeLWSrrMZF2NxongBUExZsLuftH51Rv6xYEdkzuYJDK3UJQZ0DQjjTQh2-uafn7ub8Vrqg/s1600/comments-bg.png);position: relative;
border-radius: 0px 100px 120px;padding: 5px;}
span.comment-actions, .continue {width:120px;text-align:center;font-weight:bold;text-decoration:none !important;position:relative;left:460px;}

.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .comment-block {padding: 11px !important;margin-left: 40px;position: relative;background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk_IIXUslraPohvkh4ktt7Gi04N_2-TS21woSq3dBAKn6YxgHZRpxjJdGZxOeHQh8jg72-0G1OS1-RmpvCRaj-EOwk2FIU1d7I0hTONEgJrwCNWl99UEmUSdelKN-LHEx8MvKFBwUaCe4/s1600/light-grid.png);left: 5px;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:40px !important;background: #F1F1F1;padding: 5px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {position:relative;height:40px;width:40px;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important; z-index:999;}
.comments .comments-content .user {font-style: normal;font-weight: bold;position: relative;left: 80px;}
.comments .comments-content .datetime {position: absolute;left: 390px;font-family:arial;font-size:10px;}
.comment-thread ol div.continue {display:none !important;}
.comments .comments-content {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRQC7k2AC1JqOr4R_EGl6q2L4rWCdL10-08EJC07CrQ_7Bn6XbcrSZEaLs1M0t37kWm9gYazeLWSrrMZF2NxongBUExZsLuftH51Rv6xYEdkzuYJDK3UJQZ0DQjjTQh2-uafn7ub8Vrqg/s1600/comments-bg.png);}

Noupe Comment Section Demo

Just copy the following CSS Code into your Blog

.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: transparent;position: relative;
border-radius: 0px 100px 120px;padding: 5px;}
span.comment-actions, .continue {width:120px;text-align:center;font-weight:bold;text-decoration:none !important;position:relative;left:-69px;top:0px;}

.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .comment-block {padding: 11px !important;margin-left: 40px;position: relative;background: transparent ;left: 5px;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:41px !important;height:40px !important;background: silver;padding: 2px;border-radius:5px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {position:relative;width:42px !important;height:43px !important;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important; z-index:999;}
.comments .comments-content .user {font-style: normal;font-weight: bold;position: relative;font-size:20px;top:-15px;}
.comments .comments-content .datetime {position: relative;right: 0px;top:-15px;font-family:arial;font-size:15px;}
.comment-thread ol div.continue {display:none !important;}
.comments .comments-content {background:transparent;}

WebDesignerWall Comment Section Demo

Just copy the following CSS Code into your Blog

.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: white;position: relative;border-radius: 0px 100px 120px;padding:5px;}
span.comment-actions, .continue {width:120px;text-align:center;font-weight:bold;text-decoration:none !important;position:relative;left:-69px;top:10px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA74lYkuopXBfAnDlskP_YSkhsL2zWwxEGF7_wyrOsB7GkwLh9a2hilfiji_iL8JqjprvHFaJ2btzCw1cDG4pLqlS9PbDQQRTCoUpOIXMlNqphpF2j1LZZqmvwuw_Ibxqh3tZUlzl4MlQ/s1600/dashed-single.png) no-repeat 4.3em center;}
.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comment-actions:before {content:"\21AA";}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .thread-toggle {background: white;border-radius: 20px;padding: 6px 12px 6px;font-weight: bold;}
.comments .comment-block {padding: 11px !important;}
.comment-thread ol div.continue {display:none !important;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:40px !important;background: silver;padding: 2px;border-radius: 100px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {border-radius:20px;position:relative;height:43px !important;width:42px !important;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important;}
.comments .comments-content .datetime {position: relative;right: 5px;top: 5px;font-family: arial;font-size: 15px;}
.comments .comments-content .user {font-style: normal;font-weight: bold;position: relative;font-size:20px;top:-15px;}
.comment-actions.secondary-text {width:400px !important;}

SYB current Comment Section Demo

Just copy the following CSS Code into your Blog

.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: #F8F8F8;position: relative;border-radius: 0px 100px 120px;padding:5px;}
span.comment-actions, .continue {width:120px;background: #F1F1F1;border-radius: 20px 20px;text-align:center;font-weight:bold;text-decoration:none !important;}
span.comment-actions:hover, .continue:hover {background: #EBDDE2;text-decoration:none !important;}
.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .thread-toggle {background: #F3F3F3;border-radius: 20px;padding: 6px 12px 6px;font-weight: bold;}
.comments .thread-toggle:hover {background: #EBDDE2;}
.comments .comment-block {padding: 11px !important;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:40px !important;background: white;padding: 5px;border-radius: 100px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {border-radius:20px;position:relative;height:40px;width:40px;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important;}


Some of these styles require a bit more of work to make them look the exact replica of the original. Did you like them ? I will be sharing more of these in the future.

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment

Wait, where do I put it?

Go to Edit HTML and place it between the b:skin tags

amazing...so diligent...xixixi

ajniga said...

Is that for wordpress?

No no this is for Blogger

fowziey said...

Hi mate!. It seems Blogger threaded comments gaining its popularity from day to day. Because of known bugs, I'm happy staying with the old one. It's nice to have inspirations from established websites. And have done great works for this, keep it up.

One thing, until now we can't achieve rounded avatar with pure CSS, I mean with CSS3 features. It's not compatible in all browsers such as Opera and Firefox (except the latest).

Thanks for the thumbs up !!

So rightly said, CSS3 is awesome but its compatibility with older browsers is its main downfall.

Sidharth said...

Thanks Bro :) !!
You are always Great!!

Rahul Roy said...

Awesome Work, Prayag Verma..

AMMAR said...

It seems your really work hard on collecting different comment section . Good work

Well the real credit for this goes to 54Blogger , I just took it as a challenge to convert it for Blogger comment system

Thanks for the appreciation

Pradeep said...

Hey, Man how do we add these comment styles to standardize template?

Pradeep said...

Hey prayag, See what happened in my blog .. :D http://bloggertrickshut.blogspot.in/2012/02/pagination-in-blogger.html

dude want to say thanks working perfekt very much thanks

Check this post

Mail me the template and I will fix it for you

Unknown said...

THIS IS EXACTLY WHAT I'VE BEEN SEARCHING FOR MONTHS!!! THANK YOU! SERIOUSLY!

Unknown said...

Succesfully applied the css-tricks style. One question. how can i make the line from avatar to the comment box smaller? the line is too thick

Add the following CSS

.comments .comments-content .comment-header {height: 10px;}

Change the height accordingly

Unknown said...

That's it! i love you! thanks!

Ernst said...

Hi, its me again. =)

Is there a possibility to make my comments looking like these from engadget.com?
I like to have my avatar pictures into a border, but i cant find a solution. I need a div around the or have to move the image-container into the comment-block. Any idea? =)

Example:
http://www.engadget.com/2012/03/05/poll-did-you-download-the-windows-8-preview/#comments

Ernst said...

I forgot:
I wanna also move thr reply and delete button to the right upper site from the comment block, like in the example.

I will make that for Blogger , just wait a couple of days more

Anonymous said...

thanks man...it works like a charm...
god bless you...

This one is totally awesome. :D

Akguru said...

Hello prayag i did it and this works for me thanks just want that all are done only one thing i want it which is that see these comments all names are in yellow box how to add these name box to the comment waiting for your reply

John said...

Nice, thanks man!

wow what a great threaded comment ..

See my blog buddy www.3nura.blogspot.com

I really appreciate this wonderful post. I assure this would be beneficial for most of the people. Interesting and informative. Thanks for sharing.

mahendran said...

cool thanks..-

Unknown said...

beautiful post brother but there is a question is there any effect of these widgets on page loading time
My blog is >> http://haseebnet.blogspot.com
regards: haseeb malik
Thank you

jayr said...

thanks for this collections!

girlz said...

thanks..
http://kisahhidupku1999.blogspot.com/

irresistable

Hasan ali said...

tq , it works

A Request, Please:
Any code, Please, that to be placed in my blog HTML to rectify - Comment Related Gadgets (eg., Recent/Latest Comments and others also) in my blog(only one Post) working and taking to/retrieving comments in First Page of comments (ie.,first 200) only, when clicked. My blog having more than 200 comments.
Hope and Request a Way-Out from You with a HTML code, Please.
With All Regards and Thanking You again.

P.S.
This for notification of Your reply, Please.
Thank you again with Regards.