Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

Enpand & Collapse Blogger Comment Box With jQuery Effect

 After a lot of testing and hard work, i was able to bring you one of the best widget to spice up your comment box, as you all know that making your blog/site attractive is a very complicated task, which some designers/developers find it so difficult in customizing or adding effect to the comment box.
This widget was created by Mybloggertricks and fully design and customize by Realcombiz. The widget will slide out smoothly when you click on the black long button showing the hiding comment box due to the simple jquery effect that was included. This tutorial was a bit techy which require all your attention for you to successfully add the widget to your blog. If you are ready, let's get started.


How To Implement The Effect To Your Blog
  • Go to your blogger dashboard
  • Clcik on "Design" > "Edit HTML" > back up your template
  • Mark/Tick "Expand Widget Templates"
  • Use ctrl F to find <head> and paste the following code after/below <head>
<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(){
   
    $(&quot;.toggle_container&quot;).hide();
 
    $(&quot;h3.trigger&quot;).click(function(){
        $(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
    });
 
});
</script>
  • Search for the next code ]]></b:skin> and paste the following code above it
/*----- Comment Box Design By www.Realcombiz.com.com ----*/
h3.trigger {
background: url(http://i1175.photobucket.com/albums/r628/realonekazz/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;
}
  • If you wish to change the width of the button, simply edit width: 518px;
  • Edit color:#A1A1A1; if you wish to change the color of your button, check here for 100's of hex color.
  • Now search for the code below
<b:includable id='comment-form' var='post'>
  • Now paste the following code below the code above
<h3 class='trigger'>Click Here To Add Comment</h3>
<div class='toggle_container'>
<div class='block'>
  • Search for the following code, it would appear in the next few lines from the search above
</b:includable>
  • Now paste the following code above the code above
<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://www.realcombiz.com/2012/06/enpand-collapse-blogger-comment-box.html' style='color:#CAC8C8;'><i>Get This Widget</i></a></p>
</div>
</div>

After code placement, your final result should look very similar the image below.


Click "SAVE TEMPLATE" when you are done with your editing. Check your blog to see the great new changes you just apply to your blog.

Use the comment box if you find any difficulties in implementing this widget to your blog.
In my next post, i will be dropping a lot of tutorials on how you can customize/design your comment box, and for you not to miss any of this, simply subscribe to this blog now and receive all our latest post directly into your email, but you will have to confirm your request in your email before this can be enable. Remember to share this with friends/followers.



      Go Social:

      Subscribe For Free Updates!

      *Please confirm the email sent to your inbox after clicking "Sign Up!".

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

      1. Error Comes "Error parsing XML, line 600, column 3: The element type "b:includable" must be terminated by the matching end-tag ""."

        ReplyDelete
        Replies
        1. Try to parse you html code here:Display Html Code In Your Blog-Html Parse Tool follow the instruction,,after finish copy your code and paste it back to your blog code..Thanks hope this will help you.

          Regards:
          BLOGGER HEROE

          Delete
        2. I like it your blog. I have read your blog its very attractive and impressive.
          corporate training in chennai corporate training companies in chennai corporate training companies in india corporate training companies in india corporate training in chennai corporate training companies in chennai corporate training in chennai | Angular 2 Corporate Training Angular 2 Corporate Training

          Delete
      2. As Christmas is approaching, people are crazy about cheap swtor credits since lots of online credits suppliers are cutting price to celebrate this big holiday. But except for low price, you should take account safety into consideration. Then where should players go for swtor credits
        Come on! There may be world ending in 2012 as mentioned in mayan prophecy. Hurry to seize the rest of the year and enjoy yourself in swtor playing. Need swtor credits, just buy swtor creditsonline.

        ReplyDelete
      3. Thanks so much for this article and E commerce websites are a business & foremost; the website is merely the commerce delivery channel. They have been so helpful.

        ReplyDelete
      4. after finish copy your code and paste it back to your blog code Ideologi pancasila..Thanks hope this will help you.

        ReplyDelete
      5. Well proper codes does really matters. Simply just place right code at right places and the results would be really great. For the best and the most affordable website design packages feel free to contact.

        ReplyDelete
      6. We are the best web design and development company in US. As most of the individuals and corporate business man's have acquired our services. For professional website design services feel free to contact us for as low as $1.

        ReplyDelete
      7. The comment box is very important for the blogs. I am trying to implement the blogger comment box by using the jquery, but not succeed totally here i am getting the best theory for designing.let's start to the making process.
        http://www.torontowebdesign.company/

        ReplyDelete
      8. Commenting box is a necessary element for any of the business website design service blog. Yeah i have also placed commenting box under my site's blogs.

        ReplyDelete

      About Me

      My Photo
      Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

      Recent Posts

      Let's Connect

      Site Links

      Copyright © 2014 RealcomBiz. All Rights Reserved.
      Powered by Blogger