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/AVvXsEjCNSmN2Pa4TrCl2X4rHh4YF__YnzZ4NOpaqJQXcexgowQ8hYcTSrT3emXiTSuw77E6A2cCTQwXzHTqV30TQKtFId8CRLBE4Tt3QXcbyf_Bbce8Bk5mSVzHJWq0qq4HQ_JpLpZWQ69rRYw/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>
0 nhận xét: