Create A Expand/Collapse Comment Box For Blog With JQuery

Hello Friends , I am back with a great blogger widget that is how you can create a expandable and collapsible comment box with the help of JQuery. The blogger comment section is still irritate some users if your comment box is not special, so if you want that your users will gave you a good feedback on you blog by commenting then use this widget.. This widget 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. I will use the JQuery to create this button. It is good widget for you because it supports all type of browsers

Take A Look Over Our Other Blogger Widgets-

How To Install This Widget On Blogger?

Follow These Steps below To Add A Collapsable/Expandable Comment Box System-

1. Go To Blogger and Sign In.

2. Now go to Template>Edit HTML. (Note:- Backup Your Template Before Proceeding)

3. Search For - (Note:- Use Ctrl+F to open search box)

<head>

4. Now Paste This Code below <head>

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

5. Again Search For-

]]></b:skin>

6. Now Paste This Code Just Above ]]></b:skin>.

/*----- Expandable/Collapsable Comment System by www.Hackintricks4u.blogspot.com ----*/
h3.trigger {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuWwte6NmaGno6jimY8D_J5JzEN4NWEhkuDsrrq8kM7Viydy1AaOXcuEVOzeLHGXXBlObohH_KwcHnMkq2Qph0j7BKVFsTq4PBkFEgm-NiqzO7vPNOEENmroDsWQTHehxEDQ3hfxj0TC8/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.

7. Now Search For

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

8. Paste This Code Just Below It.

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

9. 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.hackintricks4u.blogspot.com/' style='color:#CAC8C8;'><i>HT4U Widgets</i></a></p>
</div></div>

10. Now Save the Template and See Your Blog Post . Now you will find a change in your comment box And from now your visitors will love to comment on your blog.

Need Help

As reading this article suggest that it is not harder to understand or apply this widget to your blog, but , in case if you think that it is harder or you have any problem with it then please tell us by commenting below or by filling our contact form. And if you like this article then please share it.

If you don’t want to get into a serious problem in editing a template then tell it to us (submit a request to us by commenting below) we will try to solve it for you absolutely free. This is a limited offer by hackintricks4u.blogspot.com to get their free services.

5 comments

Click here for comments

Samuel Jin

admin

December 21, 2014 at 5:11 AM ×

Nice Blog , keep posting more updates
did you know there is also more tricks at
www.helplogger.blogspot.com

Jimmy Son

December 22, 2014 at 9:10 AM ×

hello sir.... can you please tell me how we can hide widgets from a certain page? please it is very important for me... also try this-
http://mybloggerdesk.blogspot.com/

Harshit Gaur

January 1, 2015 at 6:08 AM ×

Thanks Brother for giving your Feedback .. keep visiting my site

Anonymous

May 3, 2017 at 1:42 AM ×

Thanks for good tutorial

felisha green

May 5, 2020 at 2:22 PM ×

I Want to use this medium in appreciating cyber golden hacker , after being ripped off my money,he helped me find my cheating lover he helped me hack her WHATSAPP, GMAIL and kik and i got to know that he was cheating on me, in less than 24 hours he helped me out with everything, cybergoldenhacker is trust worthy and affordable contact him on: cybergoldenhacker at gmail dot com