11 January 2014

Three Beautiful Blogger Threaded Comment System

// // 6 comments
Beautiful Blogger Threaded Comment SystemAs we all know after waiting for many years blogger finally introduced their threaded comment system for their user,but still it's not as beautiful as disqus,commentluv or livefyre comment system.So we continuously providing some tweak to modify the default blogger threaded comment system.As we believe design is always important for any blog.So here in this post we once again came with three awesome comment design for blogger threaded comment system which are purely css based and easy to install.



 Must Read : Show Comment Box Above Comments



Stylish Blue Comment System



Live Demo



  • First log onto blogger dashboard>template>edit html>proceed
  • Then search for ]]></b:skin> and above it paste the below codes



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





  • Now save the template and you're done

Fancy Black Comment System

Live Demo



  • First log onto blogger dashboard>template>edit html>proceed
  • Then search for ]]></b:skin> and above it paste the below codes



#comments{background:#FFF;border:1px solid #dcdcdc;padding:20px} #comments h4{font-size:28px;color:#414141;line-height:2em} .comments ol li:before{content:counters(trackit,".");font-size:3.5rem;color:rgba(0,0,0,0.16);right:.3em;position:absolute;text-shadow:1px 1px 1px #FFF;padding:.2em 0 0} .comments ol li{counter-increment:trackit} .comments ol{counter-reset:trackit} .comments .comments-content .comment-content{text-align:justify;border:1px solid #e1e1e1;margin-left:-40px;margin-top:35px;padding:20px} .comments .comments-content .comment-header{width:58%;position:relative;margin:10px 0 0;padding:0 25px} .comments .comments-content .user{font-style:normal;font-weight:400;color:#414141;font-size:20px} .comments .comments-content .user a{color:#414141;font-family:impact, arial, sans serif} .comments .comments-content .user.blog-author a{color:#4085FD} span.datetime.secondary-text a{color:#b9b9b9;font-style:italic} .comments .comments-content .datetime{color:#616161;fontsize:12px;display:block;margin:0} .comments .comments-content .comment-thread ol{list-style-type:none;text-align:left;margin:0;padding:0} .comments .comment .comment-actions a{padding-right:5px;padding-top:5px;text-decoration:none;text-align:right} .comments .continue a{display:none!important} .comments .avatar-image-container img{max-width:60px;max-height:60px;width:60px;height:60px;z-index:1;float:left} .comments .avatar-image-container{float:left;max-height:60px;height:60px;overflow:hidden;width:60px;max-width:60px;border-radius:0 50% 50% 50%;-moz-border-radius:0 50% 50%;-o-border-radius:0 50% 50% 50%;border:1px solid #dcdcdc;background:#fff} .comment .comment-replies .comment{border-top:5px solid #414141;border-left:3px solid #f5f5f5;border-right:3px solid #f5f5f5;background:#f5f5f5;padding:10px} .comments .comments-content .comment-replies .comment,.comments .comments-content .comment-replies .comment:first-child,.comments .comments-content .comment-replies .comment:last-child{margin:0;padding:1em} .comments .comments-content .comment:last-child,.comments .comments-content .comment:first-child{padding-top:5px;padding-bottom:5px;list-style:none;position:relative} .comment-thread.inline-thread .comment-content{background:#fff} span.item-control.blog-admin,.comments .thread-toggle{display:none} #comments .comment-actions.secondary-text,.comments .comment .comment-actions a:hover{text-decoration:none}





  • Now save the template and you're done

Go Green Comment System



Live Demo



  • First log onto blogger dashboard>template>edit html>proceed
  • Then search for ]]></b:skin> and above it paste the below codes



.comments {padding: 30px 1em 0;clear: both;margin: 0 1em 1em;background: #FFF;border: 1px solid #DADADA;} .comments ol{list-style:none;counter-reset:trackit} .comments ol li {list-style:none;counter-increment:trackit} .comments ol li:before { content: counters(trackit,".");position: absolute;right: 1.5em;color: #6CB61A;font-size: 24px;background: rgba(133, 206, 53, 0.4);border-radius: 50%;-moz-border-radius: 50%; padding: 1px 9px;} .comments .comments-content .comment-replies .comment-thread ol li:before { content: counters(trackit,".");position: absolute;right: 2.5em;color: rgba(1, 111, 1, 0.34);font-size: 24px; background: rgba(0, 0, 0, 0); border-radius: 0%;-moz-border-radius:0%;} .comments h4 { font-size: 25px; line-height: 30px; padding: 0; text-transform: capitalize; } .comments .avatar-image-container {float: left;max-height: 65px;overflow: hidden;width: 65px;max-width: 65px;} .comments .avatar-image-container img {max-width: 65px;max-height: 65px;min-height: 65px;min-width: 65px;} .comments .comment-block {margin-left: 5em;position: relative;word-wrap: break-word;} .comments .comments-content .user {font-style: normal;font-weight: bold;background: #85CE35;padding: 1px 5px;font-size: 14px;} .comments .comments-content .user a { color: #FFF;} .comments .comments-content .icon.blog-author {display: none;} .comments .comments-content .datetime {margin: 0;background: rgba(133, 206, 53, 0.25);padding: 1px 5px;font-size: 14px;} .comments .comments-content .datetime a{color:#6CB61A} .comments .thread-toggle { display: none;} .comments .comments-content .comment-header {margin: 0 0 8px -2em;overflow: overlay;position: relative;} .comments .comments-content .comment-replies .comment-thread ol li {border-top: 2px solid #86B15E;border-bottom:0px!important;background: rgba(100, 201, 22, 0.1);padding: 10px;} .comments .comments-content li.comment { border-bottom: 2px solid #86B15E; } .comments .comments-content .comment:last-child {border-bottom: 2px solid #86B15E;padding-bottom: 0; }



  • Now save the template and you're done.


Hope you'd like this comment system,eagerly waiting for hearing your response about this comment system.If you do have any query regarding this ask through comment below.
Articles You May Like

6 comments: Leave Your Comments

  1. I think II'll give this a try. My blogs comment section is boring. But I'm not just that CSS savy...

    ReplyDelete
    Replies
    1. It is not so hard to implement..for further help you can contact us also.

      Delete
  2. Wow! Thanks for sharing :) Will also try this and I hope will make my comment system more interesting :)

    ReplyDelete
  3. Hello, If I make this on my blog will all the past comments will still be visible or it will be hidden from the comment system? Is this applicable to new comments only?

    ReplyDelete
  4. oh okay, so it's not like disqus that if your on blogger then decided to change to disqus all past comments will not show on blogger. It's there but looks like deleted because it's hidden. thanks

    ReplyDelete