Subscribe
emailSubscribe to our mailing list to get the updates to your email inbox...

Enable Threaded Comment in Simplex's templates

by nhamnga hanh | posted: 2/02/2012 | 33 comments

Newer version here
Blogger official support threaded comments . You can see the demo in SimplexDesign blog ^^ .
I think it's better than Blogger default comment ,and more convenient than embedded comment systems such as Disqus , IntenseDebate ...In this post ,you will learn how to enable this feature in Simplex's templates


To enable this function in Simplex's templates , you can follow these steps :
1,Go to Dashboard - > Template - > Edit HTML
Check on Expand widget template


2,Find this line
lt;b:include data='post' name='comments'/>
And change it to
lt;b:include data='post' name='threaded_comments'/>


3,Save template .
Ok ,you can see the threaded comment system work in your blog .


4,To make the threaded comment look like what is in SimplexDesign ,you can paste this code right before <body>   :




<style>
/*------------- START Blogger Threaded Comments by www.ravisaive.in -------------*/
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#fff; border:1px solid #5AB1E2;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px; background:#EBF5FE;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;


}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .user a {
color:#2D5E7B; font-size:14px; font-weight: bold;text-decoration: none;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
color: #999999;
float: right;
font-size: 11px;
text-decoration: none;
}
.comments .comments-content,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}


.comment-header {background-color: #F4F4F4;
    border: thin solid #E6E6E6;
    margin-bottom: 5px;
    padding: 5px;
}
.comments .comments-content .comment-content {
  text-align:none;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .continue {
  cursor: pointer;
}
.comments .continue a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;
border: 1px solid #DDDDDD;}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
}


/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}


/*------------- End of Blogger Threaded Comments by www.ravisaive.in -------------*/
</style>


This CSS snipet is not from me . It's belong from www.ravisaive.in . So please keep the credit line in this snipet .
That's all . Hope it helpful to you all :D
Want to keep update ? Follow us on Facebook and Twitter to find out!

Huy Dinh Quang - administrator

Huy Dinh Quang (known as Nhamngahanh) is a blogger and founder of Simplexdesign blog . Learn more about him here and connect with SimplexDesign community in Twitter,Facebook,and Google+

Related Posts

Advertisement

33 comments

  1. Thanks for sharing..
    Terima kasih...

    ReplyDelete
    Replies

    1. http://www.fandung.com/2012/02/ancdata-plugin-load-feed-blogger.html

      Delete

  2. This is a great share. I've instantly included it in my blog too. Here it is: http://ow.ly/8PNsO

    ReplyDelete

  4. this blog post not work in internet explorer 8 and 9 !!!
    and all posts not work

    ReplyDelete

  5. At last they hear us!!!
    Thx for the tip

    ReplyDelete

  6. i can't find line
    lt;b:include data='post' name='comments'/>
    i'm already Expand Widget Templates,but still can find that line,i'm used simplex linepress template.

    ReplyDelete

  7. Dinh Hello!
    You can do something similar to this template?
    http://demos.gabfirethemes.com/city-desk/
    I would love
    thanks
    Greetings from Argentina

    ReplyDelete

  8. Nice tutorial!! It is looking nice now. Thanks for sharing this.

    ReplyDelete

  9. This comment has been removed by the author.

    ReplyDelete

  10. Dear nhamngahanh,

    Thanks for sharing! Simplex Design is always the best, and my favorite is SimplexEnews. I added the CSS snipet from www.ravisaive.in, and I have a question. Sorry, my English is very poor, hope you can understand.

    In my blog, the comments are leaning to the right, and the comment form is to the left. Just like this: http://murphywu.blogspot.com/2008/11/mg5_3614.html. And in Firefox, there is a scrollbar right outside the comment form textarea, I have to scroll it down to see the "Publish" and "Preview" buttons. (But the other browsers are ok.) Could you tell me how to move the comments and comment form back to center? Thank you very much! :)

    ReplyDelete
    Replies

    1. thanks for your comments.In your blog ,I see everything ok . No scroll bar . I guess it depend on browser/monitor size .
      In Blogger ,there's no way to modify comment form script . Blogger doesn't allow that .
      So I will need more time to and help from others to check and solve this issue .

      Delete

    2. Maybe I can help:
      "In my blog, the comments are leaning to the right, and the comment form is to the left."

      what u must do:
      1. Delete the Comment CSS from ur simplexenews template
      2. find this code:
      .comments {
      clear: both;
      margin-top: 10px;
      margin-bottom: 0px;
      line-height: 1em;

      and replace it with:
      .comments {
      clear: both;
      margin-top: 10px;
      margin-bottom: 0px;
      margin-left: 20px;
      line-height: 1em;

      u can trial-error the margin by change the value of margin-left: 20px;

      hope that help! :)

      Delete

    4. @Fuji Mulia : thanks a lot ^^

      Delete

    5. @nhamngahanh:
      You are welcome, bro! :)
      Btw, I am using ur template. Visit me at: www.trigonalworld.com (under re-construction) :)

      Delete

  11. @nhamngahanh: Thank you! I am a big fan of Simplex Design. ^^

    @Fuji Mulia: Thank you! It's very useful. Previously, I found the scrollbar appears in Windows 7 and disappears in Windows XP. So maybe it's about the operating system? Anyways, the scrollbar is not a question now. There are 3 pictures for reference:

    1. before: http://imageshack.us/photo/my-images/715/20120210214214.png/

    2. after adding "margin-left: 20px;": http://imageshack.us/photo/my-images/3/20120210214448.png/

    3. after deleting the original comment CSS: http://imageshack.us/photo/my-images/198/20120210214632.png/

    That's already what I want, and I can use Chrome. LOL
    Again, thank you very much! ^^

    ReplyDelete
    Replies

    1. u r welcome, bro!
      I'm glad I can help :)

      Cheers!

      Delete

  12. I need help! I use the template "Simplex Newspaper II" on my site and today the slide (label 15) just stopped working. Could anyone tell me why? I downloaded my template on this site in the past week. Until yesterday it worked normally, but today not...

    ReplyDelete
    Replies

    1. sometimes hosting for javascript is down and it's the reason why it can't work . Check the solution in my website .

      Delete

  13. This's a great guide. Thank you.

    I found that your blog home page display the first post not correct (the second and the third are over the first), please check it friend.

    ReplyDelete
    Replies

    1. Thanks for your comment .
      In my blog ,sometimes javascript load slowly ,so it can't display as normal .

      Delete

  14. Let me use this template. thank you

    ReplyDelete

  15. Awesome, i'll use on my new blog. Thanks

    ReplyDelete

  18. Hi bro! How r u? Nice design!

    Can you pliz check my site, it seems that the reply button in threaded comment is not working anymore...

    My site: www.trigonalworld.com

    Thanks before :)

    ReplyDelete

Here are some rules for commenting on Simplex Design blog :
1, Search first ,then ask question. You will get the answer faster
2, All comments except spams are welcome.
3, Please make all requests in English.
4, Do not use generic titles such as Admin or Mod. This confuses readers