Hello folks,Today inwards this article nosotros are going to explicate How to add together Disqus comments charge on click inwards blogger template.Now days every blogger knows close disqus this is best platform for commenting organisation inwards every website or blog.Disqus comments are 100% responsive wich sure enahcne each as well as every website.From Disqus comment organisation y'all tin moderate comments as well as at that spot is no number of spam ,becuase all spams comment showtime ask moderator approving as well as then it's alone visible otherwise they volition rest pending.There are lot of tricks to customize disqus comments box ,in our side yesteryear side tutorial nosotros volition explicate how to add together most commentator widgets of disqus comments.Disqus comment organisation is totally complimentary as well as disqus comments comes alongside rattling rich features,which too comes inwards google search results.In disqus y'all tin recommend your content to exhibit on each as well as every comments department inwards your website.they too render i unique characteristic which i similar the most i.e featured comment.if something y'all desire to country to your visitors or want's to highlight it but write your comment as well as pick out featured comment,it volition display on the summit of all the comments alongside the featured comment tag yesteryear admin.
However today nosotros are but focusing on custom disqus organisation charge on click,it volition too boost your page speed charge fourth dimension as well as suits every weblog niche.So to view this play tricks follow the steps mentioned below.
How To install Disqus comments charge on click business office inwards blogger template
Installation Steps:
Step 1. Log inwards to your Blogger delineate of piece of employment concern human relationship as well as Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. First Search for <head> by Pressing Ctrl+F keys as well as Copy the below Font Awesome Icons stylesheet as well as glue it but below the <head> tag.
Step 3. First Search for <head> by Pressing Ctrl+F keys as well as Copy the below Font Awesome Icons stylesheet as well as glue it but below the <head> tag.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>Step 4. Now Search for the next below code.
<b:includable id='comments' var='post'>Step 5. Now re-create the below highlighted code as well as glue it but afterward the inwards a higher identify code.
.
.
.
</b:includable>
<b:includable id='comments' var='post'>Step 6. Now Copy the below javascript code as well as glue it but above/before the closing </body> tag.
.
.
.
</b:includable>
<b:includable id='disqus-comment' var='post'><script type='text/javascript'>var disqus_blogger_current_url = "<data:blog.canonicalUrl/>"; if (!disqus_blogger_current_url.length) { disqus_blogger_current_url = "<data:blog.url/>"; }var disqus_blogger_homepage_url = "<data:blog.homepageUrl/>"; var disqus_blogger_canonical_homepage_url = "<data:blog.canonicalHomepageUrl/>";</script></b:includable>
<script type='text/javascript'>Customization:
var disqus_shortname = "bloggersstand";
!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="//"+disqus_shortname+".disqus.com/blogger_index.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}();
</script>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="//"+disqus_shortname+".disqus.com/blogger_item.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}();
//<![CDATA[
business office load_Comments(){var e=document.getElementById("disqusshow");e.style.display="none";var t="bloggersstand";!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="http://"+t+".disqus.com/embed.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}()}
//]]>
</script>
</b:if>
- Replace bloggersstand alongside your disqus username.
Step 7. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 8. Copy the below CSS code as well as glue it but earlier the ]]></b:skin> or </style> tag.
/* Disqus Comments Load On Click By www.Bloggersstand.Com */Step 9. Now Search for the next below code.
#comments{display:none;}
.post-comment-link {visibility:hidden;}
#disqus_thread {background:#fff;margin:10px 0 0 0;padding:20px;box-shadow:inset 0 0 1px 0 #767676;}
#disqusshow{position:relative;overflow:hidden;display:block;padding:15px 20px;text-align:left;color:#222;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;margin:10px 0;background:#fff;border:1px enterprise #999;transition:all .3s}
#disqusshow:after{display:inline-block;content:"\f0e6";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#FEA280;border-left:1px enterprise #999;top:0;right:0;padding:12px 20px;position:absolute}
#disqusshow:hover,#disqusshow:active{color:#ff4400}
<div class='comments' id='comments'>Step 10. Now re-create the below highlighted html code as well as glue it but before the inwards a higher identify code.
<div id='disqusshow' onclick='load_Comments()'>Load comments</div>Step 11. Now Save your template..Done !
<div id='disqus_thread'/>
<div class='comments' id='comments'>
No comments:
Post a Comment