How To Install The Show and Hide Comments

How To Install The Show and Hide Comments - infoBlog will share Blogging Tutorial again about how to install the Show and Hide Comments to the area comments on the blog.

The goal is to relieve loading on the blog post page if you have a comment on the post too much. The way it works is quite simple: by pressing a button Show Comments or Hide Comments.

How To Install The Show and Hide Comments :

1. Go to your Blogger Dashboards.
2. Select Template ›› Edit HTML ›› Search Code <div class='comments' id='comments'> ( usually there are two codes are the same ).
3. Replace ( two ) that code with the code below.
<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Show comments</a> <div class='clear'/> <div class='comments hide-content' id='comments'> <a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">Hide comments</a> <div class='clear'/>
4. Add the code below before ]]></b:skin> or </style>
/* Show and Hide Comments by infoBlog */
.hide-content{display:none;margin:0;padding:0;} a.showcontent,#comments a.hiddencontent{display:block;text-decoration:none;position:relative;color:#fff;font-weight:700;font-size:15px;padding:12.5px 0;background:#5593f0;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s} #comments a.hiddencontent {background:#fff;color:#acb3b8;transition:all .3s} a.showcontent:hover{background:#fff;color:#5593f0;} #comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}
5. Copy and paste the code below before </body>
<script type='text/javascript'> //<![CDATA[ // Show and Hide Comments function showComm(e){document.getElementById(e)&&("none"!=document.getElementById(e+"-show").style.display?(document.getElementById(e+"-show").style.display="none",document.getElementById(e).style.display="block"):(document.getElementById(e+"-show").style.display="block",document.getElementById(e).style.display="none"))}; //]]> </script>
6. After that, click Save Templates.

Enough of articles about How To Install The Show and Hide Comments. If you have any questions or suggestions, please write in the comments field below or directly send questions through the Contact Us service. Hopefully this article useful and you willing to share this article through social media accounts you have.

Thanks For Your Visiting

Share This Article

Share on FacebookShare on Google+