Hello Readers Iam Back With New jQuery Effect In My Previous Post I Disqussed About How To Make Buttun Badge
- What Is Expand/collapse
With This jQuery Effect U Can Easily Hide Your Comment Box
U Can See Below How Its Working Its Very Cool
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.
- Go To Blogger > Template
- Backup your template
- Click Edit HTML
- Click Proceed
- Click Expand Widget Templates
- 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'/>7. Now search for ]]></b:skin> and just above it paste the following CSS code
<script type='text/javascript'>
$(document).ready(function(){
$(".toggle_container").hide();
$("h3.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
});
});
</script>
/*----- 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....
.png){kind=logo}
Click Here To add Comment In Bloggers Crunch
Get This