This tutorial will help you to create a expandable and collapsible huge button that will display comment form by sliding down smoothly when triggered and hide it when clicked again. We will be using simple jquery functions to enable a button to show/hide all div sections that hold the comments box.
It will thus look like below mentioned image.
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.
It will thus look like below mentioned image.
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'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".toggle_container").hide();
$("h3.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
});
});
</script>
- Now search for ]]></b:skin> and just above it paste the following CSS code
/*----- Comment Box by www.usefultricks.tk ----*/
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.
- Next search this:
<b:includable id='comment-form' var='post'>
- Just below it paste the following code:
<h3 class='trigger'>Click Here To add Comment</h3>
<div class='toggle_container'>
<div class='block'>
and just above </b:includable> paste this code:
<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://www.mybloggertricks.com/2012/05/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'><i>Blogger Widgets</i></a></p>See the image below to see you have followed the steps correctly:
</div>
</div>
- Save your template and all done!
1 comments:
thank u sir.
Click Here To add Comment
Blogger Widgets