Blogger comment form is the only section in blogspot blogs that still irritates users a lot.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.
This idea came in my mind by reading an interesting discussion between some fellows at stackoverflow. 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 .
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>
- Now search for ]]></b:skin> and just above it paste the following CSS code
h3.trigger {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuT-zUN-Yctb75evZmFp8X-QI-LjgLR-BZkEBYwsv5p1XNCKSUNNORbZs9uMD9bME1gTUjD7EJw4u5nGWDLHaDJ3EUUa-6X_Xm3LNfEWg2FhsNI_eVf2QnyAqNzXFufE6YUKFL_zdkxlw/s1600/h2trigger.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.
- Next search this:
<b:includable id='comment-form' var='post'>
- 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.
- 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! :)
Credit: My Blogger Tricks
About Author
Hi! I am Sarath S Pillai, currently live in Kerala, India. A young Web Designer, Pro Blogger, Print Media Graphic Designer & an addicted Web Developer. 
1 comments:
hey its not working plz i want to add this just like your comment type jquery plz help me
hbumairali@gmail.com
Click Here To Add Your Comment
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note: Please do not spam. Spam comments will be deleted immediately upon our review.
Regards,Sarath S Pillai
Cool Dood Tricks