Blue Ice - An Elegant New Comment Theme For Blogger Blogs




| 22 comments

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. Do you have instructions on how to incorporate this into a Weebly blog?

    Here's to hoping!

    Thx much!

    femmeflashpoint

    ReplyDelete
    Replies
    1. Angelia the code is only going to work with the default Blogger comments I'm afraid :(

      Delete
  2. 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
  3. 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
    1. 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
    2. you must take Space and "Apply to blog" will be acctivated

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

    ReplyDelete
    Replies
    1. Claudya this code will only work with the default Blogger Comments I'm afraid,,

      Delete
  5. 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
  6. Just put it in. Beautiful and easy. Great job!

    ReplyDelete
  7. 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
    1. 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
  8. 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
    1. Yeah! Itender this comment theme is adaptable
      And Thanks for your kind words of appreciation

      Delete
  9. 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
  10. 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
  11. Works with Disqus comment system? Ty

    ReplyDelete
    Replies
    1. Claudya this tutorial is only for the Blogger comment system :(

      Delete
  12. 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
  13. 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



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