Blogging Ethics

MBT Tube

June 21, 2012

Expand/Collapse Blogger comment Box with jQuery

expand/collapse blogger comment boxBlogger 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.

Blogger Comment Box Series
4. Expand/Contract Blogger comment Box with jQuery

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 .

collapsible comment box


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.

  1. Go To Blogger > Template
  2. Backup your template
  3. Click Edit HTML
  4. Click Proceed
  5. Click Expand Widget Templates
  6. Just below <head> paste the following code:

<script src='' type='text/javascript'/>
<script type='text/javascript'>

      7.  Now search for ]]></b:skin>   and just above it paste the following CSS code

/*----- Comment Box by ----*/

h3.trigger {
background: url( no-repeat;
height: 44px;
line-height: 46px;
width: 518px; border-radius:4px;
font-size: 1.4em;
font-weight: bold;
float: left;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px;
} {
background-position: bottom left;
.toggle_container {
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='' style='color:#CAC8C8;'><i>Blogger Widgets</i></a></p>



See the image below to see you have followed the steps correctly.

changing the comment form

    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 »

116 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. First to Comment Again :)
    I deserve an Award for this :P

    It is AWESOME !
    I just saw it today .....

  2. i'm waiting for this tutorial..

    Nice Post...

    JayRyan'sBlog was inviting you to be a Guest Post Author..

    Thank you so much.


  3. yeah...nice post...and thanks for interlinking with others..this helps alot...:D

    YouTube Widget

  4. 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

  5. Bro, for your reference i was already working on this code. .

    return true;

  6. Brother it is possible to move and set above first comment? it will be look better and easy. am right? I Know you can.

  7. Brother it is possible to move and set above first comment? it will be look better and easy and need easy color Customization.


  8. nice tutor.. thanks for sharing..
    Instead of black background can we use other colors background?

    Technology Blog

  9. Thanks its amazing and its unique thing to every blogger. Nice post keep posting new articles
    Stylish Blogger Threaded Comments With Author Comments

  10. nice work bro keep it up its a really nice tutorial : offshore hosting

  11. Yeah i was waiting for this post :)

    thanks bro successfully added on my blog

  12. I feel really nice reading these articles I mean there are writers that can write good material.
    Web Development

  13. 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?

  14. 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

  15. i am only getting the text , no button Plz help

  16. Thank you so much Sir, I have added this with my facebook social plug-in comments :)

  17. @haider

    You surely deserve an applause always young champ. :p

    Its a button with text on foreground. Its clickable pal :)


    If you understood the discussion out there and created your own code then sure you deserve all the credit. Proud of you :)


    Yes dear you can do that but I wont advise that you move the entire iframe box. Instead you can simply use this image :

    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 :)


    If blogger is giving error then instead of using the code in step#6 please paste this code instead just below <head>

    <script src='' type='text/javascript'/>
    <script src='' type='text/javascript'/>


    You can follow the tutorial series to create an exact same customized comment box :)


    Check if you have paste the CSS styles in step#7 correctly

    congtax pal! :d

  18. 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

  19. Thanks :)

    Added to facebook comments

    Looking so good on my blog after making some minor changes to CSS code and image.

  20. How to disable anonymous comments but allow people to still write in "Name/URL"? That feature is missing in Blogger.


  21. Plz help i am getting this error :

    "b:includable" must be terminated by the matching end-tag "".

  22. This comment has been removed by the author.

  23. Plzz i request u bro :*(

    Just coz i am an indian it doesnt mean u start ignoring us

  24. it is not working in my blog...i lost 2 hours for this. is there any better way to do it

  25. Wonderful blog & good post.Its really helpful for me, awaiting for more new post. Keep Blogging!

    cleveland web development

  26. please how can i create a comment box like your comment box

  27. hi every body ...
    i am very interesting with your comment box .
    how can i create this for my website
    plz help me

  28. thanks.....................

    FOR entertainment follow :

  29. h3. tag is not SEO friendly muhammad h2. tag use nahi ho rha ,,kia kru iska?

  30. Plz help i am getting this error :

    "b:includable" must be terminated by the matching end-tag "".


  31. learn video marketing

  32. learn video marketing:

  33. learn video marketing

    my URL is:

  34. "learn video marketing" thank you, i like this

    pandora charms

  35. 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( 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.

  36. didn't worked :( please help

  37. I made My Site Like yours but i have some problems in the comment sections :(


  38. 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

  39. Can YOu Add This To my Blog ??? Email Me IF YOu Can... Plzzz

  40. 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

  41. 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

  42. 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

  43. its not working for me i am using chromgt template
    can u plzzzz help me out wht to do

  44. It shows that ; is missing. I am using blogger simple template. Please tell me how can i solve the problem. Here is blog

  45. Thanks Mustafa!
    nice blog & very good post.Its really helpful for me,

  46. This comment has been removed by the author.

  47. 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

  48. Tank you soo much admin!! just love your blog :)
    Check my site and tell me if i can improve it :)

  49. 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...

  50. my old links-

    my new link-

    the comment box doesnt work in my new posts.. plz help

  51. 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.


  52. ohh Wow you have amazing blog. I congratulate for this

    Website design

  53. Not working on my blog.

  54. itz not working for my site:
    please check it out

  55. Brother, please update this. The image link that is :

    showing error 404 and not working in script..
    So please update/reupload the image...

    India Education News

  56. This comment has been removed by the author.


  57. 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 :

  58. 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 !

  59. Hi i am using iframe full height in my blog.
    Used CSS is:
    #iframe {
    height: 100%;
    width: 100%;
    display: block;

    and Javascript is:
    <script src=''/>

    var height = window.innerHeight;

    $undefineddocument).readyundefined functionundefined){

    $undefined&#39;iframe&#39;).cssundefined&#39;height&#39;, height)

    } );


    and HTML is:
    <iframe id="iframe" src=""></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:

  60. 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

  61. @Mohammad Mustafa Ahmedzai
    I applied all steps, but the trigger button's background is transparent.
    Please tell me how to solve it.
    My Blog

  62. The above image is not hosted.
    Replace it with this one:

    My Blog ••• Web Developer / Designer

  63. This comment has been removed by the author.

  64. 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 :

  65. Muhammad Please help i can't explain my comment box problem by typing just simply see this pic then you ill get

    when some continue typing without pressing enter for next line then this happens??????

  66. 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.

  67. Hi, you explained the topic very well. The contents has provided meaningful information thanks for sharing info
    Free Premium Wordpress Themes

  68. 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

  69. Sir, my name is Hasibul Hasan.
    Sir, how can i add multiple code box inside blogger post? like your site.

  70. 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?


  72. If the above coding is not working visit here

  73. @shoaib khan
    If the above coding is not working visit here

  74. @umair aliIf the above coding is not working visit here

  75. @Kader LocoIf the above coding is not working visit here

  76. @Noman khanIf the above coding is not working visit here

  77. @crazygrapeIf the above coding is not working visit here

  78. @Umais Bin SajjadIf the above coding is not working visit here

  79. @Rahul SethiIf the above coding is not working visit here

  80. @android-xtreme-apkIf the above coding is not working visit here

  81. @VivekIf the above coding is not working visit here

  82. @Hari keshIf the above coding is not working visit here

  83. @shaswat shahIf the above coding is not working visit here

  84. Its not working on my blog

  85. Not Working in my blog:

  86. Brother it is not working in my blog please help !!!!

    I have tried it!!
    it looks nice but not working

  87. @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...

  88. I need help with the new blogger template. I can't find the comments, in the HTML code.

  89. This comment has been removed by the author.

  90. Mustafa you are my ideal.
    plz visit my little movies blog

  91. This comment has been removed by the author.

  92. This is not working on my blog,

    can you help me on this?

  93. This comment has been removed by the author.

  94. I did this its working ,i need a help i want to remove the home and old post label from the blog how to do help me...
    my blog

  95. marvelous thanks for sharing!!! there is a pay per click company if you want you can try it.

  96. Awesome post. I implemented this in a little test blog to see if everything works correctly, and it did.

    But i got a problem. I have tried everything, asked around, experimented, and i cannot fix it.

    If a post has one or more comments on it, the widget doesn't work, it's like non-existent if there are any comments added on a post. It works perfectly only on posts with no comments.

    Help me out if you can. Thanks.


Widgets + Web Designing


SEO Mashup