Cara Memasang Tombol Show Disqus Comments Di Blog

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
Cara Memasang Tombol Show Disqus Comments Di Blog. Seperti Tutorial sebelumnya tentang show hide kolom komentar blogger di blog bisa dilakukan dengan memasang kode css dan javascript tertentu, dan tentunya tutorial seperti ini sudah banyak dibuat diluaran sana sob.
Disini saya akan berbagi sebuah tutorial yang mirip dengan apa yang saya katakan diatas tetapi bedanya yang akan dimodifikasi disiini adalah Kolom Komentar Disqus.
Ketika kita memasang Disqus Comment di blog maka secara default kolom komentar dari Disqus akan tampil secara otomatis, dan tentunya ini akan memakan waktu proses loading dari blog sobat, sebenarnya untuk mengatasi hal tersebut ada satu trik yang bisa membuat kolom komentar Disqus tersebut tidak secara otomatis tampil di blog kita melainkan jika kita mengklik tombol Disqus Comment untuk menampilkannya, dan ini kan membuat loading blog sobat tidak terpengaruhi oleh Disqus Comment, jika sobat ingin memasangnya di blog sobat silahkan ikuti langkahnya dibawah ini.

Cara Memasang Tombol Show Disqus Comments Di Blog
Cara Memasang Tombol Show Disqus Comments Di Blog

Langkah-langkah Memasang Tombol Show Disqus Comment :

Langkah-1 : Login Blogger, Klik menu Template > Edit HTML
Langkah-2 : Simpan kode JavaScrit di bawah ini, tepat sebelum tag </head> :

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
    $('.show-comments').on('click', function(){
          var disqus_shortname = 'DISQUS-USERNAME'; // Replace this value with *your* username.
          // ajax request to load the disqus javascript
          $.ajax({
                  type: "GET",
                  url: "http://" + disqus_shortname + ".disqus.com/embed.js",
                  dataType: "script",
                  cache: true
          });
          // hide the button once comments load
          $(this).fadeOut();
    });
});
</script

Silahkan Ganti DISQUS-USERNAME dengan DISQUS-USERNAME milik sobat.



Langkah-3 : Temukan kode <b:includable id='comments' var='post'> dan letakan kode dibawah tepat setelah kode diatas.


<button class="show-comments">Load Disqus comments</button>
<div id="disqus_thread"></div>

Langkah-4 : Simpan Template sobat dan lihat hasilnya.

Demikianlah Tutorial mengenai Cara Memasang Tombol Show Disqus Comments Di Blog, semoga ada manfaatnya ya, dan saya sangat senang jika sobat dapat berkomentar atau memberi masukan mengenai toturial diatas.

"Hendaknya kesibukan kita lebih berfokus pada penyempurnaan penunaian kewajiban-kewajiban kita kepada Tuhan, sebab Dia, Tuhan yang sekaligus Pemberi Rejeki pasti akan membalas penunaian kewajiban tersebut dengan anugrah-Nya yang akan mencukupi kebutuhan kita." my fav words!

About the Author

Nothing specials, but what i do not know , I learn fast... as fast as i ate pempek :)

13 komentar

  1. Saya coba yang ini di mobile tidak work mas
    Coba yang pakai pure javascript.
  2. Yang begini ya KAng...

    Show Comments




    // Replace labnol with your disqus shortname
    var disqus_shortname = "DISQUS-USERNAME";

    // Put the permalink of your web page / blog post
    var disqus_url = "http://example.com/blog-post";

    // Put the permalink of your web page / blog post
    var disqus_identifier = "http://example.com/blog-post";

    var disqus_loaded = false;

    // This is the function that will load Disqus comments on demand
    function disqus() {

    if (!disqus_loaded) {

    // This is to ensure that Disqus widget is loaded only once
    disqus_loaded = true;

    var e = document.createElement("script");
    e.type = "text/javascript";
    e.async = true;
    e.src = "//" + disqus_shortname + ".disqus.com/embed.js";
    (document.getElementsByTagName("head")[0] ||
    document.getElementsByTagName("body")[0])
    .appendChild(e);
    }
    }




    window.onscroll = function(e) {
    if ((window.innerHeight + window.scrollY)
    >= document.body.offsetHeight)
    {
    if (!disqus_loaded) disqus();
    }
    };
  3. Yang begini apa ya kang?


    Show Comments




    // Replace DISQUS-USERNAME with your disqus shortname
    var disqus_shortname = "DISQUS-USERNAME";

    // Put the permalink of your web page / blog post
    var disqus_url = "http://example.com/blog-post";

    // Put the permalink of your web page / blog post
    var disqus_identifier = "http://example.com/blog-post";

    var disqus_loaded = false;

    // This is the function that will load Disqus comments on demand
    function disqus() {

    if (!disqus_loaded) {

    // This is to ensure that Disqus widget is loaded only once
    disqus_loaded = true;

    var e = document.createElement("script");
    e.type = "text/javascript";
    e.async = true;
    e.src = "//" + disqus_shortname + ".disqus.com/embed.js";
    (document.getElementsByTagName("head")[0] ||
    document.getElementsByTagName("body")[0])
    .appendChild(e);
    }
    }




    window.onscroll = function(e) {
    if ((window.innerHeight + window.scrollY)
    >= document.body.offsetHeight)
    {
    if (!disqus_loaded) disqus();
    }
    };
  4. Bukan itunya, yang ga jalannya dari jquery show comment nya, coba pakai yang kompi ajaib itu untuk load comment nya.
  5. ohw... ok kang saya pake versi kompi ajaib aja....
  6. kalo versi kompiajaib dijamin work kayaknya dah hehehehe
  7. Sekarang muncul mas :)
  8. mantapppp... akhirnya.... muncul juga ya kang... hehehe
  9. Script yang agan kasih sudah bisa tampil di hp blm?
  10. kalo script di atas, setelah dicoba oleh kang Adhy ,ga nampil di mobile gan... pake yg ini aja versi kompiajaib http://www.antoncabon.us/2015/10/cara-memasang-tombol-show-hide-comment-disqus.html
    saya update nanti untuk bisa tampil di versi mobile
  11. Oh iya kang. saya coba dulu :)
  12. tapi ga tampil bos :3
    cek di
    http://www.mastamvan.blogspot.com/
  13. atau mau coba yang ini lebih cool http://www.antoncabon.us/2015/10/cara-menampilkan-disqus-comment-hanya-ketika-discroll.html
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
Site is Blocked
Sorry! This site is not available in your country.