Add Expand/Collapse Blogger comment Box To Blogger

After a lot of testing and hard work, i was able to bring you one of the best widget to spice up your comment box, as you all know that making your blog/site attractive is a very complicated task, which some designers/developers find it so difficult in customizing or adding effect to the comment box. Now this tutorial will show you How To Add Expand/Collapse Blogger comment Box To Blogger.

Expand/Collapse Blogger comment Box Demo

LIVE DEMO

How To Add Expand/Collapse Blogger comment Box To Blogger

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

</head>

• Now replace it with the code shown below

<style type="text/css">
 h2.trigger2 {
padding-left:50px;
margin:10px 0px 10px 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpnU1u_TRIZcykG9uNfKG3InWoTYpXuiyezkILrdcWPUG6oPyIpcNt4CSJoOdePIJkpM-J3CV7N9BXH3uhxK0rIxe74zmPv-QPYwF6oX02zlpVPYUXzh-y_9ACk0blJ1YpwKoip2S24IY/s1600/h2trigger.png) no-repeat;
height: 46px;
line-height: 46px;
width: 580px;
font-family:"Francois One";
font-size: 1.4em;
font-weight: bold;
text-align:left;
color:#fff;
float: left;
cursor:pointer;
}
h2.active {
background-position: bottom left;
}
.toggle_container2 {
padding-left:10px;
overflow: hidden;
clear: both;
}
</style>
<script type='text/javascript'>
$(document).ready(function(){
   
    $(&quot;.toggle_container2&quot;).hide();

    $(&quot;h2.trigger2&quot;).click(function(){
        $(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
    });

});
</script></head>

• To change the width of the button edit width: 580px
• Now Find the code shown below using [ctrl+F]

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

• Now Paste the Code Shown Below just below/after it

<h2 class='trigger2'>Click to Add a New Comment</h2>
<div class='toggle_container2'>
<div class='block'>

• And 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.mybloggertools.org/2012/07/add-expandcollapse-blogger-comment-box.html' style='color:#CAC8C8;'><i>Get This</i></a></p></div></div>

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

Like it? Share it.