Show Hide Blogger And Facebook Comments On Blogger by Adhy Suryadi

this time I will post how to make the show hide Blogger and Facebook comments in blogs that would show his hide-use onclick event on a button so that the generated code is not complicated like jquery and so easy to understand of course. As we have seen that by using the onclick event to show and hide an element will be lighter than using jquery. So even with his Facebook comments we will be using the asynchronous javascript his Facebook SDK so it does not interfere with loading of such blogs on animation gif image below.
1. Please make sure that the template you already have a Facebook Javascript SDK as below. If no please copy the code below and save it under the code </body>

<div id='fb-root'></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;js.async=true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

For those of you that the template already contained code as above, be sure also been added asynchronous. Note the code js.async = true; if no please add that code as the code above.
2. For those of you that the template already contained code as above, be sure also been added asynchronous. Note the code js.async = true; if no please add that code as the code above.

#comments{.....;display:none}

4. If you are using a template Threaded Comments Hack, please find the code below

<b:includable id='comments' var='post'>

Then scroll down and find the cover above code </b:includable> then please save the code below just above the last closing code.

<div id="fb_comments" style="height:0;">
<div class="fb-comments" expr:data-href='data:post.url' data-width="100%" data-numposts="5" data-colorscheme="light"></div>
</div>

-If you are using a template Threaded Comments Blogger, please find the code as below:

<b:includable id='threaded_comments' var='post'>

Then scroll down and find the cover above code </b:includable> then please save the code above the lid just above the code earlier.
5. Please find the below code

<b:includable id='post' var='post'>

Then scroll down and find the cover above code </b:includable> then please save the code below just above the last closing code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="Button1" style="margin:70px 0 30px;padding:0;text-align:center;float:left;background:#FC9543;color:#fff;font-weight:700;cursor:pointer;width:50%;height:35px;line-height:35px" onclick="document.getElementById('comments').style.display='block';fb_comments.style.height='0';Button1.style.display='none';Button2.style.display='block';">Blogger Comments</div>
<div id="Button2" style="display:none;margin:70px 0 30px;padding:0;text-align:center;float:left;background:#FC9543;color:#fff;font-weight:700;cursor:pointer;width:50%;height:35px;line-height:35px" onclick="document.getElementById('comments').style.display='block';fb_comments.style.height='0';Button1.style.display='block';Button2.style.display='none';">Blogger Comments</div>
<div id="Button3" style="margin:70px 0 30px;padding:0;text-align:center;float:right;background:#3E5B99;color:#fff;font-weight:700;cursor:pointer;width:50%;height:35px;line-height:35px" onclick="document.getElementById('comments').style.display='none';fb_comments.style.height='100%';Button3.style.display='none';Button4.style.display='block';">Facebook Comments</div>
<div id="Button4" style="display:none;margin:70px 0 30px;padding:0;text-align:center;float:right;background:#3E5B99;color:#fff;font-weight:700;cursor:pointer;width:50%;height:35px;line-height:35px" onclick="document.getElementById('comments').style.display='none';fb_comments.style.height='100%';Button3.style.display='block';Button4.style.display='none';">Facebook Comments</div>
</b:if>

After that please SAVE your blog template and just try to go to a post to see and try out appearance.
http://www.kompiajaib.com/2014/06/show-hide-blogger-and-facebook-comments-on-blog.html