Skip to main content

Cara Membuat Tombol Load Comment Disqus dengan Onclick Event

Cara Membuat Tombol Load Comment Disqus dengan Onclick Even - Pada kesempatan kali ini saya akan membagikan cara membuat tombol load komentar disqus, atau dalam artian kita menyembunyikan kolom komentar disqus ini.

Cara kerja Onclick Event Disqus ini adalah dengan menyembunyikan komentar disqus dengan tombol show comment/load comment untuk menalpilkannya kembali. Dalam artian komentar anda akan disembunyikan terlebih dahulu dan akan ditampilkan kembali jika pengunjung mengklik load comment tersebut.

Saya sendiri pun menggunakan fitur tombol load ini, dengan tujuan untuk mempercepat proses memuat artikel saya, dan menyembunyikan komentar yang terlalu banyak. Saya juga menyarankan penggunakan onclick ini, karena akan meningkatkan skor Pagespeed Insights dalam arikel blog anda.

Cara Memasang Tombol Load Comment Disqus di Blogger

1. Buka Blogger anda > pilih Tema > pilih Edit HTML > kemudian cari kode ini:

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

*Untuk memudahkan pencarian salin saja kode yang bercetak merah saja

2. Kemudian ganti dengan kode 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;USER-DISQUS&#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 USER-DISQUS dengan User Name Akun Disqus anda

3. Letakkan kode berikut ini tepat berada di atas kode kode </article>

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

4. Kemudian kode CSS ini tepat berada di atas kode ]]></b:skin> atau </style>

/* Disqus comment disqus */
#comments,.comment-form, .comment_reply_form .comment-form{display:none;}
#comments-block{display:none;background:#fff;margin:10px 0 0 0;padding:20px;box-shadow:inset 0 0 1px 0 #aaa;}
.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:#2c3e50;border-radius:2px}
.comments-blocks button:hover{background:#2c3e50}

5. Jika pilih Simpan Tema, Kemudian silahkan lihat hasilnya.

*Demonya bisa dilihat pada blog saya sendiri

Catatan:

1. Jika saat memuat Load Comment Terdapat tulisan seperti "unable load to disqus..." Berarti USERNAME disqus yang anda masukkan salah

2. Jika pada tampilan mobile tidak dapat terbuka, ubah min-width: 350px menjadi min-width: 250px

Cukup sekian tutorial dari caya tentang Cara membuat Load Komentar Disqus di Blogger, Jika ada hal yang kurang dimengerti bisa langsung menuju kolom komentar, Terimakasih.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar