Mybloggertricks(MBT) like blogger comment(Expand/collapse)


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

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;h3.expand&quot;).click(function(){
$(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
});
});
</script>
Hint:-
h3.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://truebloggertricks.blogspot.com ----*/
h3.expand {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPEdC-sJjSxNokR8EhbC2Bp5VPnjnciiHd8S5Fx8TFHOcSVwBM7SC_Vda7GvN5RSongfPrT6Xo3VwAmtY3nciwUXF4wGBFpvY3iAPTqFBS57TP902R7-PqTBrrdOZRVX0Bz9c5mDG1Pl8/s1600/comment-boxbg.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;
}
h3.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.
<h3 class='expand'>Click Here To add Comment</h3>
<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'>
<h3 class='expand'>Click Here To Add Comment</h3> 
<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.

11 comments:

  1. Hi,
    Thanks for sharing this...I've added it, but it doesn't show at all on my blog...any idea?

    ReplyDelete
  2. bro the picture not working can you help me...i put in this blog.BLOGGER Tips and Tricks!

    Thanks..looking forward to reply you soon..

    ReplyDelete
    Replies
    1. thanx bro,I have changed the image url.I think it will work now.

      Delete
  3. it is not working for all post
    (www.gyrohacks.com)

    what is the reason?

    ReplyDelete
  4. thanx and can u tell me how to add that pic like mbt

    ReplyDelete
  5. hey please clone MBT"s new tempalte.....IT is just great Plzzz Clone it Thanks...You are the best cloner I ever seen

    ReplyDelete
  6. its not working i tried all sites to add expand comment but nothing what the hell is can u help me

    ReplyDelete
  7. Your article is very helpful to build a web developer. I appreciate your thinking. Your post is too brilliant Thanks for sharing with us.

    ReplyDelete

Please don't spam. We hate spammers