How to install new and stylish Disqus comment system with onclick event in blogger - Disqus is an awesome and responsive comment system provided by disqus team. This is one of the best comment system available for every single blogger who want to make their blog dashing. As far as I know there's lots of features of the Disqus comment system, It allows you to add comments section to any web page you manage. You can moderate comments with Disqus, without having to worry about spam. The best part is it doesn't cost you even a dime.
Okay but today I have a special gift for your blog, today I am going to provide you a modified disqus comment system with onclick event. The function of this comment system is same like others, but it will help you to speed up your page loading time.
So now my first suggestion to you is that if you like this comment system and want to install it on your own blog, then first take a look of this widget by clicking on the below demo button.
Finally, if you are ready, then please follow the below simple steps and set up this comment system in your own blog without having any trouble.
Add Awesome Disqus Comment System In Blogger?
Go to your blogger dashboard - LoginNow go to "Template" and then click on "Edit html" button.
After that, Copy and paste the below code just after <head>.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">Now find the below code by pressing "Ctrl + f " key together from you keyboard.
]]></b:skin>After that, copy and paste the below CSS code just before ]]></b:skin>
/* Disqus Comments */
#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 #aaa;}
#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 solid #999;transition:all .3s}
#disqusshow:after{display:inline-block;content:"\f086";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#e85e54;border-left:1px solid #999;top:0;right:0;padding:12px 20px;position:absolute}
#disqusshow:hover,#disqusshow:active{color:#f8695f}
Again copy the below JavaScript and paste it just before </body>.
<script type='text/javascript'>
var disqus_shortname = "ASKWITHLOUD";
!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[
function load_Comments(){var e=document.getElementById("disqusshow");e.style.display="none";var t="ASKWITHLOUD";!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>
Remember : Replace the highlighted text with your own Disqus id (username).
<b:includable id='comments' var='post'>
.......
.......
.......
</b:includable>
After that, add the below code just after the above code.
<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>The result will be like this?
<b:includable id='comments' var='post'>
.......
.......
.......
</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>
Once again find the below code.
<div class='comments' id='comments'>
Now add the below code just before the above code.
<div id='disqusshow' onclick='load_Comments()'>Load comments</div>
<div id='disqus_thread'/>The result will be like this?
<div id='disqusshow' onclick='load_Comments()'>Load comments</div>
<div id='disqus_thread'/>
<div class='comments' id='comments'>
After that click on the orange save template button to apply these changes.
That's it! I hope you like this new comment system! Stay tuned for more widgets! Thanks for reading @Prince.
That's it! I hope you like this new comment system! Stay tuned for more widgets! Thanks for reading @Prince.
0 Comment to "Add New Disqus Comment System With Onclick Event"
Post a Comment