Home / Blogspot / Cara Memasang Widget Disqus Comment Dengan Fungsi Onclick Load

Cara Memasang Widget Disqus Comment Dengan Fungsi Onclick Load

Selamat Datang Di Media Pembelajara Online 😎 . Pada kesempatan kali ini saya akan mebahas tentang Membuat Komentar Disqus Dengan Tombol Onclick Load. Apa sih maksud nya ? Maksudnya adalah semua komentar di blogspot akan di sembunyikan terlebih dahulu, dan kolom serta berbagai komentar tersebut akan di tampilkan jika pengunjung mengklik tombol untuk load komentar disqus.

Memasang tombol load komentar disqus dengan fungsi onclick ini adaah salah satu cara untuk mempercepat loading sebuah blog. Karena widget disqus comment ini terkadang berkontribusi demikian besar pada ukuran halaman blog, saat halaman itu di buka. Apalagi kalau komentar sudah sangat banyak, dan terdapat file lampiran gambar dan lainnya.

Dengan kalian memasang tombol load komentar disquss ini, maka pemuatan koemntar disqus akan tertunda, lalu seluruh komentar akann terbuka seutuhnya setelah pengunjung mengklik tombol load komentar disqus.

Nah untuk cara pemasangannya adalah sebagai berikut :

Cara Memasang Komentar Disqus Dengan Tombol Onclick

1. Langkah pertama kalian masuk ke Dasboard Blogger > Template . Edit HTML lalu cari kode di bawah ini :

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

2. Jika sudah ketemu Hapus kode tersebut dan dari <b:includable id=’comments’ var=’post’> Sampai </b:includable> . Lalu ganti dengan Kode di bawah 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 > 8) {
    if (hash.substring(0, 8) == &quot;comment-&quot;) {
        disqus();
    }}}
</script>
  </div>
</b:includable>

Perhatian !!!

Ganti kode DISQUS_SHORTHAME dengan Disqus Shortname untuk blog kalian.

3. Untuk meletakkan tombol onclick load comentar disqus, silahkan kalian cari kode </article> lalu letakkan kode berikut di atas kode tersebut :

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

4. Nah sekarang kita tinggal merapikan tampilan widget komentar disqus nya, silahkan letakkan kode berikut ini di atas kode </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: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:# 3371d6;border-radius:2px}
.comments-blocks button:hover{background:#02b62bc}

SIMPAN TEMPLATE.

Catatan : 

  • Jika semua langkah di atas sudah di terpakan, tapi konten komentar tidak tampil, yang muncul adalah pesan seperti ini We were unable to load disqus ……… itu berarti Disqus Shortname yang kalian masukan salah.
  • Jika tombol onclick tidak berfungsi, silahkan hapus terlebih dahulu kode yang berkaitan dengan Disqus sebelumnya (Sebelum Memakai Cara ini)

Nah demikian adalah sdikit tutorial cara memasang load komentar disqus di blog untuk mempercepat loading blog. Semoga membantu dan selamat mencoba

About Mas Anggading

"Jika seseorang meninggal dunia, maka terputuslah amalannya kecuali tiga perkara yaitu: sedekah jariyah, ilmu yang dimanfaatkan, atau do’a anak yang sholeh” (HR. Muslim no. 1631)

Check Also

Cara Membuat Email Edu Disanta Monica Collage Dengan Mudah

Selamat Datang Di Media Pembelajaran Online. Di postingan sebelumnya kalian pasti telah membaca tentang cara membuat akun …

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *