Expand/Collapse Blogger comment Box with jQuery

 

Blogger comment form is the only section in Blogspot blogs that still irritates users a lot of bloggers.  After successful customization of this form by changing the background to make the dull one look really beautiful, 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
2. Expand/Collapse Blogger comment Box with jQuery

How it works?

This 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.

Copyright

The CSS codes below are copyrights of MyBloggerTricks blog. All Scripts are copyright of this 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. Any copyright infringement shall result in your blog being reported to AdSense, Blogger, and DMCA.
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. Let’s get to work now.

  1. Go To Blogger > Template
  2. Backup your template
  3. Click Edit HTML
  4. Click Proceed
  5. Click  
  6. 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(){
   
    $(&quot;.toggle_container&quot;).hide();
 
    $(&quot;h3.trigger&quot;).click(function(){
        $(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
    });
 
});
</script>

7.  Now search for  

]]></b:skin>

and just above it paste the following CSS code

/*----- Comment Box by www.shady1hacks.blogspot.com ----*/

h3.trigger {
    background: url(http://4.bp.blogspot.com/-w6rbdy4LCtI/UKdcV7jX1aI/
AAAAAAAAIAw/ekWT8oI7JZw/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 pastes 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.mybloggingtricks.com/2013/01/expandcollapse-blogger-comment-box-with-Jquery.html'
 style='color:#CAC8C8;'><i>Get This Comment Form</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 tutorial. You can customize the background theme to breathe a new life in the same commenting system that once looked really dull and simple.

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

Need help?

If you need any help just let me know. I just hope this new tweak proves useful for most of you. I would love to hear your thoughts on this latest widget. Do not forget to share it! 🙂 Take good care of yourselves and your loved ones. Peace and blessings pals.

 

Leave a Reply

Your email address will not be published. Required fields are marked *