Blue Ice – An Elegant New Comment Theme For Blogger Blogs

Posted : Saturday, December 21, 2013 | Post Author : Paul Crowe | 22 comments

Dear Reader, if you like SUYB’s content, feel free to comment on our blog posts.Read what ‘Sharing is Caring’ means (and when to do it)

Guest Post – Our host is Suryakant Sao, who has a brand new comment system for blogger users with a fantastic look, numbered comment system and highlighted author comments.See How To Become a guest author on Spice Up Your Blog.

Hey! Friends this is Suryakant sao from trackmyblog.com.I have been inspired greatly by the work of Paul Crowe and actually he’s the one whose articles put a feeling inside me to learn web-design, so for the past 5-6 months I have been learning web-design and now I’m here before you with a tutorial.

Well! I should tell you that I am also blogging on the blogger platform and plan to stay on blogger, but there’s one thing that always disappoints me about the blogger platform. It is the low quality of Design i.e. D-E-S-I-G-N used in the comments. Though Blogger is very popular among millions and billions of user across the world but, the importance of  D-e-s-i-g-n can not be denied. To explain this our co-author Mara Fuchs has written a impressive article on Why Design Matters More than Content.

And this is the reason why most people reject the default blogger comments, default blogger templates and default widgets, they prefer to use customized blogger templates, widgets and also the comment themes. And Paul has done a great job by creating the awesome Spiceupyourblog comment theme for blogger users.

Add Blue Ice Comments To Blogger

Why am I here ? Just to add one more amazing and elegant comment theme in Paul’s blogs. It just came out as an accident, I was bored of my comment theme so I decided “let’s play with the codes now”. And gradually after working continuously for hours this comment theme came out which I’ve named as Blue Ice. The theme has a blue design with numbered comments, highlighted author comments and is created using just CSS.Have a view on the screenshot of this comment theme :

Click On image to see the live demo

Screenshot

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.

/**Blue Ice Comment Theme http://www.spiceupyourblog.com**/
.comments{clear:both;margin-top:10px;margin-bottom:0;background:#FFF;border:1px solid #DDD;padding:10px 5%}
.comments h4{font:normal normal 25px oswald}
.comments ol{list-style:none;counter-reset:trackit;margin:0}
.comments li.comment{list-style:none;position:relative;counter-increment:trackit;clear:both}
.icon.user.blog-author:after{content:"Author";position:absolute;top:.4em;left:1em;color:rgba(112,153,182,0.97);font-size:70%}
.comments .comment-block:before{content:counters(trackit,".");position:absolute;float:none;z-index:10000;left:-1.9em;top:1.2em;bottom:inherit;background:#A9C5CC;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;font-size:25px;color:#F7FCFF;text-align:center;clear:both;margin:0;padding:8px 12px}
.comments .comment-replies .comment-block:before{content:"{" counters(trackit,".")"}";position:absolute;right:.5em;left:inherit;top:inherit;bottom:.5em;float:none;z-index:10000;background:rgba(0,0,0,0);border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;font-size:2rem;color:rgba(161,186,201,0.36);padding:8px 7px}
.comment-header{background:#DCE4EB}
.comments .comments-content .comment-header,.comments .comments-content .comment-content{margin:5px 5px 10px;padding:0 10px 0 75px}
.comments .comments-content .comment-replies .comment-block{position:relative}
.comments .comments-content .comment-replies{margin-left:2em;margin-top:1em;clear:both;padding:0}
.comments .comment-thread.inline-thread{background:rgba(0,0,0,0);padding:0 0 0 2em}
.comments .comment-replies .comment-block{float:right;border:1px solid #E7F5FF;min-height:100px;width:90%;margin-left:48px;background:#F7FCFF;padding:0 0 3em}
.comments .comment-block{float:right;border:1px solid #E7F5FF;min-height:100px;width:90%;margin-left:48px;background:#F7FCFF;padding:0 0 2em}
.comment-actions{position:absolute;left:4.5em;bottom:.5em;font-size:18px;padding:0}
.comments .comment .comment-actions a{padding-right:5px;padding-top:5px;margin:0}
.comments .comments-content .user a{color:#8B969E}
.comments .comments-content .user{font-style:italic;font-weight:400;color:#FFF;font-size:18px;text-shadow:1px 1px 1px #FFF}
.comments .comments-content .datetime,.comments .comments-content .datetime a,.comments .comments-content .datetime a:hover{margin-left:6px;float:right;text-transform:uppercase;font-size:12px;font-family:arial;font-weight:700;color:#237DAC}
.comments .avatar-image-container{background:#FFF;margin-left:0;max-height:70px;max-width:70px;overflow:hidden;width:70px;height:70px;position:absolute;left:25px;top:55px;z-index:10;border:1px solid #DDD;padding:3px}
.comments .avatar-image-container img{max-width:70px;max-height:70px;min-height:70px;min-width:70px}
.comments .thread-toggle{display:none}
/**Blue Ice Comment Theme http://www.spiceupyourblog.com**/

 Final Words

I am grateful to Paul Crowe for publishing my design on his blog. And yeah! friends do not forget to rate me for my work, feel free to criticize and and embrace me for my designs by leaving your comments below.

 
AuthorBy Guest Author – Suryakant Sao is a contributing author from Middle India who’s still a learner, but his works reflects a hidden web-designer. Do not forget to visit him and see his works on his site trackmyblog.com

 

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.

22 comments:

  1. Angelia PhillipsDecember 22, 2013 at 12:06 AM

    Do you have instructions on how to incorporate this into a Weebly blog?

    Here’s to hoping!

    Thx much!

    femmeflashpoint

    ReplyDelete

     

    Replies

     

  2. Paul CroweDecember 22, 2013 at 12:23 PM

    Angelia the code is only going to work with the default Blogger comments I’m afraid 🙁

    Delete

  3. Reply

     


  4. AshishDecember 22, 2013 at 7:17 AM

    Wonderful tutorial, I really love this new commenting design for blogger and I’m use it to my new blogger blog.

    Thanks alot for sharing

    ReplyDelete

  5. Tee SpicerDecember 22, 2013 at 7:36 AM

    I tried adding the code to my blogger theme and when I placed the code it refused to give me the option to ‘Apply to Blog’ – (it wasn’t highlighted, so I couldn’t save it) Can you help?

    ReplyDelete

     

    Replies

     


  6. Paul CroweDecember 22, 2013 at 12:16 PM

    Maybe it’s not picking up that you have pasted in code, try again and after pasting the code in click space a few times or type something extra in (make sure to then delete it) and see if the apply button works.

    If not let me know I will show you another way to add it..

    Delete


  7. محمد جلالJanuary 1, 2014 at 11:27 AM

    you must take Space and “Apply to blog” will be acctivated

    Delete


  8. Tee SpicerJanuary 10, 2014 at 2:45 PM

    Thanks!

    Delete

  9. Reply

     


  10. Claudya RDecember 22, 2013 at 12:15 PM

    Hi, i have Disqus at my blogger theme. This code works even with Disqus? Merry Xmas btw.

    ReplyDelete

     

    Replies

     


  11. Paul CroweDecember 22, 2013 at 12:22 PM

    Claudya this code will only work with the default Blogger Comments I’m afraid,,

    Delete

  12. Reply


  13. Suryakant saoDecember 22, 2013 at 1:16 PM

    Woah! Paul Sir 🙂
    Really you have given a new touch to your comment theme using counter-reset property.. I’m happy that I inspired you for it.
    :))

    ReplyDelete

  14. Sarah CarlettiDecember 22, 2013 at 8:34 PM

    Just put it in. Beautiful and easy. Great job!

    ReplyDelete

     

    Replies
     


  15. Suryakant saoDecember 23, 2013 at 12:44 PM

    Thanks Sarah 🙂

    Delete

  16. Reply

     


  17. Kubah MasjidDecember 23, 2013 at 4:31 PM

    I start by looking at your videos on youtube. turned out to be a simple step to apply. thank you for the information you submit

    ReplyDelete

     

    Replies

     


  18. Suryakant saoDecember 25, 2013 at 10:20 AM

    Glad to know you liked my work 🙂
    Thanks kubah I would also like to tell you that you can find two more new comment themes on my site @ trackmyblog.com

    Delete

  19. Reply

  20. ItenderDecember 24, 2013 at 11:56 AM

    It’s really elegant, I think it will surely look great on my health blog. The tutorial is really helpful to use the new commenting system.

    ReplyDelete

     

    Replies


  21. Suryakant saoDecember 25, 2013 at 10:22 AM

    Yeah! Itender this comment theme is adaptable
    And Thanks for your kind words of appreciation

    Delete

  22. Reply

  23. Jackie BouchardJanuary 7, 2014 at 8:35 PM

    I’ve had this post open in my browser for a while and just finally got up the nerve to do it today. (I’m a bit of a spazz with this kind of stuff and in the past have really messed things up!) But this was easy-peasy! And the comments look SO nice now on my blog! Thanks!!

    ReplyDelete


  24. SamirJanuary 18, 2014 at 7:23 AM

    Hey

    Is there is chance to change the color of this comment system, I’m thinking to change the color of this cool comment system and use it to my blogger blog.

    ReplyDelete


  25. Claudya RFebruary 17, 2014 at 11:52 PM

    Works with Disqus comment system? Ty

    ReplyDelete

     

    Replies


  26. Paul CroweFebruary 18, 2014 at 11:24 AM

    Claudya this tutorial is only for the Blogger comment system 🙁

    Delete

  27. Reply

  28. EstrellaFebruary 28, 2014 at 3:06 PM

    I just put this up on my blog and it looks great except that the when comments are made, they can’t be seen! its like invisible ink or something. How do i rectify this please?

    ReplyDelete

  29. Holly GagnonApril 1, 2014 at 6:35 PM

    Thank you for this tutorial. It worked great except when I replied to my comments the person doesn’t receive my response. This has always been a problem with my blog comments and I was hoping adding this CSS code would of changed that issue. Any ideas??? Thanks- Holly

    ReplyDelete

Leave a Reply

Your email address will not be published. Required fields are marked *