Fancy Blogger Comments with Comment Counter!

Fancy Blogger Comments with Comment Counter!

 Blogger thread ideas are now ubiquitous, and you are reshaping the style and design of your ideas. A good blog feedback system helps create a strong reading and gets readers involved in the discussion. Since 2009 we have introduced several ways to customize comment forms on the Blogger blog. We introduced the most influential and early version of the blog space with the Facebook comments plugin, customized blog spot comment form, then blogger comments, Google+ comments, and now finally rotating comments to reflect your blog. A practical demo of this feature can be found on our blog. You will find that the feedback policy has a good title with anchor link, total number of comments, and response form. Both the underlying concepts and the parental response are designed differently. The author's comments are designed with ribbon in the upper right corner.


Each comment is automatically counted using the CSS3 counter-reset property. I am sharing the correct stylesheet used in MBT as a gift for my readers. Let's start with the code!

Customize Your Comments Format!

We will overwrite your default comment styles with your custom CSS code. We customize almost everything by removing responses and removing links from profile avatar images. All you have to do is carefully follow the simple steps given below:

  1. Go To Blogger > Template
  2. Backup your template - You must keep a backup of your copy if incase you wanted to undo steps
  3. Search for this piece of code:
<b:includable id='threaded_comment_css'>


   
Fancy Blogger Comments with Comment Counter!

  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 MBT starts */                 

    
.comment-thread ol {      
                counter-reset: mbt-comments;       
}       
            .comment-thread li:before {       
            content: &quot;\25C4&quot;counter(mbt-comments) &quot;\25BA&quot;;       
            counter-increment: mbt-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: mbt-comments-sub;       
              padding-top: 20px!important;       
              margin-bottom: 25px;       
}       
            .comment-thread li li:before {       
            content: counter(mbt-comments) &quot;.&quot; counter(mbt-comments-sub);       
            counter-increment: mbt-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 MBT  ENDS*/
Create these customizations:

To be honest, you should use the browser analyzer to refine and style all the missing locations. Because each template is coded differently, this design may differ slightly from the way it appears on your blog. So use chrome and its review element to do the right thing.

  •  highlighted in yellow indicate the hexadecimal code for the two arrows surrounding the opposite number. You can change this if you know how to edit the contents of the property and leave the default.
  • The brown highlight code indicates the icon next to the answer and deletes link. If you want, you can replace it with your custom image link.
  • The green highlight code indicates the admin ribbon. You can change it if you want 
  • Exclude all other default styles because if your blog does not have a black background, they will have a light background.
4. Find the next #comment h4 and change this CSS ID completely:

#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, you're half done!

Comment on header design 


The included comments use an iframe comment box that cannot be customized if we do not use jQuery. So I deleted the message that appears at the top of the comment box and the message that appears at the top of the comment box. Go to Blogger> Posts and Comments We have previously added a form to the message above. I removed that option and offered a more flexible way to warn viewers about the concept policy.


how it works

Do you remember the expansion / collapse ceremony created to cover the comment box? We will use the same script here and create an optional tab for the response policy.

Be careful here:

1. Within your template search:

<b:if cond='data:post.numComments == 1'>

This code will now appear in your template a total of 2 times, with the same format as the code below:

Note:-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 change the entire yellow highlighted area of ​​any message to show it to your readers. You can also add links, photos, video news! You want to guide your audience to avoid spam.

 

Make any Comment Title:

If you click on the policy link under consideration, the message will come down. When you click on it again, it collapses and hides the message. We will use the Jquery SlideToogle function to use this effect. I have also added a Google link to the font "Open Sense Capacitors" to style 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>

 
If you have already included the JQuery library resource link in your template, do not add bold code.

  2. Save your template and you're all done!

need help?
Oh of course! You may need a lot of customization help, but calm friends, any help I need is needed. Hope the new concept theme adds a new life to your blog and makes your blogging journey more exciting. Please do not forget to spread this knowledge and share it with your friends and loved ones. May God's peace and grace be with you all! :)


LookClosedComment
Cancel