Expand/Collapse Blogger comment Box with jQuery

Blogger comment form is the only section in blogspot blogs that still irritates users a lot. After a successful customization of this form last year we now took a step even further to integrate jQuery slideToggle and accordion effect into it. Luckily major browsers now do support JavaScript library so this widget is compatible with all browsers. The tutorial today will help you to create a beautiful expandable and collapsible huge button that will display comment form by sliding down smoothly when triggered and hide it when clicked again. We will be using simple jquery functions to enable a button to show/hide all div sections that hold the comments box.

Kindly also check out previous tutorials below to add even more fun.

Blogger Comment Box Series

1. Customize Blogger Comment Form

2. Comment Form with Black Background Theme - Just like ours!

3. Over 1000 Background Themes For Blogger Comment Box!

4. Expand/Contract Blogger comment Box with jQuery

How it works?

This idea came in my mind by reading an interesting discussion between some fellows atstackoverflow. The discussion was a little confusing at first but a little focus made it to this structured code. All this functionality does is that it hides the div sections in active mode but displays the content when clicked. You can see a live demo by clicking our comment box .

Credits

The codes below are copyrights of MBT blog. We therefore request both bloggers and developers to kindly attach an attribution link back to this page if they wish to share this tutorial with their readers.

Note: Most of our gadgets are redistributed with no credits attached. All such blogs are being repeatedly reported to both AdSense, Blogger and DMCA. Some readers are therefore advised to kindly use our resources only for non-commercial use only.

Install on blogger

The installation guide is extremely simple. We have kept the steps as clear as possible. You just need to copy and paste the codes as guided. Lets get to work now.

Go To Blogger > Template
Backup your template
Click Edit HTML
Click Proceed
Click Expand Widget Templates
Just below <head> paste the following code:

<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(){

    $(".toggle_container").hide();

    $("h3.trigger").click(function(){
        $(this).toggleClass("active").next().slideToggle("slow");
    });

});
</script>

7. Now search for ]]></b:skin> and just above it paste the following CSS code

/*----- Comment Box by www.MybloggerTricks.com ----*/

h3.trigger {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-jNmAz-vfW1-I6tzjymFfxPrB_qOmIKEoopKbhG4rhxjhgi7hKv5c0zdE22WIOJCgnfZtDUCt1m55GoxllfCnuX-zmB7RRuKwrpgG0ALB4Hn1TlpxMokzFl2HjRYkykS3AxfO52g0Vxo/s1600/comment-boxbg.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px; border-radius:4px;
font-family:Arial;
font-size: 1.4em; font-weight: bold;
text-align:left;
color:#A1A1A1;
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;
}

To change the width of the button just edit: 518px
To change the color, font size, font type of the text "Click here to add Comment" edit the highlighted part of the code.

8. Next search this:

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

9. Just below it paste the following code:

<h3 class='trigger'>Click Here To add Comment</h3>
<div class='toggle_container'>
<div class='block'>

and just above </b:includable> paste this code:

<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://www.mybloggertricks.com/2012/05/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'><i>Blogger Widgets</i></a></p>

</div>
</div>

See the image below to see you have followed the steps correctly.

10. Save your template and all done!

You can customize the comment form by reading our previous tutorials. You can choose over one thousand background themes to breath a new life in the same commenting system that once looked really dull and simple.

Visit your blog to see your blog in completely different neat look. Your visitors will love to comment now! :)

Wednesday, 7 September 2016