How To Add Show+Hide Function On Blogger Comments

0
add blogger comments load on show and hide click button in template
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.

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>
Step 8. Now Save your Template..Done! 
learn trick to display show blogger comments widget plugin load on click event,create show and hide button to load blogspot website comment on click even to increase the webpage loading speed.
Hello Folks,Today in this article we are going to explain How to Add Blogger Comments Load On c...
SUMMARY

learn trick to display show blogger comments widget plugin load on click event,create show and hide button to load blogspot website comment on click even to increase the webpage loading speed.

You Might Also Like:

We hope this article helped you to learn How To Add Show+Hide Function On Blogger Comments. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "How To Add Show+Hide Function On Blogger Comments" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand