On this occasion we will share a tutorial on How to make a show hide comment button on Blogger (Blogspot) or you could say making a close and open button in the comments section of Blogger so that our blogger's blog loading becomes fast.
Actually, to add the show and hide comment button on Blogger, there are many benefits, starting from making blog loading fast because the image in the comments can slow down the loading of the blog, the two blog views are better, third if the comments are too many it will be easier and more efficient.
How to add open and close comments button in blogger comment form?
1. Login to your Blogger account
2. Go to dashboard and select Theme
3. Click on Edit HTML
4. Press Ctrl + F
5. Find the code <div class='comments' id='comments'>
 |
| An excample for Blogger comment. Photo: Google.com |
Info: usually there are two codes like the one above, you have to replace the two codes with the code below.
<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'/>
6. Add below CSS code before the ]]></b:skin> or </style> rather put the code on it
/*BlogismPro 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:#43ce8e;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:#43ce8e;}#comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}
7. Then add the code above the </body>
<script type='text/javascript'>//<![CDATA[// Blogismpro Show and Hide Commentsfunction 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>
Finally, click on save theme button and visit your blog posts and goto comment area,you will see that button,if you have anay issue to implement this then comment below and also tell if you like this article and share with your another blogger freinds. Thanks for reading.
References: blogismpro.blogspot.com
TAG: blogger tutorial for beginners,blogger tutorial in tamil,blogger tutorial for beginners pdf,blogger tutorial bangla,blogger tutorial by ranjit,blogger tutorial advanced,google blogger tutorial,step by step blogger tutorial,full blogger tutorial pdf,google blogger tutorial pdf,instagram blogger tutorial,google blogger tutorial for beginners 2021,bangla blogger tutorial pdf,google blogger tutorial 2021,java logger tutorial,make blogger tutorial,blogger full tutorial,blogger coding tutorial,blogger api tutorial,blogger design tutorial,blogger makeup tutorial,blogger layout tutorial,blogger theme development tutorial,blogger setup tutorial,blogger complete tutorial pdf,blogger com login,blog tutorial,blogger tutorial in hindi,blogger tips and tricks,blogger tips in tamil,blogger tips 1x2,blogger tips for beginners,blogger tips in hindi,blogger tips and tricks blogspot,blogger tips for instagram,blogger tips and tricks for beginners,food blogger tips,beginner blogger tips,instagram blogger tips,new blogger tips,google blogger tips and tricks,fashion blogger tips for instagram,travel blogger tips,instagram food blogger tips,beauty blogger tips,instagram blogger tips and tricks,blogger seo tips,blogger betting tips,blogger beginner tips,blogger prediction tips,blogger seo tips in hindi,blogger soccer tips,blogger design tips,bloger hr betting tips,blogger football tips,blogger blogspot seo tips and tricks,google blogger tips,tips for new bloggers,personal blog tips,blogger tips and tricks in hindi,blogging tips for writers,tips for starting a blog,blog writing tips,blogging meaning,how to start an advice blog,little green footballs,the sartorialist,lifehacker,scripting news,crooks and liars,girl with a onetrack mind,blogspot com login,what happened to blogspot,google blog,blogspot about me,blogspot.com login,blogspot movie,vsp blogspot,coin master free spins link blogspot,brownsville blogspot,coin master free spins blogspot,blogspot login,blogspot search,blogspot blogs,blogspot sign in old account,blogspot general hospital,blogger templates,blogspot coin master,blogspot days of our lives,
blogspot popcorn,blogspot brownsville,general hospital blogspot,dj hamirpur blogspot,www.editech house.blogspot.com,visualbuyer blogspot com,13load.blogspot.com among us,getmypopcornnow blogspot,techboldy blogspot,mygkjob.blogspot.com 2021,google blogspot,quiltville blogspot,tips for using blogger,blogspot seo 2021,blogger seo setting,complete blogspot seo,how to rank blogger blog on google,blogger seo tools,
wordpress,tumblr,pocket,feedly,blogger tricks,blogger.com tips and tricks,blogspot seo tips,search blogger,blogspot settings,how to optimize blog posts for seo,blogspot tips and tricks,blogspot tips for new bloggers,nifty blogspot tips,tips for oracle blogspot,sajjad tips.blogspot,f&o tips blogspot,savvy teaching tips blogspot,mainframe tips and tricks blogspot,rk dish tips blogspot,blogspot betting tips,blogspot football tips,blogspot soccer tips,blogspot-seo-tips-for-bloggers,how to create a blog on blogger step by step pdf,how to write a blog,blogger,blogspot.com youtube,blogger websites,blogspot tutorial pdf,blogspot tutorial for beginners,blogspot tutorial css,seo blogspot tutorial,mikrotik blogspot tutorial,alisa burke blogspot tutorial,youtube blogspot tutorial,google blogspot tutorial,cracking tutorial blogspot,c sharp video tutorial blogspot,blogspot tutorials,blogspot seo tutorial,blogspot design tutorial,blogspot photoshop tutorial,blogspot templates tutorial,blogspot making tutorial,blog meaning in tamil language,fashion blogger meaning in tamil,how to earn money by blogging,blog writing meaning in tamil,how to create a blog,
how to earn money from blog in tamil,tamil blogs collection,personal blog meaning in tamil,blog tamil,blogger meaning in tamil to english,how to create blog and earn money,blogging course in hindi pdf free download,professional blogging course in hindi by deepak,blogging books pdf in hindi,blogger tutorial pdf,how to become a blogger in hindi,free blogging course in hindi pdf,tutorial blogger,blogging in hindi pdf,what is fashion blogger in hindi,blogger tutorial for beginners in hindi,google blogger tutorial for beginners in hindi,blogger full tutorial in hindi,utorial blogger pdf,tutorial blogger 2021,tutorial blogger 2021 new,tutorial blogger lengkap,tutorial blogger lengkap pdf,tutorial blogger 2021 pdf,tutorial blogger pemula,tutorial blogger etiquetas,top tutorial blogger 2021,makeup tutorial blogger,how to create a blog tutorial blogger,lightroom tutorial blogger,xml tutorial blogger,favicon tutorial blogger,como crear un blog tutorial blogger,step by step tutorial blogger,tutorial membuat blogger,tutorial membuat blog di blogger,tutorial buat blogger,tutorial de blogger,tutorial bikin blogger,
tutorial de blogger 2021 free,tutorial cara membuat blogger,tutoriales blogger,tutorial blog tips blogger,tutorial como crear un blog en blogger,blogspot websites,blogger.com login,how to make a blog for free,how to create a blog for free and make money,blogger search,url for blog,how to create a blog on blogger,blogspot com youtube,blogger app,blog examples,techcrunch,mashable,boing boing,gizmodo,engadget,gawker
Caci Apps
ReplyDeleteCaci Apps