Blogger comment form is the only section in blogspot blogs that still irritates users a lot. After a successful customization of this form last year we now took a step even further to integrate jQuery slideToggle and accordion effect into it. Luckily major browsers now do support JavaScript library so this widget is compatible with all browsers. The tutorial today will help you to create a beautiful 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.
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(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'>
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.
Filed Under: Blogger Widgets and plugins, Web Designing
If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you
Subscribe to our regular Email Updates!
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 »
108 comments:
First to Comment Again :)
I deserve an Award for this :P
It is AWESOME !
I just saw it today .....
Thanks ALot
@Hamxa WasimIt's just text instead of the button
i'm waiting for this tutorial..
haha..
Nice Post...
JayRyan'sBlog was inviting you to be a Guest Post Author..
Thank you so much.
-jayryan09-
yeah...nice post...and thanks for interlinking with others..this helps alot...:D
YouTube Widget
Regards,
ProBloggers
Very nice tutorial bro. But i was studying on this script from 2 days n you posted it earlier than me. . I am also studying this from stackoverflow. Please don't mind when i post this tutorial with attribution of stackoverflow.
How To Get Genuine Adsense Approval
Bro, for your reference i was already working on this code. .
$(document).ready(function(){
$(".togglebox").hide();
$("h2").click(function(){
$(this).next(".togglebox").slideToggle("slow");
return true;
});
});
Brother it is possible to move and set above first comment? it will be look better and easy. am right? I Know you can.
Brother it is possible to move and set above first comment? it will be look better and easy and need easy color Customization.
Thanks
nice tutor.. thanks for sharing..
Instead of black background can we use other colors background?
Regards
Technology Blog
It is AWESOME series.Top 30 Most Useful Website For Everyone
Thanks Again!
Nice Post... Thanks Mohammad
Top Blogging
Tricks Ever Seen..
Thanks its amazing and its unique thing to every blogger. Nice post keep posting new articles
Stylish Blogger Threaded Comments With Author Comments
nice work bro keep it up its a really nice tutorial : offshore hosting
Yeah i was waiting for this post :)
thanks bro successfully added on my blog http://nannu4u.blogspot.com/
I feel really nice reading these articles I mean there are writers that can write good material.
Web Development
After following your instructions and implementing the same in my blog. When I save my template, blogger prompts me with the following error code:
Error code: bX-to3x02,
What could be the problem?
Nice Post brother
Tech Blog
woahoo cool but mustafa please provide a tutorial for making it look like the one you have in your blog!
1:Copying Blogger Widgets
2:Dota2 Invite Giveaway
i am only getting the text , no button Plz help
Thank you so much Sir, I have added this with my facebook social plug-in comments :)
@haider
You surely deserve an applause always young champ. :p
@Hamxa
Its a button with text on foreground. Its clickable pal :)
@vijay
If you understood the discussion out there and created your own code then sure you deserve all the credit. Proud of you :)
@si
Yes dear you can do that but I wont advise that you move the entire iframe box. Instead you can simply use this image :
http://mybloggertricks.googlecode.com/files/comment-boxbg.png
and link it to #comments. Place this image at the top so that when visitors click it they will be brought straight down towards the Expandable box. Try it and let me know :)
@Felix
If blogger is giving error then instead of using the code in step#6 please paste this code instead just below <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='http://mybloggertricks.googlecode.com/files/expandablecomments.js' type='text/javascript'/>
@meesum
You can follow the tutorial series to create an exact same customized comment box :)
@tanmay
Check if you have paste the CSS styles in step#7 correctly
@prime
congtax pal! :d
it is showing an error
Dear sir it is not working. In fact the original comment tag is not working in my present blog. I have tried lots of templates but could not succeed. In my dummy blog it appears. Once i have converted my blog into three coloumn and from then onwards the comment tag is not visible. If you kindly help me out than i shall remain grateful to you. Thanks. My blog url is http://parthasarathi108.blogspot.com
Thanks :)
Added to facebook comments
Looking so good on my blog after making some minor changes to CSS code and image.
How to disable anonymous comments but allow people to still write in "Name/URL"? That feature is missing in Blogger.
JayRyan'sBlog
Plz help i am getting this error :
"b:includable" must be terminated by the matching end-tag "".
Please reply :>
NIce I like it.
Face Blog
Plzz i request u bro :*(
Just coz i am an indian it doesnt mean u start ignoring us
it is not working in my blog...i lost 2 hours for this. is there any better way to do it
Wonderful blog & good post.Its really helpful for me, awaiting for more new post. Keep Blogging!
cleveland web development
Ohkay Thanks Mustafa!
Blogging Tips
please how can i create a comment box like your comment box
hi every body ...
i am very interesting with your comment box .
how can i create this for my website
plz help me
thanks.....................
FOR entertainment follow :http://laugher28.blogspot.in/
plz
h3. tag is not SEO friendly muhammad h2. tag use nahi ho rha ,,kia kru iska?
Plz help i am getting this error :
"b:includable" must be terminated by the matching end-tag "".
learn video marketing
http://www.guntalielman.com/learnvideomarketing
learn video marketing: http://www.guntalielman.com/learnvideomarketing
learn video marketing
my URL is: http://www.guntalielman.com/learnvideomarketing
"learn video marketing
http://www.guntalielman.com/learnvideomarketing" thank you, i like this
pandora charms
Thanks a lot for this article.. Dear i apply this on my blogspot but some problem is coming in my blogspot and not working 100%,
Kindly visit my blog(www.creativitymindideas.blogspot.com) and click on any post title and come in the bottom of page then you see problem box "Click here to add comment" is going out and text is on side. plz tell me how can i fix that problem.
didn't worked :( please help www.dstuffs.co.cc
I made My Site Like yours but i have some problems in the comment sections :(
regards
http://myblogginglab.blogspot.com
Well im a trader how can i can make blogspot for all new traders and investers...can i have the blogspot for stock queries from new persons how can they add my link because im forex tarder that makes easy to invest on online and get share money soon....
Online forex trading
http://www.forexbulls.com
Can YOu Add This To my Blog ??? Email Me IF YOu Can... Plzzz
All tools you need for running a business. New Tools.
By making your tweets interesting, you make our job easier by leaps and bounds. We ensure a steady stream of Twitter followers on your account in a specified period of time. Most people, who aim to increase their Twitter fan following, buy followers from companies or sellers. You can buy Twitter followers from us, but we assure you they are real people with real Twitter profiles. The real followers will not only 'follow' you on Twitter, they will comment on your tweets and interact with you. Avail our services and see the earnings go up like never before.
buy twitter followers
I was looking for something like this for sometime ..
I actuallly want to use Disqus for commenting .. will try .. if expand-collapse style would be possible even while using discus ..
Mandy Sheen
thanks for this post, how do I get this into the container, it seem to only sit at the bottom without getting in like yours, u can have a look by http://blueblockng.blogspot.com/2012/10/stolen-oil-stolen-revenue_8538.html
its not working for me i am using chromgt template
can u plzzzz help me out wht to do
It shows that ; is missing. I am using blogger simple template. Please tell me how can i solve the problem. Here is blog http://freelancingtutorials.blogspot.com/
Thank you very much Mohammed Bro.
Yaqoob Zone
Thanks Mustafa!
nice blog & very good post.Its really helpful for me,
Hello,i used your site too many times and it helped me so much that i'm here to say thanks. now,I'm stuck with back-links, i am building so many back-links these days and Google still saying i have 0 back-links!Can you help me with that , please try to help me.
This is my website , Download latest bluray hd movies and music videos in 720p and 1080p from mediafire and torrents free
Tank you soo much admin!! just love your blog :)
Check my site www.theepiblogs.blogspot.com and tell me if i can improve it :)
hey mohammad thnk you so much for all your helps but this time your code dint work out for me. it works well for old posts but nt for the new ones.
the comment box doesnt expand on clicking.. plz help, m loosing my valuable comments...
my old links- http://theepiblogs.blogspot.in/2012/11/best-android-smart-phone-rs10000-rs.html
my new link- http://theepiblogs.blogspot.in/2012/11/i-am-alive-game.html
the comment box doesnt work in my new posts.. plz help
It didn't worked properly.. but now comment form for the post "Next Android OS after Jelly Bean" is not showing....
pls check and find a solution to fix it.
thanks
ohh Wow you have amazing blog. I congratulate for this
Website design
Not working on my blog.
http://android-xtreme-apk.blogspot.com/
itz not working for my site:
www.coizome.blogspot.com
please check it out
Brother, please update this. The image link that is : http://mybloggertricks.googlecode.com/files/comment-boxbg.png
showing error 404 and not working in script..
So please update/reupload the image...
thanks
India Education News
hello musTafa !! It Can Be ":includable id='comment-form' var='post
" Doesn't exist In my HTML CODE
?.. Becouse I Did'not Found IT !! HELP mE pLEASE BROTHER . thank You ♥
Notice: my Blog : http://gamiinghero.blogspot.com/
Not Working Man ! I NEED Your Help. !
I did all steps , then The Box Of Click Here To Add Comeent Come , But if any one click on it then It is not Working ! Link Is not working i mean ! Please help Fast ! Advance THANKS !
Hi i am using iframe full height in my blog.
Used CSS is:
#iframe {
height: 100%;
width: 100%;
display: block;
border:0;
margin:0;
padding:0;
}
and Javascript is:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'/>
<script>
var height = window.innerHeight;
$undefineddocument).readyundefined functionundefined){
$undefined'iframe').cssundefined'height', height)
} );
</script>
and HTML is:
<iframe id="iframe" src="http://mybloggertricks.com"></iframe>
It shows full height perfectly in all browsers without IE, how to get full height in IE. Please help me in this.
see that blog here:
http://new-temp.blogspot.com/2012/12/my-blogger-tricks.html
I had tested this in Dreamviewer with the same above attributes it's working fine in IE also. But only in blogger it's not working in only IE browser. Please help me anybody on this problem Please Help
@Mohammad Mustafa Ahmedzai
I applied all steps, but the trigger button's background is transparent.
Please tell me how to solve it.
My Blog
The above image is not hosted.
Replace it with this one:
http://4.bp.blogspot.com/-w6rbdy4LCtI/UKdcV7jX1aI/AAAAAAAAIAw/ekWT8oI7JZw/s1600/comment-boxbg.png
My Blog ••• Web Developer / Designer
Did not work
Asalam-o-Alaikum!
i want to ask that in my blog, there are extra options present below comment box like "Create a link","Subscribe to: Post Comments (Atom)" and other also... please brother help me ! how can i remove these. . .!
my blog is : http://itnewscorner4u.blogspot.com
Muhammad Please help i can't explain my comment box problem by typing just simply see this pic then you ill get
http://lh3.googleusercontent.com/-Qqqd63GpOpU/UP8CiouJz5I/AAAAAAAAADI/2ct78DBYDuk/s912/Capture.PNG
when some continue typing without pressing enter for next line then this happens??????
It's not hiding my comment box. the comment box is already there when the page loads, and when the button is clicked, it's still there. nothing happens.
Uniblue PowerSuite Pro 2013 Thanks dude, nice Post .good admin Thnaxxx
Hi, you explained the topic very well. The contents has provided meaningful information thanks for sharing info
Free Premium Wordpress Themes
@Mohammad Mustafa Ahmedzai
THANKS.. :)
salam its not working ap nay kaha ke ye ap ke jesa ho jae ga likin ye to jahan par pehlay se comment hai wahan to kuch show hi nai ho raha plz help to solve this
Sir, my name is Hasibul Hasan.
Sir, how can i add multiple code box inside blogger post? like your site.
I added it but when i expand it, it expands and collapse and then expand. If i collapse it, it's collapsed, expanded and then collapsed. Why this? www.gameguidist.com
http://honney2bunny.blogspot.in/p/home-page.html
It does not work
If the above coding is not working visit here http://www.sundhercse.com/how-to-add-expandcollapse-blogger-comment-box/
@shoaib khan
If the above coding is not working visit here http://www.sundhercse.com/how-to-add-expandcollapse-blogger-comment-box/
@umair aliIf the above coding is not working visit here http://www.sundhercse.com/how-to-add-expandcollapse-blogger-comment-box/
@Kader LocoIf the above coding is not working visit here http://www.sundhercse.com/how-to-add-expandcollapse-blogger-comment-box/
@Noman khanIf the above coding is not working visit here http://www.sundhercse.com/how-to-add-expandcollapse-blogger-comment-box/
@crazygrapeIf the above coding is not working visit here http://www.sundhercse.com/how-to-add-expandcollapse-blogger-comment-box/
@Umais Bin SajjadIf the above coding is not working visit here http://www.sundhercse.com/how-to-add-expandcollapse-blogger-comment-box/
@Rahul SethiIf the above coding is not working visit here http://www.sundhercse.com/how-to-add-expandcollapse-blogger-comment-box/
@android-xtreme-apkIf the above coding is not working visit here http://www.sundhercse.com/how-to-add-expandcollapse-blogger-comment-box/
@VivekIf the above coding is not working visit here http://www.sundhercse.com/how-to-add-expandcollapse-blogger-comment-box/
@Hari keshIf the above coding is not working visit here http://www.sundhercse.com/how-to-add-expandcollapse-blogger-comment-box/
@shaswat shahIf the above coding is not working visit here http://www.sundhercse.com/how-to-add-expandcollapse-blogger-comment-box/
Its not working on my blog
http://thetrickslab.com
Not Working in my blog: http://gamingtracks.blogspot.in/
Brother it is not working in my blog please help !!!!
I have tried it!!
it looks nice but not working
Help!!
http://amazinghemant.blogspot.in/
@Prime Aque
Hy Aque....Buddy Can You Please Tell How You Did That ? or can you give me link from i can also add facebook expand/collapse comment box...I've added Simple Facebook Comment Box for My Site.But i want it to be collapsed,only open when ever a user clicks on it....I Can add this expand/collapse blogger comment box..but the problem is i dont want to use blogger comments.
I've searched on Google But couldnt found any expand/collapse facebook comment box...
I need help with the new blogger template. I can't find the comments, in the HTML code.
Mustafa you are my ideal.
plz visit my little movies blog http://440kajhatka.blogspot.com/
Click Here To add Comment
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. No cheesy/spam Comments tolerated Spam comments will be deleted immediately upon our review.
Regards,
Mohammad