Expand/Collapse Blogger Comment Form using Jquery

By Ayman H Saturday, July 7, 2012
blogger comment form
In my previous posts, i have given you the most of tutorials regarding both Jquery function and Blogger Comment form customizations. The only drawback that can be noticed in both of these concepts is that the blogger comment form is still in its old traditional appearance and may be the blogger team not felt it more important to bring some extra features in blogger comment form. So i myself thought of merging these two concepts and give some special effect to blogger comment form.
Finally i decided to implement some sort of Jquery toggle function and make the blogger comment form more inspiring one and in the same aspect I choosed the Jquery Toggle effect on mouse click event for this and the live demo of it can be clearly viewed in the comment form of this blog.
As i was quite busy in my life schedule, it took me some days to start moving with this Blogger comment series. So today i am going to give you the brief tutorial on adding the Jquery toggle effect to your blogger comment form to bring the accordion effect in it thus inspiring your blog visitors to comment on your blog.

Expand / Collapse Blogger Comment Form Using Jquery Toggle

As i have stated in the Jquery toggle effect series that Stackoverflow holds the credit. The idea of this toggle effect is mainly obtained from the conversion between two fellow bloggers at Stackoverflow.

Implementing Jquery Toggle Effect

1. Go to blogger dashboard > Template > Edit Html ( Tick the Expand widget Template option).
2. Find for <head> tag and place the following peace of code just below it.
<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_box&quot;).hide();
$(&quot;h4.expand&quot;).click(function(){
$(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
});
});
</script>
Hint:-
h4.expand is the class for your comment form headline that expands the contents[toggle_box] upon the mouse click on it.
Here toggle_box is the class of your comment form contents i.e., the content that should be displayed when expanded.

Style for toggle element and its content box

3. Now find(Ctrl+F) for ]]></b:skin> and place the following peace of style code just above it.

/* Toggle Comment Form by http://bloggerTricks.biz -*/
h4.expand {
background: url(http://bloggertricksdotbiz.googlecode.com/files/%5Bbloggertricksdotbiz%5Dtrigger1.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px;
font-family:Georgia, Times New Roman, Times, serif;
font-size: 1.4em;
font-weight: bold;
text-align:left;
border-radius:4px;
color:#A1A1A1;
float: left;
cursor:pointer;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px;
}
h4.active {
background-position: bottom left;
color:#ddd;
}
.toggle_box {
padding-left:10px;
overflow: hidden;
clear: both;
}
Hint:-
The Css style for the visible,active header and the content box is specified above. You can however easily modify it as you wish.

Adding Html Code

4. Now find for the following code.

<b:includable id=comment-form var=post>
5. Paste the following peace of code just below it.

<h4 class=expand>Click Here To add Comment</h4>
<div class=toggle_box>
<div class=block>
6. Paste two div closing tags just before its closing includable tag as shown below.

<b:includable id=comment-form var=post>
<h4 class=expand>Click Here To Add Comment</h4> 
<div class=toggle_box> 
<div class=block>
<div id=bt-form>
<a name=comment-form/><br/>
<h4 id=comment-post-message>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href=data:post.commentFormIframeSrc id=comment-editor-src/>
<iframe allowtransparency=true class=blogger-iframe-colorize frameborder=0 height=275 id=comment-editor scrolling=no src= width=580px/>
<data:post.iframeColorizer/>
</div>
</div> 
</div>
</b:includable>
7. Finally Save your template and view your comment form.

Conclusion :-
For any kind of help related to customization, leave a comment here and i would be pleased to help you on it pals.. Take Care . . Enjoy Advanced Comment System.. :)

Post Tags:

Blogger Tricks

Basic / Advanced tutorials on WordPress, Google Blogger, SEO, Earning online income, Website development tips, tricks, etc.

No Comment to " Expand/Collapse Blogger Comment Form using Jquery "