Membuat Tombol Onclick Load Komentar Disqus Di Blogger

Kali ini kenny akan memberikan cara membuat komentar disqus dengan tombol onclick load. Dengan cara ini blog anda yang menggunakan komentar dari disqus dapat kita buat tersembunyi dari blog, dan dapat di munculkan dengan menekan sebuah tombol onclick.
Komentar yang disembunyikan akan muncul jika pengunjung mengklik tombol onclicknya.

Silahkan cek Cara memasang Komentar disqus di blogger jiak anda tidak tahu cara memasang komentar disqus.

Dengan memasang tombol onclick pada komentar disqus akan membuat loading blog lebih cepat, karena semua komentar yang terdapat di artikel akan tersembunyi sebelum di tampilkan.
Cara ini dpaatn meminimalkan loading blog yang berat akibat komentar yang banyak, apalagi jika komentarnya bertife gamabar, audio, video hal ini dpaat lebih memberatkan loading blog anda.

Berikut Cara memasang komentar disqus dengan tombol onclick pada blogger.

1. Masuk Blogger > Tema > Edit HTML

2. Carilah kode berikut dengan menggunakan CTRL + F

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

3. Hapus kode tersebut dan ganti dengan kode dibawah ini.

  <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 shortname here
                  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>
 

Ganti tulisan disqus_shortname dengan disqus shortname yang dipakai blog kamu.

4. Copy dan paste kode dibawah ini tepat diatas tag </article>

  <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>
 

5. Copy dan paste kode CSS berikut tapat di atas </head>

  <style>
   /* Disqus comment onclik load button */
   #comments,.comment-form, .comment_reply_form .comment-form{display:none;}
   #comments-block{display:none;background:#fff;margin:20px auto;padding:0;}
   .comments-blocks button{display:block;margin:25px auto 0;width:100%;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:blue;border-radius:2px}
   .comments-blocks button:hover{background:red}
  </style>
 

6. Done

Sekian tutuorial membuat komentar disqus onclick pada blogger.
Terima kasih telah berkunung.