Breaking News
Loading...
Thursday 27 March 2014

Dark Sun : Trackmyblog Style Threaded Comment System


custom styled threaded comments
Blogger has updated it's old one level comment system into nested levels comments by bringing threaded comments on which I've already written a post, but problem with the default blogger comment system is that it doesn't provides you good designs like that of disqus, comment-luv etc.
And for the design lovers like me, this can't be expected straightly, because I simply believe that a good design is the only thing which represents your personality. So, keeping this fact in mind I have coded a few stylesheets which will re-invent your old class blogger comment system into a whole new comment system giving it an elegant feel.





Comment System 1

This comment system is given a nick name of Dark Sun, as it is the default comment system stylesheet used by trackmyblog.com. Css2 counter-increment property has been used to auto number the comments you receives and you'll also find that when blog's author post any comment then font-color of his name is changed which give him a good presence among the crowds.

Here is the screenshot of the comment system which you'll get after implementation of stylesheet on your blog.

trackmyblog style comments
Screenshot


Here is The Stylesheet Code!

  • Open Blogger dashboard → Template → Html Editor
  • Now search for ]]></b:skin> 
  • Now copy and paste the below given css code in before the skin code

Css

/* Drak Sun http://www.trackmyblog.com style blogger threaded comments */
#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}



  • After adding the code save your template, and view the comment system.
  • Congratulations! you have successfully added customizations to your blogger comment system.

Final Words

Hey! friends if you liked this blogger freebie provided by trackmyblog team, then don't forget toshare it with your friends. I am very eager to hear you, so do tell us your words about this widget provided here at trackmyblog. See you soon with next customizations so stay tuned to grab new theme for your blogger comments

0 comments:

Post a Comment

 
Toggle Footer