Posted : Thursday, June 07, 2012 | Post Author : Paul Crowe | 52 comments
The ability to reply to comments on Blogger was probably the most sought after feature from Blogger users from many years.This year when the Blogger team delivered with the new Threaded comments with replies the response was obviously very positive.However the new comment format has brought with it some problems as some previous changes you may have made to your comment section may have been lost and moreover future changes would need to be coded differently.So for those of you that may have lost some of the styles you added or if you just want to add some style to lets face it what is a fairly basic looking comment section in this post i have 3 different color coded styles you can easily add to your blogger comments.Also check out the Speech Bubble Style Threaded Comments For Blogger we published in April.
The three styles add color to the comment number, comment author name, add a comment text and best of all the author comments have a ribbon attached.So when you comment on your own blog a ribbon will be placed in the corner with the text “Author” so reader can easily see your comments.The three styles we have will add all these features including the author ribbon in either Blue, Pink or Green.
These styles have been influenced from the code on Duypham, check out the demo below (Scroll to comments) with the blue style added.
I have a tutorial on how to add the code to your blog and of course the code for all three styles.
Three Styles For Blogger Threaded Comments
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 Code For Your Your Chosen Style Into The Css Section And Click Apply To Blog.
Blue Threaded Comment Style Screenshot :
Blue Threaded Comment Style Code :
Scroll Box Make Sure To Get All The Code
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#1e05d8}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:””;position:absolute;bottom:-10px;left:10px;border-top:10px solid #1e05d8;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#1e05d8}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(http://4.bp.blogspot.com/-awl7HMjMgh4/T89YtINejTI/AAAAAAAAGmQ/XxcTVLKUAtI/s320/picresized_1338990142_comment-author-blue.gif);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:””;position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/
Pink Threaded Comment Style Screenshot :
Pink Threaded Comment Style Code :
Scroll Box Make Sure To Get All The Code
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#d80556}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:””;position:absolute;bottom:-10px;left:10px;border-top:10px solid #d80556;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(http://1.bp.blogspot.com/-EJmwh15Urmc/T89WMFenyGI/AAAAAAAAGlg/Lt8N7DprwFU/s320/author-pink.png);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:””;position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/
Green Threaded Comment Style Screenshot :
Green Threaded Comment Style Code :
Scroll Box Make Sure To Get All The Code
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#56d805}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:””;position:absolute;bottom:-10px;left:10px;border-top:10px solid #56d805;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#56d805}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(http://2.bp.blogspot.com/-zz8GxHMWPAo/T89XNSMjjeI/AAAAAAAAGl4/7IfX13BSmxg/s320/picresized_1338989738_comment-author-green.gif);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:””;position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/
That’s it a cool new style for your Blog comments with author ribbon so readers know which comments are yours.Look out for more upcoming posts to Spice up your Blogger comments.
52 comments:
Just what my blog needed a bit of comment spice! Thank you so much for sharing, Paul, Louise
ReplyDelete
Replies
Just popping in to let you know, I’ve added your link to my blog post so other’s can pop over and join in on the color! Thanks again for sharing…
Delete
Thanks Louise I appreciate it !
Delete
thank you
Delete
Wonderful – but I cannot see the demo – page not found or something. I want to see it 🙂
ReplyDelete
Replies
Thanks for the heads up Prime I have updated the demo link so you can see it now.
Delete
Looks great, thanks buddy. You can even replace the comment CSS with the one above. 🙂
ReplyDelete
Hello Admin,
How do you create such images like you have created in the first image of this post.Pls relpy….
ReplyDelete
Replies
That’s a stacked polariod effect check out this post for how to do it – How To Add Stacked Polaroid And Other Cool Effects To Images
Delete
Paul, your demo is not working on this post. Please check it.
ReplyDelete
Replies
Thanks for the heads up Sonia I have updated the demo link so you can see it now.
Delete
This is cute, Thank You
ReplyDelete
Thanks! I’ve been looking this for months! =D
ReplyDelete
Nice, Thank you so much for sharing….
ReplyDelete
Nice post! heplful
ReplyDelete
that picture there are smileys and emoticons, can you do the tutorial or give link address to me?
ReplyDelete
Replies
I will have the comments smileys in a future post..
Delete
Awesome design for thread commenting system,thanks Paul
ReplyDelete
Hum, seems so nice, i´ll try later. ty
ReplyDelete
Awesome ! .. i will use Blue one .. your blog’s commenting system is awesome can you provide us like this one ? please …
ReplyDelete
Replies
Some things have to remain unique yahya 🙂
Delete
Hmmm yEah 😀
Delete
aah , thats what i nedded !
paul , awesome work man !
ReplyDelete
When replying on a Blogger post using a WordPress username, you appear as a ‘no-reply’ poster. I mean that the Blogger host cannot click and reply to your post. Do you know the workaround for that??
ReplyDelete
Hello, Sir ! Thank you for this useful tutorial. I’ve applied in my blog 🙂
ReplyDelete
Replies
great
Delete
Nice Post Paul, But Can I know how to highlight the author comment alone ? I don’t want to add any colors to comment, I just want to highlight the comment of the author
ReplyDelete
Oh my god, you are the best css.
ReplyDelete
Brilliant tutorial 😀 Thank you for posting this. For some reason though the little ‘author’ sash doesn’t show up on mine which is a shame
ReplyDelete
Usefull
ReplyDelete
Great post
How to add reply button to second reply box (just like your commets)
ReplyDelete
i have done with it looking cute pink one is better with black background it looks dashing :p
Thanks paul
website,
H4ck3r Cracks
ReplyDelete
Thanks Paul.
It looks great on my blog
ReplyDelete
Love it!!! Thank you so much. My blog comments look so much more organized now and separate from my post. Robyn
ReplyDelete
Great tutorial I modified it to something more lovely on my blog. I edited the color and added a thicker border for the comment block. Well done man
ReplyDelete
Thanhk to share !
ReplyDelete
Very NICE
ReplyDelete
hello paul please reply in the demo you added the smilies can you please please tell me how to add them in my blog please ?
ReplyDelete
I have commented on this tutorial before but did not implement it then. After using Disqus 2012, and discovered some falls, I decided to use the blogger default comment system. Thanks to the beautiful and professional work done by Paul!
After a little modification, I used the tutorial and is working perfectly on my blog.
ReplyDelete
thx 🙂
ReplyDelete
Thank you so much! Although I changed the colours a little to suit my blog better 🙂
ReplyDelete
the author label wont show up on my blog?
is my templates was the matter?
thx before
ReplyDelete
you are just awesome 🙂
ReplyDelete
Thank you !
ReplyDelete
Thank you very much Sir
ReplyDelete
Great job Paul, thanks a lot.
Cheers…
ReplyDelete
How to change colour and width of it ?
ReplyDelete
Fantastic!
ReplyDelete
Thank you so much for this. I changed the colour of the text and redid the image sash to suite my blog. Soooo much better then the generic blogger comments. Thanks bunches!
ReplyDelete
THis code is so important for any template comment customization…
ReplyDelete
Great post! Thanks a lot (;
ReplyDelete
Hi Paul, great tutorial but i have a little problem. After adding the codes, i noticed it’s over-riding the numbered pagination i added from one of your other tutorials. The numbers appears only on replies. Any idea on how to fix this? Woul appreciate your help. Thanks
ReplyDelete