If you are using DISQUS comment box for your blogger blog, you may noticed that it automatically loads the comment box as in case of Blogger/Google+ comment box. In this tutorial we will learn to make Diqus comment box expandable. After successful adding some codes to your blog template the disqus comment box will loads only if readers of your blog want to add comments.
Embed Expandable DISQUS Comment Box
Step-1:
First of all you have to remove your Disqus widget from your layout of your blog.
However, if you are not using DISQUS for your blogger blog you may sign up within hardly two minutes. After creating your account, login to your DISQUS account and add Disqus to your blog and verify it accordingly.
Step-2:
Paste the following CSS codes into your blogger template. Before editing your template, please take a complete backup of your blog template.
To add custom CSS snippets to your blog template, go to the Template tab and click Edit HTML. Then, click anywhere in the edit template box and press Ctrl+F to find ]]></b:skin>
Now, copy the below CSS3 codes and paste it before ]]></b:skin>
.swtCommentsBox {/* SWT Comments Box by Showeblogin */
zoom: 1;
margin: 1rem 0;
color: #ffffff !important;
cursor: pointer;
text-align: center;
font-size:1.2rem;
border-radius: 5px;
padding: 1rem 3rem;
position: relative;
background: #f6087d;
text-decoration: none;
display: inline-block;
border: 1px solid #08f683;
background-clip: padding-box;
transition: all 0.5s ease-out;
-webkit-backface-visibility: hidden;
-webkit-transition: all 0.5s ease-out;
/* SWT Comments Box by www.superwebtricks.com */}
.swtCommentsBox:hover {
background-color: #cc08f6;
color: #ffffff !important;
}
Step-3:
Again search for the code closing tag </head> and paste the following JavaScript codes just above the </head>
<script type='text/javascript'>
/*<![CDATA[*/
function showSWTdisqus(){
document.getElementById("disqus_thread").innerHTML="Loading Comments..";/*
Provided by Showeblogin at www.SuperWebTricks.com */
var swt=document.createElement("script");
swt.type="text/javascript";
swt.async=true;
swt.src="http://SUPERWEBTRICKS.disqus.com/embed.js"; // Replace SUPERWEBTRICKS with your DISQUS forum shortname
(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(swt);
document.getElementById("comments").style.display="none";
}
/*]]>*/
</script>
Please do not forget to replace SUPERWEBTRICKS in Line No. 9 with you own DISQUS forum short name i.e. the unique Disqus URL you have chosen at the time of signing up your DISQUS account or adding Disqus to your new website/blog.
However, you may get your Disqus short name in the Disqus default codes for site similar to this one as shown below:
var disqus_shortname = 'superwebtricks';
Step-4:
Now, we will add our final codes where we want to load Disqus customised SWT Comments Box. Search for <div class='post-outer'>
Now paste the following html codes before the end of second </b:if> and after the line <b:include data='post' name='comment_picker'/>
<!-- SWT Comments Box START. -->
<center><a
href="http://superwebtricks.com/" rel="dofollow" target="_blank"><img
src="http://goo.gl/whAnfb" border="0" style="position: fixed; top: 1%; left: 2%;" />
</a><div id='disqus_thread'>
<a class='swtCommentsBox' href='javascript:void(0)' id='comments' onclick='showSWTdisqus()'>Reader’s Comments</a></div><a
href="http://superwebtricks.com/" rel="dofollow" target="_blank" ><img
src="http://img.superwebtricks.com/files/69.png" border="0" style="position: fixed; bottom: 2%; right: 1%;" />
</a>
</center>
<!-- SWT Comments Box END. -->
Now, paste the above html codes before the end of first </b:if> and after the line <b:include data='post' name='comment_picker'/> if you want to appear your SWT comment box in statics pages (example.blogspot.com/p/pagename.html)
After adding the codes in your blogger template just see your codes whether it looks like as shown in this screenshot.
Step-5:
Finally, save your template and Enjoy!