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(){
$(".toggle_box").hide();
$("h3.expand").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
});
});
</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
<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>6. Paste two div closing tags just before its closing includable tag as shown below.
<div class='toggle_box'>
<div class='block'>
<b:includable id='comment-form' var='post'>7. Finally Save your template and view your comment form.
<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>
nice
ReplyDeleteHi,
ReplyDeleteThanks for sharing this...I've added it, but it doesn't show at all on my blog...any idea?
Can u give me your blog address for ref?
DeleteThanks for this dude,,brilliant idea...
ReplyDeleteBLOGGER HEROE,Tips and Tricks For Blogger,widgets,Templates
bro the picture not working can you help me...i put in this blog.BLOGGER Tips and Tricks!
ReplyDeleteThanks..looking forward to reply you soon..
thanx bro,I have changed the image url.I think it will work now.
Deleteit is not working for all post
ReplyDelete(www.gyrohacks.com)
what is the reason?
thanx and can u tell me how to add that pic like mbt
ReplyDeleteits not working i tried all sites to add expand comment but nothing what the hell is can u help me
ReplyDeleteYour article is very helpful to build a web developer. I appreciate your thinking. Your post is too brilliant Thanks for sharing with us.
ReplyDelete