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. 

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(http://3.bp.blogspot.com/-IRuG_QnOUaM/UakmzAR_JRI/AAAAAAAAJxA/cfgolzZifRE/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;http://4.bp.blogspot.com/-9PqmPwn5OTc/UakmGeTAJ1I/AAAAAAAAJw4/fv8iqn6sVOo/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(http://1.bp.blogspot.com/-tZR7Njp97jo/UalQRiCT3UI/AAAAAAAAJxg/ba4PGdYsHj4/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.