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>
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://blogg-tricks.blogspot.com ----*/
h3.expand {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidckZ-mUsaLy6k9Q-Qkq-pi5g9tGlcpIBNb2An1A23LncRSz7RheiRUXOjUVa8Bf4mVPeKyf4HXvpKqGp9s0Njl8iFmuhshB5xFPVn_ZsN-Sf_ST1oyaERbaMJF3PRYq586x8bsJ_CJ4c/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;
}
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>
Hi! I am P.Harikesh,founder of this blog.You can find many blogging tricks and tips in this blog.
Every ωeeκend i uѕeԁ to pay a νisіt this ωeb page,
ReplyDeleteаs i wіsh foг enjoyment, fοr the геason that thiѕ this web
page conationѕ гeallу faѕtidiouѕ
funny ԁаta too.
Check out my wеb-ѕіtе ... cheap payday loans online
My blog : Pay Day Loans
thanx for visiting every weekend nd subscribe to rss to receive daily updates
DeleteI do not even know how I ended up here, but I thought this post was good.
ReplyDeleteI do not know who you are but certainly you're going to a famous blogger if you aren't already ;) Cheers!
Here is my web blog :: Mayan calender
I couldn't refrain from commenting. Very well written!
ReplyDeleteAlso visit my web page - Payday Loans Online
Also visit my page - Online Payday oan