Show/Hide Your Blogger Comments On Button Click

Comments are the important way to get readers feed back so if your Blog have soo many comments then it will take time to load and your page will go too long. Not every user want to read your comments or others feedback so then just get in for your content so why to show your others users comments to them so now for that we have a trick that you can hide that comments.

It not hide for all. Anyone need to read then they can see your comments by just clicking a button title then your comment will be displayed then you can see your comments and can comments more. There are many codes available online but here we have a little snippet for you that can work as per your desire. Go garb the little snippet and use it for go.

Features:

1.) Pure JavaScript Added.
2.) No JQuery File Added.
3.) Simple CSS Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Browser.
6.) Work With Any Blogger Domain.
7.) Can See The Post Title and Post Thumbnails.
8.) Plain In Design.
9.) Fully Customizable With Your Design.
10.) Can Control Everything.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog”.
3.) Go To “Template”.
4.) Click “Edit HTML”.
5.) Now “Click” Within Code Box.
6.) Press [CTRL+F] To Search </head> Code.
7.) Now “Copy” The Below CSS/JavaScript And “Paste” It Before Upper Code.

CSS:

<!-- Show/Hide Comments DIV Data-->
<style type="text/css">
h2#commentsShowHideTitle {border:1px solid #DADADA;padding:10px;font-weight:bold;font-family:sans-serif;background:#EFEFEF;}
</style>

JavaScript:

<script type="text/javascript">
// Show/Hide Comments DIV Data
// Snippet BY @EXEIdeas
//<![CDATA[
function show_hide_commentsDIV()
{
var div = document.getElementById('commentsShowHideDIV');
div.style.display = (div.style.display == "none") ? "block" : "none";
var hed = document.getElementById('commentsShowHideTitle');
hed.innerHTML = (hed.innerHTML == "Show Comments") ? "Hide Comments" : "Show Comments";
}
//]]>
</script>
<!-- Show/Hide Comments DIV Data-->

8.) Again Press [CTRL+F] To Search <div class='comments-content'> Code.
9.) Now “Copy” The Below Code And “Paste” It Before Upper Code.

<!-- Show/Hide Comments DIV Data-->
<h2 id="commentsShowHideTitle" onclick="show_hide_commentsDIV()">Show Comments</h2>
<div id="commentsShowHideDIV" style="display:none;">
<!-- Show/Hide Comments DIV Data-->

10.) Again Press [CTRL+F] To Search <div id='backlinks-container'> Code.
11.) Now “Copy” The Below Code And “Paste” It Before Upper Code.
12.) Click “Save Template” And Done.

<!-- Show/Hide Comments DIV Data-->
</div>
<!-- Show/Hide Comments DIV Data-->

Customization:

Edit your CSS if you are a pro and want more customization.

Last Words:

That’s all we have. If you have any problem with this code in your blogger template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article.