Fancy Blogger Threaded Comments

Blogger rib comments square measure everyplace currently and its time you design the fashion and format of your comments. an honest journal commenting system facilitates to create a powerful audience and help readers to interact a lot of into discussion. 


blogger threaded comments

















Customize Your Comments Format!


Here we are going to override your default comment designs with our custom CSS code. we are going to customise nearly everything from profile avatar pictures to reply and delete links. All i need from you is careful implementation of the simple steps below:

  1. Go To Blogger > guide
  2. Backup your guide - you want to keep a backup of your copy if encase you needed to undo steps
  3. Search for this piece of code:


<b:includable id='threaded_comment_css'>
   Click the highlighted region to expand its code. You will now need to replace all the CSS code inside <style>   and </style>   with the following styles:
   
/* Fancy Blogger Threaded Comments by TheTechWar-Z(thetechwarz.blogspot.com)

 starts */                
.comment-thread ol { 
                counter-reset: twz-comments;
 
}
 
            .comment-thread li:before {
 
            content: &quot;\25C4&quot;counter(twz-comments) &quot;\25BA&quot;;
 
            counter-increment: twz-comments;
 
            font-size: 16px;
 
            position: relative;
 
            top: 100px;
 
            font-weight: bold;
 
            font-family: arial, georgia;
 
            color: rgb(199, 199, 199);
 
            left: -110px;
 
            padding: 4px 8px;
} 
            .comment-thread ol ol {
 
            counter-reset: twz-comments-sub;
 
              padding-top: 20px!important;
 
              margin-bottom: 25px;
 
}
 
            .comment-thread li li:before {
 
            content: counter(twz-comments) &quot;.&quot; counter(twz-comments-sub);
 
            counter-increment: twz-comments-sub;
 
            font-size: 14px;
 
            position: relative;
 
            top: 100px;
 
                left: -80px;
 
}
 
                 
 
          .comments .comments-content .comment-thread ol ol {
 
                padding: 0px 10px 40px 40px;
 
                border: 1px solid #ddd;
 
                box-shadow: 3px 4px 9px rgb(218, 218, 218);
 
                margin-top: 10px;
 
                  }
 
                .comments .comments-content .comment-thread ol ol li {
 
                    margin-bottom: -40px;
 
}
 
                 
 
                  .comments {
 
                    clear: both;
 
                    margin-top: 10px;
 
                    margin-bottom: 0px;
 
                    line-height: 1em; border:0px !important;
 
                  }
 
                  .comments .comments-content {
 
                    font-size: 12px;
 
                    margin-bottom: 16px;
 
                    font-family: Verdana;
 
                    font-weight: normal;
 
                    text-align:left;
 
                    line-height: 1.4em;
 
                    width:88%; margin-left:70px;
 
                  }
                    .comment-form { 
                    max-width: 100%;
 
                    clear: both;
 
}
 
                 
 
                  .comments .comments-content .comment-thread ol li {
 
                    margin-top: -30px;
 
}
 
                 
 
                 
 
                  .comments .comment .comment-actions a {
 
                 
 
                    cursor: pointer;
 
                    color: rgb(46, 46, 46);
 
                    padding: 2px 3px 2px 30px;
 
                    Position: RElative;
 
                    -moz-border-radius: 6px;
 
                    -webkit-border-radius: 6px;
 
                    border-radius: 6px;
 
                    font-family: &#39;Open Sans Condensed&#39;, sans-serif;
 
                    font-size: 12px;
 
                    font-weight: 700;
 
                    margin-right: 15px;
 
                    background: url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUKvGlrkHASfifKMMpKkNCSkPkBLb5eyXT42TnagwhMV8JeIQGjNcsMQRjEm3x5Y3pSkWR87bVZHT072I8VRiJJF7BiMrr5xbG7Ughy9KdScaVRlV6QdHLlin6P4zh5OegdkgtwPSiHlII/s1600/reply.png) no-repeat 9px 0px; 
                    float:right;
 
                  }
 
                 
 
                
 
               
 
                 
 
                  .comments .comment .comment-actions a:hover {
 
                    text-decoration: underline;
 
                   
 
                  }
 
                  .comments .comments-content .comment-thread ol {
 
                    list-style-type: none;
 
                    padding: 0;
 
                    text-align: none;
 
                  }
 
                 
 
                  .comments .comments-content .comment-thread ol li {
 
                  border-bottom: 0px dashed rgb(196, 196, 196);
 
                    margin-bottom:25px
 
                  }
 
                 
 
                  .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;
 
                   
 
                  }
 
                  .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:0px;
 
                    padding-bottom:0;
 
                  }
 
                  .comments .comments-content .comment-body {
 
                    position:relative;
 
                  }
 
                  .comments .comments-content .user {
 
                   
 
                    font-weight: 700;
 
                     font-size: 14px;
 
                    font-family: &#39;Open Sans Condensed&#39;, sans-serif;
 
                    color: #333!important;
 
                  }
 
               
 
                 
 
                  .comments .comments-content .icon.blog-author{
 
                    position: absolute;
 
                    top: 52px;
 
                    right: -36px;
 
                    margin: 5px 0px 0px 0px !important;
 
                    background: url(&quot;
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrmfTWO3Ap8SoCnI0yXZCegKprqfd0RNn33_VGULMpcySoFWCDOxoutR7-kpWd6xEthwmCwgafPCLrxhAqmoT1NWfL7OjXiPWc8NVC_vAzZRoiYLNBFtxoOEr0E0K70Pu31tFgpg1Kq4Lu/s320/aDMIN.png&quot;) no-repeat scroll 0% 0% transparent; 
                    width: 90px !important;
 
                    height: 90px !important; }
 
                 
 
                 
 
                  .comments .comments-content .datetime, .comments .comments-content .datetime a {
 
                    margin:0px;
 
                    display: block;
 
                    line-height: 30px!important;
 
                    font: italic 11px georgia;
 
                    width:180px;
 
                  }
 
                 
 
                  .comments .comments-content .datetime a {
 
                    text-decoration:none;
 
                  }
 
                  .comments .comments-content .comment-header
 
                  {
 
                    margin:0 0 15px 10px;
 
                  }
 
                 
 
                  .comments .comments-content .comment-content {
 
                    margin: 0 0 10px -50px;
 
                    }
 
                 
 
                  .comment-header a {
 
                    color:#333;
 
                  }
 
                 
 
                  .comment-header a:hover {
 
                    color:#666;
 
                  }
 
                 
 
                 
 
                  .comments .comments-content .comment-content {
 
                    text-align:justify;
 
                    text-align: justify;
 
                    font-family: &#39;Open Sans Condensed&#39;, sans-serif;
 
                    font-size: 13px;
 
                    border: 1px solid #ddd;
 
                    padding: 20px;
 
                  }
 
                  .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: none;
 
                    padding: 0.5em;
 
                    font-weight: bold;
 
                  }
 
                  .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(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
 
                  }
 
                  .comments .thread-collapsed .thread-arrow {
 
                    background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
 
                  }
 
                  .comments .avatar-image-container {
 
                    float: left;
 
                    width: 36px;
 
                    max-height: 36px;
 
                    margin-top: 15px;
 
                    overflow: hidden;
 
                  }
 
                  .comments .avatar-image-container img {
 
                    width: 36px;
 
                     box-shadow: 2px 2px 0px rgba(0,0,0,0.13)
 
                  }
 
                  .comments .comment-block {
 
                    margin-left: 48px;
 
                    position: relative;
 
                  }
 
                 
 
                  .comments .comments-content .comment-replies {
 
                        margin-top: 3em;
 
                        margin-left: 40px;
 
                        font-size: 12px;
 
                            }
 
                 
 
                  .comments .comments-content .comment-replies a {
 
                    color: #333;
 
                        }
/* For Animating Comment Header*/
.trigger { 
margin-top: 3px;
 
font-weight: bold;
 
color: #A1A1A1;
 
cursor: pointer;
 
float: right;
 
font-size: 12px;
 
margin-right: 10px;
 
}
 
.triggeractive {
 
color:rgb(255, 5, 5);
 
}
 
.toggle_container {
 
overflow: hidden;
 
clear: both;
 
font-size: 12px;
 
font-weight: normal;
 
line-height: 20px;
 
margin-top: 10px;
 
}

                  
 
                  
 
                  /* Responsive styles. */
 
                  @media screen and (max-device-width: 480px) {
 
                    .comments .comments-content .comment-replies {
 
                      margin-left: 0;
 
                    }
 
                  }
/* Fancy Blogger Threaded Comments by TheTechWar-Z(thetechwarz.blogspot.com)

  ENDS*/



Make these Customizations:

  • To be honest you may got to use browser inspector to extra service all the missing gaps in alignment and styling. Since each guide is coded otherwise thus there'll be slight distinction in however this style seems on your journal. therefore use Chrome and its examine part to good things.
  • The yellow highlighted components represent the hex code for the 2 arrows that surround the Comment Counter range. you'll modification this if you recognize a way to edit the content property else leave it default.
  • The brown highlighted code represents the icon next to reply and delete link. you'll replace it along with your own custom image link if you want.
  • The inexperienced highlighted code represents the Admin Ribbon. you'll modification it conjointly if you want
  • Leave all alternative designs default as a result of they're going to mix a light-weight background terribly nicely unless your journal includes a black background.


4. Next rummage around for this #comments h4   and replace this CSS ID fully with this one:

#comments h4{
color: #4E555A; 
font-size: 25px;
 
font-family: 'Open Sans Condensed', sans-serif!important;
 
line-height: 1.6em !important;
 
font-weight: bold;
 
margin: 20px 0 50px 0px;
 
padding: 5px 0 5px 55px;
 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoZvXxaM3lQaay_A3n3LOSmxFzHQLkzzrDz6B79f-bw4PItvJ7ulYRRFH43yYDfD8ERan3Qk1VBoWO-teO7agfqofs9HItdvKdxizPS_kAChykce_ZjcEzyGJZ4MZoB-EZSd__tQPJF2-M/s1600/mbt-postcomment.png) no-repeat 5px 10px;
 
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.13);
 
border: 2px dashed #DDD;
 
border-radius: 4px;
}
5.  Save your template and you are half done!

Design Comment Header


Nested comments uses AN iframe comment box that cannot be tailor-made unless we tend to use JQuery. I thus removed the message that seems at the highest of comment box that show a message higher than the comment box. we tend to wont to add a message higher than kind by getting to Blogger &gt; Posts and comments. I removed that choice and introduced manner|a far} a lot of versatile way of warning guests regarding the comment policy.


How it works?

Do you guys keep in mind the Expand/collapse practicality we tend to created for concealing the comment box? we are going to utilize the precise same script here and make a toggle tab for comment policy.

Be careful here:
  1. Inside your template search for:
<b:if cond='data:post.numComments == 1'>
Now this code will appear a total 2 times inside your template, having the exact similar format as the code below:
Tip: this code will appear once inside <b:includable id='comments' var='post'> and the next time inside <b:includable id='threaded_comments' var='post'>
<h4> 
                   <b:if cond='data:post.numComments == 1'>
 
                     1
 
                     <data:commentLabel/>
 
                     :
 
                     <b:else/>
 
                     <data:post.numComments/>
 
                     <data:commentLabelPlural/>
 
                     :
 
                   </b:if>
 

</h4>

If your code matches the exact code shown above then just above </h4> paste the following HTML:

<a href='#comment-form'>Post Yours!</a> <span class='trigger'>Read Comment Policy &#9660;</span> 
<div class='toggle_container'>
 
<div class='block'>
<font style='color:rgb(255, 0, 0); font-weight:bold;'>PLEASE NOTE:</font> 
 
 
  <br/>
 
<b><u>We have Zero Tolerance to Spam.</u></b>  Chessy Comments and Comments with <b>Links</b>  will be deleted immediately upon our review.
</div> 
</div>
You can replace the complete yellow highlighted give up any message that you simply would really like to show to your readers. you'll add links, images, even a video message! something you would like to guide your guests to avoid spam.

Make the Comment Header Animate:

When you click the comment Policy link, the Message slides down. after you click it back it collapses and hides the message. we are going to use Jquery slideToggle perform to use this result. I even have conjointly enclosed the Google link to "Open Sans condensed" font to vogue the fonts.

Follow these steps:
  1. Paste the following code just above </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>

$(document).ready(function(){

    $(&quot;.toggle_container&quot;).hide();
 
 
 
    $(&quot;.trigger&quot;).click(function(){
 
        $(this).toggleClass(&quot;triggeractive&quot;).next().slideToggle(&quot;slow&quot;);
 
    });
 
 
 
});

</script>
Don't add the bolded code if you have already added JQuery library source link in your template.
  2.  Save your template and you are all done!

I Hope this data that I shared was useful to you, if you liked the post, please share.


If you've got any queries, you're most welcome to raise, simply leave a comment below and that i can surely answer your queries.



48 comments:

  1. Awesome work.Just wished to drop a comment and say i'm new your journal and adore what i'm reading.Thanks for the share

    ReplyDelete
  2. Great job. This is well judged and results in a healthy way. Great knock. Happy.

    ReplyDelete
  3. Awesome work.Just wished to drop a comment and say i'm new your journal and adore what i'm reading.Thanks for the share

    ReplyDelete
  4. Great job. This is well judged and results in a healthy way. Great knock. Happy.

    ReplyDelete
  5. Awesome work.Just wished to drop a comment and say i'm new your journal and adore what i'm reading.Thanks for the share

    ReplyDelete
  6. This is a great post. I like this topic.This site has lots of advantage.I found many interesting things from this site. It helps me in many ways.Thanks for posting this again. 토토


    ReplyDelete
  7. Can add up your article, believe that there is something you can add, visit the site 토토

    ReplyDelete
  8. 카지노사이트 This blog is a very valuable blog.I was looking the same type of post here.Thanks for it and carry on it

    ReplyDelete
  9. his article is very effective and valuable. I am very glad to read your blog. I hope you will soon share your next post about this discussion. Thanks for sharing and keep sharing 바카라사이트

    ReplyDelete
  10. 바카라사이트 these websites are really needed, you can learn a lot.

    ReplyDelete
  11. Thanks for sharing This is really inspiring and I love to read more about this. 경마

    ReplyDelete
  12. I’m really digging the template/theme of this blog. It’s simple, yet effective. A lot of times it’s very hard to get that “perfect balance” between usability and appearance. 토토

    ReplyDelete
  13. 스포츠토토 I am sure this article has touched all the internet people, its really really fastidious article on building up new website.

    ReplyDelete
  14. 바카라사이트
    Your style is so unique compared to other folks I have read stuff from.
    Many thanks for posting when you’ve got the opportunity, Guess I’ll just bookmark this page.

    ReplyDelete
  15. Wonderful, what a web site it is! This web site presents
    useful information to us, keep it up. 온라인카지노사이트

    ReplyDelete
  16. 바카라사이트
    Nice post. I learn something more challenging on different blogs everyday. It will always be stimulating to read content from other writers and practice a little something from their store. I?d prefer to use some with the content on my blog whether you don?t mind. Natually I?ll give you a link on your web blog. Thanks for sharing.

    ReplyDelete
  17. 스포츠토토티비 whoah this blog is wonderful i really like studying your
    posts. Stay up the great work! You realize, lots of individuals are searching around for this information, you can aid them greatly.

    ReplyDelete
  18. 토토 HI. Please visit our interesting website.

    ReplyDelete
  19. Really appreciate you sharing this blog.Much thanks again. Want more.
    토토사이트링크

    ReplyDelete
  20. That's why it's very hard to find, but I'm very fortunate to read your writing. 스포츠토토

    ReplyDelete
  21. As I website possessor I believe the content material here is rattling great , appreciate it for your hard work. You should keep it up! If anyone looking for safety playground for online gaming, come here: 바카라사이트


    ReplyDelete
  22. I am glad to discover this page. I have to thank you for the time I spent on this especially great reading !! 온라인카지노

    ReplyDelete
  23. 카지노사이트 I finally found great post here. Thanks for the information. Please keep sharing more articles.

    ReplyDelete
  24. Your blog is really nice. Its sound really good. 바카라사이트

    ReplyDelete
  25. 카지노사이트 Well I truly enjoyed reading it. This subject offered by you is very helpful and accurate.

    ReplyDelete
  26. 바카라사이트 Your article is an article that gives the answer to all the content I've been contemplating.

    ReplyDelete
  27. Your article is an article that gives the answer to all the content I've been contemplating.

    ReplyDelete
  28. Your blog is really nice. Its sound really good.

    ReplyDelete
  29. I finally found great post here. Thanks for the information. Please keep sharing more articles.

    ReplyDelete
  30. Well, reading that was really enjoyable. You have provided information that is both highly accurate and helpful.

    Rear Tractor Tyre

    ReplyDelete
  31. I appreciate you giving this knowledge. I read your article and find myself compelled to read it completely.

    Good Year tractor tyres

    ReplyDelete
  32. Thank you for sharing this information; your article is excellent and easy to read.

    Tractor

    ReplyDelete
  33. all the technicalss AUGUST1983Y solutions and staff we need for 에볼루션알가격

    ReplyDelete
  34. This information will always help everyone to gain knowledge. So please always share your valuable information. Thanks for giving good information. - Powertrac euro 50

    ReplyDelete
  35. Thanks for the publish your blog for free.. The info is really good.
    와이즈토토

    ReplyDelete
  36. I read this article. 바카라사이트닷컴 I think You put a lot of effort to create this article. I appreciate your work.

    ReplyDelete
  37. Great article with excellent idea! 카지노사이트 Thank you for such a valuable article. I really appreciate for this great information..

    ReplyDelete
  38. I learned something new from your article. your post is awesome
    Tata Intra V30 CX Flatbed

    ReplyDelete
  39. live koora instantly shares daily match scores for football lovers

    ReplyDelete
  40. Thank you for this wonderful post, great article, keep up the excellent work. 14th Doctor Coat

    ReplyDelete