Add On Click Expandable and Collapse ‘Comment Box’ for blogger

In today’s tutorial we bring you a wonderful idea of MBT known as expandable and comment collapsible widget for blogger. In the earlier post in this blog discussed about ‘How Quality of Comments can drive indirect backlink traffic to blog/website?’,. Comment box plays vital role like a mediator in between the author and subscriber.

If any reader/visitor lands on any blog and finds wonderful topic then to share views or to award appreciation or to find out solutions or to share related post links through comment box. Discussion box performs active position to increase traffic for blogs as well.

Readmore:

• How to increase blog/website traffic through comment backlinks?
• How to Add images/Videos in Blogger Comments?
• Add Emoticons and Smileys to blogger comments

Here in this article blogtariff would like to share beautiful developed Expandable and Collapsible Discussion box which is designed by MBT and developed by BTF on trigger based action. When readers wish to comment then on clicking Discussion widget button trigger the hided comment box will appear, by default comment box hidden in form of Discussion box button. Let’s begin the tutorial to add JQuery and animated effect comment button.

Readmore:

• Add Recent Comments widget with Avatar/Profile image
• Add Comment Count Popup to Blogger Post titles
• Change Comment Avatar image size

How to Add ‘Expandable and Collapsible Comment box widget’ for blogger ?

Sign into your blogger account

Select ‘Template’ link tab

Click on ‘Edit HTML’ link tab button

Now search for code

</head>

After finding code copy the below code and paste above to it

<!—Expandable and Collapsible Comment box Scripts Start-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
   
    $(&quot;.toggle_container&quot;).hide();
 
    $(&quot;h3.trigger&quot;).click(function(){
        $(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
    });
 
});
</script>
<!—Expandable and Collapsible Comment box Scripts Ends-->

Now Search for code

]]></b:skin>

After finding code copy the below code and paste above to it

/*----- Discussion Box by www.blogtarif.com ----*/
h3.trigger {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN9Ukq0kpDonOXzWTxIh0BaCcRxhB99bvwchYP2nXb_OVq9XxdZyQOGjg6zGDiq7shk_RvICVMCr7WgSpFX8boiHVSbabFdevYspAbBfN5KYkH65yiR10c-SLPJh-JEYBK3PRfjljUm2Y/s1600/comment-boxbg.png) no-repeat;
height: 44px;
line-height: 46px;
width: 520px; border-radius:4px;
font-family:Arial;
font-size: 1.4em;
font-weight: bold;
text-align:left;
color:#111111;
float: left;
cursor:pointer;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px;
}
h3.active {
background-position: bottom left;
color:#ddd;
}
.toggle_container {
padding-left:10px;
overflow: hidden;
clear: both;
}

Code Customization:

If you wish to change size of widget from value 520 to your choice value and Color #111111 by using our COLOR CHART

Now Search for code

<b:includable id='comment-form' var='post'>

After finding code copy the below code and paste below to it

<h3 class='trigger'>To Share Views - Click Here</h3>
<div class='toggle_container'>
<div class='block'>

Now just Scroll down you find this below tag

</b:includable>

After finding tag copy the below code and paste above to it

<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://www.blogtariff.com/2013/07/add-on-click-expandable-and-collapse.html' style='color:#CAC8C8;'><i>Widgets for Blogger</i></a></p>
</div>
</div>

That’s it you’ve done and see your experiment and enjoy this trick