Cara Memasang Komentar Disqus dengan Onclick Load Event

Baca Juga

Disqus merupakan sistem yang digunakan untuk melakukan chatting yang biasa digunakan pada komentar yang berada pada blog ataupun web. Kerana pada penerapannya, Disqus mudah digunakan dan banyak fitur - fitur yang telah disediakan. Hal inilah yang membuat si Disqus ini banyak digunakan.

Pada kesempatan kali ini saya akan membagikan Cara Memasang Komentar Disqus dengan Onclick Load Event dengan tujuan untuk mempercepat loading blog. Hal tersebut di karenakan komentar pada Disqus akan tertunda dan seakan komentar pada Disqus tersembunyi. Komentar pada Disqus tidak akan muncul sebelum pengunjung melakukan Click Load Comment.

Memasang Komentar Disqus dengan Onclick Load Event

1. Login ke akun blogger

2. Selanjutnya pilih Tema > Edit HTML

3. Cari Kode di bawah ini dengan menggunkan tombol CTRL+F pada keyboard

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

4. Kemudian, ganti kode tersebut dengan kode di bawah ini

/* Disqus Onclick Load Event */
<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 MILIK ANDA&#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>

5. Ganti user Disqus dengan user Disqus yang anda miliki dengan cara masuk ke menu Dashboard Klik Admin > Settings > General

6. Copy kode di bawah ini dan letakan tepat di atas 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>

7. Lalu tambahkan kode dibawah ini tepat di atas  ]]></b:skin> atau  </style>

/* Disqus comment Carayunik.com */
#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:30px auto;width:100%;outline:none;border:none;cursor:pointer;font-weight:700;color:#fff;padding: 15px 20px;font-size:16px;background:#49ACE1;border-radius:3px;letter-spacing:.5px;position:relative;overflow:hidden;box-shadow: 0 2px 3px rgba(0,0,0,0.06), 0 2px 3px rgba(0,0,0,0.1);transition: all .3s;}
.comments-blocks button:hover{background:#287ea3}

8. Simpan dan lihat hasilnya.

Versi Warna Gradient Pada Load Comment

Bagi teman - teman yang ingin merubah warna menjadi gradient, silahkan ganti kode CSS diatas dengan kode CSS dibawah ini.

/* Disqus comment Carayunik.com */
@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
#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:30px auto;width:100%;outline:none;border:none;cursor:pointer;font-weight:700;color:#fff;padding: 15px 20px;font-size:16px;border-radius:3px;letter-spacing:.5px;position:relative;overflow:hidden;box-shadow: 0 2px 3px rgba(0,0,0,0.06), 0 2px 3px rgba(0,0,0,0.1);transition: all .3s;background:#49ACE1;background:linear-gradient(-50deg,#ee5952,#ea3a7e,#20aadb,#23e0b3);background-size:320% 200%;animation:Gradient 15s ease infinite}}
.comments-blocks button:hover{background:#287ea3}

Demikian yang bisa saya sampaikan tentang Cara Memasang Komentar Disqus dengan Onclick Load Event. Apabila teman-teman kurang paham tentang artikel yang saya bagikan, silahkan berkomentar atau hubungi saya melalui form yang sudah saya sediakan. Sekian dari saya, Terima Kasih :(

Share this post