Kindly also check out previous tutorials below to add even more fun.
How it works?
This idea came in my mind by reading an interesting discussion between some fellows at stackoverflow. The discussion was a little confusing at first but a little focus made it to this structured code. All this functionality does is that it hides the div sections in active mode but displays the content when clicked. You can see a live demo by clicking our comment box .
Credits
The codes below are copyrights of MBT blog. We therefore request both bloggers and developers to kindly attach an attribution link back to this page if they wish to share this tutorial with their readers.
Note: Most of our gadgets are redistributed with no credits attached. All such blogs are being repeatedly reported to both AdSense, Blogger and DMCA. Some readers are therefore advised to kindly use our resources only for non-commercial use only.
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>
7. Now search for ]]></b:skin> and just above it paste the following CSS code
/*----- Comment Box by www.MybloggerTricks.com ----*/
h3.trigger {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9_B75PHgOVVqkvnYnhicid6gls8JPVMwmvK8-5AkceqiDPBXstNgjGrcpu4RrdHdhFkvJUYF4wIGH-p_HE4l9Oit6b_9CGtksZER9KLr-2b7MebWPUiB5-4nGX5lSqhExcwhGydXZq0g/s1600/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'>
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.
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! :)
Need help?
If you needed any help just let me know. I just hope this new tweak proves useful for most of you. I would love to hear your thoughts on this latest widget. Do not forget to share it! :) Take good care of yourselves and your loved ones. Peace and blessings pals.
If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »
Mohammad
6/21/2012
Web Designing
,
Widgets
