Creating Buttons Show and Hide Comments By Jquery

Katou this time will provide a tutorial that has been tested is a tutorial how to create buttons to show and hide comments. Later, when this trick is already running, the comments in the blog You will be hidden and will only open if a visitor shortly click "Comments". Okay, go directly to his tutorial.

Author: Megumi Katou
Please open the first blogger (Yaelah, grandma - grandmother rocker also know: v) Then, go to the Edit HTML and add the following code in the CSS Comment Buddy.

#flipcmt{color:#999;font-size:20px;line-height:normal;margin-bottom:0;text-align:center;text-transform:uppercase;background:#fff;cursor:pointer;padding:10px 0;margin:15px 0;border:1px solid #d9d9d9;}
#flipcmt:hover,#flipcmt:focus {background:#fcfcfc;}
#comments {display:none;}

If you have, now find code or tag div comments on your blog. Sample code div tag that comments like this

<div class='comments' id='comments' itemprop='comment' itemscope='itemscope' itemtype='http://schema.org/Comment' style='display: none;'>

If you have found a code that looks like it, add the code below, just above it.

<div id='flipcmt'><span>Komentar</span></div>

Then, after adding its code would be like this.

<div id='flipcmt'><span>Komentar</span></div>
<div class='comments' id='comments' itemprop='comment' itemscope='itemscope' itemtype='http://schema.org/Comment' style='display: none;'>

Finally, add the Javascript code below, just above the code </body>

<script type='text/javascript'>
//<![CDATA[
//Comments Show
$("#flipcmt").click(function(){
$("#comments").slideToggle("fast");
});
//]]>
</script>

Done, Now Save template buddy and see the results. However, please ensure that your blog already has Jquery Library regardless of the version. For the DEMO please follow the link below. Http://nmaratus.blogspot.com/2015/04/tags-and-styling.html 
Thank you and good- creations