Membuat Komentar Disqus Show Hide

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 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 
19 komentar
  1. wah bagus nih perlu di coba heheheee :D

    ReplyDelete
  2. CTRL+D dulu lumayan buat blog ku biar sedikit tampan :v

    ReplyDelete
  3. ok mantap tutorialnya tapi saya lebih suka komen bawaan bloger sama facebook dulu sudah pernah pake komen disquss ok gan nice post gan

    ReplyDelete
    Replies
    1. Iya gan, tadinya saya sudah beralih ke disqus tapi cocoknya dengan komen bawaan.

      Delete
  4. wah mantep nih bisa dicoba biar tamvan blog nya

    ReplyDelete
    Replies
    1. Iya gan :3 Kalo tamvan nantinya banyak yg suka :-d

      Delete
  5. Mantap tutorialnya.Bener Gan kayaknya lebih enak bawaan bloger simple :D NICE Book mark dulu kaya yang lain

    ReplyDelete
  6. kayaknya harus dicoba. biar gue tamvan :v

    ReplyDelete
  7. nice infonya jadi banyak tau tentang cara setting blog nih

    ReplyDelete
  8. Nice post mas, thanks Tutorial nya

    ReplyDelete
  9. Udh ane coba berhasil gan, thanks ya :D

    ReplyDelete
  10. makasih gan tutornya :D saya sudah berhasil nice post deh

    ReplyDelete
  11. saya jarang sekali komen di disqus, :) biasanya saya skip, hehehe

    ReplyDelete
    Replies
    1. Tapi kalo pake komenta disqus banyak keuntungannya gan.
      dapet duit juga, backlink anti spamer dll lah + udah responsive.

      Delete
  12. Kalau Ini Gimana Caranya? https://drive.google.com/file/d/1VlPBqSWFlQ2932hBZkL_i-kfua3IpQk4/view

    ReplyDelete
  13. kayak nya bole juga ni di terapkan. thanks atas informasinya gan. salam kenal

    ReplyDelete