How to set up hide and show comment system in your blogger blog with onclick event - Hi guys I'm back with a new and stylish widget for your blog. This widget is really awesome and the best part of this widget is that if you install this widget on your own blog, then it will help you to increase your page loading speed.
The hide and show comment system is new and unique way to show your blog comments. One more thing, it takes only some space of your blog and I'm sure it will look pretty cool on your blog.
The actual function of this widget is that if you click on the show comment option, then you will be able to show all the comments. After that If you want to hide the comments then you can easily hide all comments by clicking on the hide comments' option.
Before adding this widget in your blog, my suggestion to you is that first take a look of this widget by clicking on the below demo button.
Now if you like this comment widget, and you want to install it on your own blog then follow the below simple steps.
Show And Hide Comments In Blogger With One Click?
First visit to your blogger dashboard - Login
Now go to "Template" section and then click on the "Edit html" button.
Now find the below code in template editor by pressing " Ctrl + f " key together from your keyboard.
<div class='comments' id='comments'>
Note: Normally there are two markup as above, Replace (second) code with the below 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'/>
After that add the below code just before ]]></:skin> or </style>.
/* 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;}
Again copy the below JavaScript code and paste it just 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>
Now click on the orange save template button and you are done, refresh your blog and see the magic.
That's it! I hope you like this comment widget! stay tuned for more cool widgets! Thanks for reading @Prince.
0 Comment to "Add Hide And Show Comment Widget In Blogger"
Post a Comment