Sunday, December 23, 2012

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

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>
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(http://4.bp.blogspot.com/-w6rbdy4LCtI/UKdcV7jX1aI/AAAAAAAAIAw/ekWT8oI7JZw/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

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.

4 comments:

  1. Every ωeeκend i uѕeԁ to pay a νisіt this ωeb page,
    а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

    ReplyDelete
    Replies
    1. thanx for visiting every weekend nd subscribe to rss to receive daily updates

      Delete
  2. I do not even know how I ended up here, but I thought this post was good.
    I 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

    ReplyDelete
  3. I couldn't refrain from commenting. Very well written!

    Also visit my web page - Payday Loans Online
    Also visit my page - Online Payday oan

    ReplyDelete

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:
1. To add HTML CODE in comments then please use our Instant HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon our review.
4.Click Subscribe by Email to receive Replies