Spice Up Your Blog Threaded Comment Style For Blogger




| 13 comments

I have received a lot of Emails and comments over the last year or so asking about the comments we use here on Spice Up Your Blog.When Blogger introduced threaded comments early last year I wanted a bright looking comment section with the authors comments easy to distinguish from readers comments.

The solution we came up with using some simple CSS adds some cool style to the comment and avatars as well as showing the author comment (That would be your comments on your blog) in a different color.We also overlap the commenter name with their avatar.All unique features for Blogger comments and originally for Spice Up Your Blog but so many have copied it without permission I though we might as well share it with all our readers.

The comments are almost the exact same as you see here on SUYB with some subtle differences so you can see exactly how it will look on your blog by checking out the demo below and scrolling to the comments.

View Demo Button

Add Comment Style To Your Blog


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.

@font-face { font-family: 'Philosopher'; font-style: normal; font-weight: 400; src: local('Philosopher'), url(http://themes.googleusercontent.com/static/fonts/philosopher/v4/OttjxgcoEsufOGSINYBGLYbN6UDyHWBl620a-IRfuBk.woff) format('woff'); } .comment .avatar-image-container { border: 1px solid #B6B6B6; max-height: 70px !important; margin-top: -5px; width: 70px !important; position: relative; z-index: 50; } .comment .comment-block { margin-left: 75px !important; } .comment .comment-header { background: none repeat scroll 0 0 #A9F5D0; color: #333; font-size: 15px; font-weight: bold; margin-left: 60px; } .comment .comment-header a { color: white !important; text-decoration: none; } .comment .comment-content { background: none repeat scroll 0 0 #FEFFF9; border-bottom: 2px solid #E6E6E6; font-size: 14px; margin: 0 0 30px; padding: 5px 5px 10px 10px; } .comment .comment-actions a { background: none repeat scroll 0 0 #DDD; color: #333; display: inline-block; line-height: 1; margin: 0 3px; padding: 3px 6px !important; text-decoration: none; } .comment .comment-actions a { background: none repeat scroll 0 0 #DDD; color: #333; display: inline-block; line-height: 1; margin: 0 3px; padding: 3px 6px !important; text-decoration: none; } .comment-header cite { background: none repeat scroll 0 0 #DF7401; border: 1px solid white; color: white; padding: 2px 20px; position: relative; z-index: 99; margin-left: -20px; } cite.blog-author { background: none repeat scroll 0 0 #8181F7 !important; } .icon.blog-author { display: none !important; background: url("") no-repeat scroll 0 0; margin-left: 90px; width: 60px !important; height: 60px !important; position: absolute; right: 5px; bottom: 5px; top: 10px; } .comment .comment-header { color: #333; font-size: 15px; font-weight: bold; } .comment .avatar-image-container img { border: medium none !important; height: 70px !important; width: 70px !important; max-height: 70px !important; max-width: 70px !important; } .comment .comment-actions a { background: none repeat scroll 0 0 #DDD !important; color: #333 !important; display: inline-block !important; line-height: 1 !important; margin: 0 3px !important; padding: 3px 6px !important; text-decoration: none !important; font-size:16px; } .comment .comment-actions a:hover { background: #CCC !important; text-decoration: none !important; } .comments { font-family: 'Philosopher', arial, serif !important; font-size: 1em; color: black; } .comments .continue a { display: block !important; font-weight: bold !important; padding: .5em !important; color:#E34600; font-size:16px; } .comments .continue a:hover {color:#4D3123;text-decoration:none;} .item-control { display: none !important; } .comments .continue { border-top: 2px solid transparent !important; } .comments .comments-content .icon.blog-author{position:absolute;top:-1px;right:-12px;background-image:url(http://cdn2.iconfinder.com/data/icons/crystalproject/16x16/apps/keditbookmarks.png);width:36px;height:36px;margin:0}

That's it just adding that CSS will transform your blogger comments from bland to beautiful.

Drop your comments and questions below.

AuthorAuthor - 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.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

13 comments:

  1. Thank you so much for this!!

    www.delabellesbeautyblog.com

    ReplyDelete
  2. 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
  3. Thnx I Share in My Blog
    iblogallery.blogspot.com

    ReplyDelete
  4. Cool Paul. I like ComLuv. I can see a threaded style resonating with commentors. Thanks for the share.

    ReplyDelete
  5. You are doing a great job especially for non-techie bloggers who don't know much about these tech shits. I will apply this plugin of threaded comments on my blog

    ReplyDelete
  6. I was very encouraged to find this site. I wanted to thank you for this special read. I definitely savored every little bit of it and I have you bookmarked to check out new stuff you post.

    ReplyDelete
  7. I wanted to thank you for this special read. I definitely savored every little bit of it and I have you bookmarked to check out new stuff you post.

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us