How To Add Together Show+Hide Part On Blogger Comments

Hello Folks,Today inward this article nosotros are going to explicate How to Add Blogger Comments Load On click With Show And Hide Function button.In previous post nosotros receive got already talked most installing the disqus comments on click load.The argue of creating present together with display blogger comments click on charge is to increase the loading speed of your weblog or website.After installing display together with closed blogger comments trick inward blogger template you lot volition come across Show together with enshroud push clit only below the post footer where your comments appear,and when you lot click on present comments your comments volition look together with when you lot click on enshroud comments button/tag your comments volition hide.
if you lot receive got hence many comments on your article together with hence this widget is really useful for you.Because comments takes fourth dimension to load argue tedious your speed of webpage.So you lot must install present together with enshroud blogger comments fob inward your blogger template inward social club to boost the speed of your website together with it likewise heighten the await of your blog.So to view this plugin follow the steps mentioned below.

Demo

How to Install Blogger Comments On Click Load In Website

Installation Steps:

Step 1. Log inward to your Blogger trace of piece of occupation organisation human relationship together with 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 volition honor 2 times inward your blogger template,and nosotros volition instruct for kickoff 1 afterward locating kickoff 1 ,replace the code amongst 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> yesteryear Pressing Ctrl+F keys.

Step 6. Now Copy the below css code together with glue it only above/before </style> or ]]></b:skin>.

 /* Display together with Hide Comments yesteryear 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 together with re-create the below javscript together with glue it only above/before the </body> tag.

<script type='text/javascript'>
//<![CDATA[
// Show together with 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>

Step 8. Now Save your Template..Done!