Saturday, 8 September 2012

Expand/collapse Your Comment Box In Blogger With jQuery

0 comments
Hello Readers Iam Back With New jQuery Effect In My Previous Post I Disqussed About How To Make Buttun Badge


  • What Is Expand/collapse
Blogger comment form is the only section in blogspot blogs that still irritates users a lot.  After a successful customization We Make This Expand/collapse For Blogger Comments Like Ours

With This jQuery Effect U Can Easily Hide Your Comment Box 
U Can See Below How Its Working  Its Very Cool

create an animated gif

How To Install on blogger

The installation guide is extremely simple. We have kept the steps as clear as possible. You just need to copy and paste the codes as guided. Lets get to work now.
  1. Go To Blogger > Template
  2. Backup your template
  3. Click Edit HTML
  4. Click Proceed
  5. Click Expand Widget Templates
  6. Just below <head> paste the following code:
<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_container&quot;).hide(); 
  
    $(&quot;h3.trigger&quot;).click(function(){ 
        $(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
    }); 
  
}); 
</script>
7.  Now search for ]]></b:skin>   and just above it paste the following CSS code
/*----- Expand/collapse Comment Box by www.bloggerscrunch.blogspot.com ----*/
h3.trigger {
background: url(http://mybloggertricks.googlecode.com/files/comment-boxbg.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px; border-radius:4px;
font-family:Arial;
font-size: 1.4em; 
font-weight: bold;
text-align:left;
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_container {
padding-left:10px;
overflow: hidden;
clear: both;
}
  • To change the width of the button just edit: 518px 
  • To change the color, font size, font type of the text "Click here to add Comment" edit the highlighted part of the code. 

8.    Next search this:

     <b:includable id='comment-form' var='post'>

 9.   Just below it paste the following code:
<h3 class='trigger'>Click Here To add Comment</h3> 
           <div class='toggle_container'> 
 <div class='block'> 

 10.   Now Search For This </b:includable> And Just Above paste this code:
<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://bloggerscrunch.blogspot.com/search/label/Blogger%20Widgets' style='color:#CAC8C8;'><i>Blogger Widgets</i></a></p>
         </div>
         </div>

 11. Save your template and all done!

For More Blogger Tricks Like This One Vist Our Blog Frequently And Stay Conneted With Us 
I Hope You Like This.. If You Have Any Questions Regarding This (Expand/collapse Comment Box Effect) Comment Below .. 
Dont Forget To Share Your Reviews Below....

Click Here To add Comment In Bloggers Crunch

Leave a Reply

Get This