IwanBerbagi.com - Jika dulu saya pernah share optimasi Komentar Disqus dengan On Scroll yaitu komentar disqus akan terload secara otomatis ketika pengguna sudah sampai pada area komentar disqus. Nah, pada artikel kali ini saya akan optimasi Komentar Disqus dengan menggunakan Onclick Event jadi koementar disqus tidak akan terload sebelum dieksekusi.

Dengan begini komentar disqus hanya akan terload jika pengguna meload komentar disqus tersebut, dan juga ada fitur show hide. Perhatikan gambar berikut :
Membuat Komentar Disqus Dengan Fungsi Load Onclick
Jika kamu tertarik mencobanya kamu bisa mengikuti panduan saya pada kali ini, sebagai informasi. Scriptnya saya dapatkan dari KompiAjaib, namun dengan beberapa penyesuaian dan hanya menggunakan komentar disqus. Karena pada tutorial KompiAjaib itu menggunakan komentar Facebook juga, jika kamu tidak menggunakan komentar Facebook buat apa dipasang.

#Langkah 1

Masih dengan cara yang hampir sama, kamu cari kode berikut :
 <b:includable id='comments' var='post'>
Dan kamu perlu ciutkan kode tersebut hingga terlihat seperti berikut :
<b:includable id='comments' var='post'>…</b:includable>
Ganti semua kode tersebut dengan kode dibawah ini :
  <b:includable id='comments' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='disqus-title' id='disqus-title'>Disqus Comments<span class='disqus-loader' id='disqus-loader' onclick='loadDisqus()'>Load</span><span id='disqus-showhide' onclick='toggleNavPanel2(&apos;disqus-comments&apos;)'>Hide</span></div>
<div id='disqus-comments'>
<div class='comments' id='comments'>
<b:include data='post' name='disqus-comment'/>
</div>    
            </div>
</b:if>
</b:includable>
  <b:includable id='disqus-comment' var='post'>
            <script type='text/javascript'>
                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;;
            </script>
            </b:includable>

#Langkah 2

Setelah itu kamu simpan kode berikut ini tepat diatas kode </body> atau seperti ini &lt;!--</body> atau mungkin miri-miriplah dengan itu.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script>
    //<![CDATA[
function toggleNavPanel2(e){var n=document.getElementById(e),l=document.getElementById("disqus-showhide"),t="none";n.style.display==t?(n.style.display="block",l.innerHTML="Hide"):(n.style.display="none",l.innerHTML="Show")};
    //]]>
var disqus_shortname = &quot;situstemplate&quot;;
function loadDisqus(){var e=document.getElementById(&quot;disqus-loader&quot;);e.style.display=&quot;none&quot;;var e=document.getElementById(&quot;disqus-showhide&quot;);e.style.display=&quot;block&quot;;!function(){var e=document.createElement(&quot;script&quot;);e.type=&quot;text/javascript&quot;,e.async=!0,e.src=&quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_item.js&quot;,(document.getElementsByTagName(&quot;head&quot;)[0]||document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(e)}();}
    </script>
</b:if>
Jangan lupa untuk mengganti id disqus "situstemplate" dengan id disqus yang akan kamu gunakan.

#Langkah 3

Selanjutnya kamu perlu menambahakn css berikut agar tampilannya lebih menarik :
/* DISQUS */
.comments{border:1px solid #f2f2f2;clear:both;line-height:1em;padding:0 12px;}
#comments{padding:12px 20px;margin-top:0;display:none}
#disqus-title{font-size:16px;font-family:Roboto Condensed;font-weight:600;margin:20px 0 0!important;border-bottom:4px solid #fff;background:#f2f2f2;padding:12px}
.disqus-loader,#disqus-showhide{float:right;cursor:pointer}
#disqus-showhide{display:none}
Kamu bisa sesuaikan kode css tersebut agar lebih menarik dan nyetel dengan tampilan template yang kamu gunakan, dan juga ganti pengaturan font-family:Roboto Condensed; sesuai dengan font yang kamu gunakan. Selanjutnya kamu bisa Simpan Template dan lihat hasilnya. Jika ada pertanyaan atau ada yang bingung, kita bahas dikomentar. Selamat mencoba.
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed