1058 followers
Follow us on Twitter!
260 followers
Join us on Facebook!
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.
Windows Reloded, Download Latest Softwares
- 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>
7. Now search for ]]></b:skin> and just above it paste the following CSS code
/*----- Comment Box by www.windowsreloded.blogspot.com. ----*/Windows Reloded, Download Latest Softwares
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: 518pxWindows Reloded, Download Latest Softwares
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'>
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>
</div>
</div>
See the image below to see you have followed the steps correctly.
Windows Reloded, Download Latest Softwares
10. Save your template and all done!
You can customize the comment form by reading our previous tutorials. You can choose over one thousand background themes to breath a new life in the same commenting system that once looked really dull and simple.
Visit your blog to see your blog in completely different neat look. Your visitors will love to comment now! :)Windows Reloded, Download Latest Softwares
0 comments: