• Translate

1/04/2016

How To Make And Install Show Hide Comments on Blogspot

Tutorial Blogspot |

Advertisement

How To Make And Install Show / Hide Comments on Blogspot | Why should the tutorial show hide comments? what ever my friend saw a comment on a blog that hundreds comment? if in the article there are many comments then this will affect the speed of the blog, so we have not finished reading the article we're feeling lazy to continue it again because there are some parts of the article that has not appeared all because of the effects caused much comment.

How To Make And Install Show Hide Comments on Blogspot
However, the objective of making the show hide these comments is to accelerate access to the blog so that visitors do not get bored waiting for loading the blog. How to make show hide comments on a blog ? please follow the steps below :

First make sure in your blog template already exists Jquery, for example:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><\/script>
if you already have code like above either the same or different versions, then the above code does not need to be added again in your template.

Steps How to Install The Show Hide Comments on Blogspot 
  • Log in to the dashboard → template → click edit HTML
  • Enter the CSS code below before ]]></b:skin> or </style> 
 /* Show Hide Comment */
.hide-content{display:none;margin:0;padding:0;}
a.showcontent,#comments a.hiddencontent{display:block;text-decoration:none;position:relative;color:#fff;font-weight:700;font-size:15px;padding:12.5px 0;background:#363b40;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s}
#comments a.hiddencontent {background:#fff;color:#acb3b8;transition:all .3s}
a.showcontent:hover{background:#fff;color:#5593f0;}
#comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}
  •  The next place the following code above </head> or </body>
<!--Show hide Comment-->
<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>
  • Last step is searching for all the code <div class='comments' id='comments'>, use CTRL + F to speed up the search. after meeting the above code please replace with this code or disabled by using the <!-- <div class='comments' id='comments'> -->, in case you need it later.
<!-- <div class='comments' id='comments'> -->
<a class='showcontent' href='#' id='comments-show' onclick='showComm(&apos;comments&apos;);return false;'>Show Comments</a>
    <div class='clear'/>
<div class='comments hide-content' id='comments'>
<a class='hiddencontent' href='#' id='comments-hide' onclick='showComm(&apos;comments&apos;);return false;'>Hide Comments</a>
    <div class='clear'/>
  • Save Template and See the results
Good Luck..!!

Disclaimer: Images, Content of articles or videos that exist on the web sometimes come from various sources of other media. Copyright is fully owned by the source. If there is a problem with this matter, you can contact us here.
Disqus
Blogger
Comment
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box

No comments Add Comment

Comments not appropriate topic will sign SPAM.