Hello Folks,Today in this article we are going to explain How to Add Blogger Comments Load On click With Show And Hide Function button.In previous post we have already talked about installing the disqus comments on click load.The reason of creating show and display blogger comments click on load is to increase the loading speed of your blog or website.After installing display and close blogger comments trick in blogger template you will see Show and hide button just below the post footer where your comments appear,and when you click on show comments your comments will appear and when you click on hide comments button/tag your comments will hide.
if you have so many comments on your article then this widget is very useful for you.Because comments takes time to load reason slow your speed of webpage.So you must install show and hide blogger comments trick in your blogger template in order to boost the speed of your website and it also enhance the look of your blog.So to grab this plugin follow the steps mentioned below.
if you have so many comments on your article then this widget is very useful for you.Because comments takes time to load reason slow your speed of webpage.So you must install show and hide blogger comments trick in your blogger template in order to boost the speed of your website and it also enhance the look of your blog.So to grab this plugin follow the steps mentioned below.
How to Install Blogger Comments On Click Load In Website
Installation Steps:
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for <div class='comments' id='comments'> by Pressing Ctrl+F keys.
Step 4. You will find two times in your blogger template,and we will go for first one after locating first one ,replace the code with the below code.
<a href="#" id="comments-show" class="displaycomments" onclick="showComm('comments');return false;">Show comments</a><div class='clear'/> <div class='comments hide-content' id='comments'><a href="#" id="comments-hide" class="hidecomments" onclick="showComm('comments');return false;">Hide comments</a><div class='clear'/>
Step 5. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 6. Now Copy the below css code and paste it just above/before </style> or ]]></b:skin>.
/* Display and Hide Comments by www. Bloggersstand.com */
.hide-content{display:none;margin:0;padding:0;}
a.displaycomments,#comments a.hidecomments{display:block;text-decoration:none;
position:relative;color:#fff;font-weight:700;
font-size:15px;padding:12.5px 0;background:#3B66A8;
border:2px solid;border-radius:4px;text-align:center;
margin:30px auto;letter-spacing:1px;transition:all .3s}
#comments a.hide-content {background:#fff;color:#787D80;transition:all .3s}
a.displaycomments:hover{background:#fff;color:#3B66A8;}
#comments a.hidecomments:hover{background:#787D80;color:#fff;}
Step 7. Now Search for the </body> tag and copy the below javscript and paste it just above/before the </body> tag.
<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>