Added Show and Hide Comments Blogger with Onclick Event

This time Redesign.eu.org will share about how to add Show and Hide Comments Blogger with Onclick Event.

The purpose of adding this function is to ease the loading (onload) of the blog on the post page if your blog posts have lots of comments on it. The way this script works is quite simple, that is, the comment content will remain closed before you open the comments area by pressing the show and hide button which I will share this.

Let's look at the method as follows:

Show and Hide Comments Blogger with Onclick Event

1. Open Blogger> Themes> Edi HTML> Then look for the comment markup like this:

<div class='comments' id='comments'>

Note: There are usually two markups as above

Replace (second) code above 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'/>

2. Add the code below before]]></b:skin> or </style> 

/* Show and Hide Comments */
.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;}

3. Add the code below before </body>

<script>
//<![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>

4. Finally, save the template.

That's a simple tutorial on how to add Show and Hide Comments Blogger with Onclick Event. If there are difficulties, please ask via the comments column, thank you.