Cara Membuat Tombol Load Disqus

Seribu Ilmu    July 18, 2018    BLOGSPOT   

Cara Membuat Tombol Load Disqus - Hal ini berfungsi untuk meringankan load page suatu post. Agar tidak berat dan cepat kalian dapat mengikuti langkah berikut ini.

Edit Html > Temukan code ini dan ganti

<b:includable id='comments' var='post'>
</b:includable>

Ganti code tersebut dengan code berikut

<b:includable id='comments' var='post'>
  <div class='comments-block' id='comments-block'>
<div id='disqus_thread'/>
<script type='text/javascript'>
var mql = window.matchMedia(&#39;screen and (min-width: 350px)&#39;);if (mql.matches){
var disqus_loaded = false;
var disqus_shortname = &#39;DISQUS_SHORTNAME&#39;; //Add your ID Disqus
var disqus_url = disqus_blogger_current_url;
var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
if (!disqus_blogger_current_url.length) {
disqus_blogger_current_url = &quot;<data:blog.url/>&quot;; }
var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
function disqus() {
    if (!disqus_loaded)  {
        disqus_loaded = true;
        var e = document.createElement(&quot;script&quot;);
        e.type = &quot;text/javascript&quot;;
        e.async = true;
        e.src = &quot;//&quot; + disqus_shortname + &quot;.disqus.com/embed.js&quot;;
        (document.getElementsByTagName(&quot;head&quot;)[0] || document.getElementsByTagName(&quot;body&quot;)[0])
        .appendChild(e);
        //Hide the button after opening
        document.getElementById(&quot;show-comments&quot;).style.display = &quot;none&quot;;document.getElementById(&quot;comments-block&quot;).style.display = &quot;block&quot;;
    }
}
//Opens comments when linked to directly
var hash = window.location.hash.substr(1);
if (hash.length &gt; 8) {
    if (hash.substring(0, 8) == &quot;comment-&quot;) {
        disqus();
    }}}
</script>
  </div>
</b:includable>

Penting Ganti DISQUS_SHORTNAME dengan Id Disqus yang kalian daftarkan

Letakan code berikut tepat seperti gambar diatas

<!--Load Disqus-->
<style>
/* Disqus comment onclik load button – by Bungfrangki.com */
#comments,.comment-form, .comment_reply_form .comment-form{display:none;}
#comments-block{display:none;background:#fff;margin:20px auto;padding:30px;}
.comments-blocks button{display:block;margin:25px auto 0;width:300px;outline:none;border:none;cursor:pointer;text-transform:uppercase;font-weight:700;height:55px;color:#fff;line-height:55px;padding:0!important;font-size:16px;background:#3371d6;border-radius:2px}
.comments-blocks button:hover{background:#214682}
    </style>

<b:if cond='data:view.isPost'>
<div class='comments-blocks'><button id='show-comments' onclick='disqus();return false;' tabindex='0'>Load Comments</button></div>
</b:if>
<!--Load Disqus-->
      <br/>

Hasil Code Di atas