Blue Ice – An Elegant New Comment Theme For Blogger Blogs

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

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.

By 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

---

What My Robot Recommends:

• Forget About Links – Get Your Blog Square With The Social Gods in 2014
• 8 Awesome Photoshop Alternatives From Personal Experience
• Explore 10 Best Blog Footer Designs With Examples
• How (and Why) to No-Index Archive Pages in Blogger
• Animated Zoom With Caption Effect For Pictures On Blogger