We also know blog has a default comments box. The box is very large and it is increase when someone hit a comment. For this reason beauty of the blog is loss.
 |
| Show and Hide Comments Button |
If you add "Show and Hide Comments" widget in your blog, reader's can customize comments by click. When reader's do click on "Show Comments" button, the button will open and Show comment box for hit a comments. Again when readers do click on "Hide Comments" button, the button will hide/close.
### For adding Show and Hide comments button follow bellow step one by one. Now lets start the tutorial. Before start work, please take a backup of your template for safety.
Step #1: Go to your Blogger Dashboard > Template > click Edit HTML > click anywhere in html box and press ctrl + F and Find bellow code and remove it.
<div class='comments' id='comments'>
Step #2: Now replace following code in the place of removing code.
<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Show comments</a> <div class='clear'/> <div class='comments hide-content' id='comments'> <a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">Hide comments</a> <div class='clear'/>
Step #3: Again Find ]]></b:skin> or Style Copy and past following CSS code before either.
/* Show and Hide Comments */ .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:#5593f0;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;}
Step #4: Again Find </body> Copy and past bellow code before </body>
<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 #2: Finally Save Template.
Also Read: #1 Animated Contact Form Widget for blogger
#2 Add your youtube video on blog with CSS stylish Laptop frame
#3 Add a YouTube Subscribe Button in Blogger
Note: If you find any problems please contact with us in our contact page. Don't forget to share and comment this post. Keep Enjoy.