Membuat Komentar Disqus Show Hide

Cara Agar Komentar Disqus Menjadi Show Hide.

Mas Tamvan berbagi cara membuat komentar disqus show hide dan mobail friendly. Bagi kalian yang merubah komentar blog menggunakan komentar disqus, lebih baik di rubah menjadi show hide, supaya tidak memberatkan blog atau website pada saat pertama kali di buka atau di load dan tentunya akan membuat template blog menjadi ringan dan elegan tanpa kepanjangan untuk meringankan proses load di komputer atau handpone.

Tutorial Blogger Lainnya :

• Membuat Search Dan Follower Seperti brilio.net

• Cara Membuat Widget Follower Keren Di Blog

• Widget Recent Post Gallery Template Invert Arlina Design

Tutorial Cara Membuat Komentar Disqus Show Hide

• Login to your blogger.com

• Next, Go to Template' open. Click on Edit HTML, Search Code ]]></b:skin> or </style>

• Input css below right on top code ]]></b:skin> or </style>.

.disqus-title{margin:0;text-align:left;background:#efefef;padding:6px 10px;color:#444!important;font-size:100%;font-weight:500;border: 1px solid #ddd;}
.disqus-loader,#disqus-showhide{float:right;cursor:pointer}
#disqus-showhide{display:none}

• Lanjut, Cari Kode <b:includable id='comments' var='post'>

• Setelah ketemu, ganti semua kode di bawahnya dengan kode script berikut ini.

    <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='toggleDisqus(&apos;disqus-comments&apos;)'>Hide</span></div>
    <div id='disqus-comments'>
     <div class='comments' id='comments'>
    <script type='text/javascript'>
                    var disqus_shortname = &quot;DISQUS-USERNAME&quot;;
                    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>
    </div>
    </div>

Sehingga hasilnya akan menjadi seperti ini.

    <b:includable id='comments' var='post'>
    <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='toggleDisqus(&apos;disqus-comments&apos;)'>Hide</span></div>
    <div id='disqus-comments'>
     <div class='comments' id='comments'>
    <script type='text/javascript'>
                    var disqus_shortname = &quot;DISQUS-USERNAME&quot;;
                    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>
    </div>
    </div>
    </includable>

• Langkah Terakhir gan, masukan script berikut di atas </BODY>

    <script type='text/javascript'>
    //<![CDATA[
    function toggleDisqus(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 = "DISQUS-USERNAME";
    function loadDisqus(){var e=document.getElementById("disqus-loader");e.style.display="none";var e=document.getElementById("disqus-showhide");e.style.display="block";!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="//"+disqus_shortname+".disqus.com/blogger_item.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}();}
    </script>

CATATAN:

Ganti DISQUS-USERNAME dengan Username Disqus Kalian Ok.

• Terakhir Simpan template anda dan Done, Salam Tamvan

Cukup sekian dan terimakasih, semoga artikel ini membantu membuat tampilan blog kalian semakin tamvan ya :)

Jika ada yang mau di tanyakan silahkan bertanya di kolom komentar, insya allah nanti saya balas. 

http://www.antoncabon.us/2015/10/cara-memasang-tombol-show-hide-comment-disqus.html