Cara Memasang Tombol Show Disqus Comments Di Blog

Cara Memasang Tombol Show Disqus Comments Di Blog

You might be interested in
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!
Previous Post
Next Post

post written by:

Loading...

13 komentar:

  1. Saya coba yang ini di mobile tidak work mas
    Coba yang pakai pure javascript.

    BalasHapus
  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();
    }
    };

    BalasHapus
  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();
    }
    };

    BalasHapus
  4. Bukan itunya, yang ga jalannya dari jquery show comment nya, coba pakai yang kompi ajaib itu untuk load comment nya.

    BalasHapus
  5. ohw... ok kang saya pake versi kompi ajaib aja....

    BalasHapus
  6. kalo versi kompiajaib dijamin work kayaknya dah hehehehe

    BalasHapus
  7. Sekarang muncul mas :)

    BalasHapus
  8. mantapppp... akhirnya.... muncul juga ya kang... hehehe

    BalasHapus
  9. Script yang agan kasih sudah bisa tampil di hp blm?

    BalasHapus
  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

    BalasHapus
  11. Oh iya kang. saya coba dulu :)

    BalasHapus
  12. tapi ga tampil bos :3
    cek di
    http://www.mastamvan.blogspot.com/

    BalasHapus
  13. atau mau coba yang ini lebih cool http://www.antoncabon.us/2015/10/cara-menampilkan-disqus-comment-hanya-ketika-discroll.html

    BalasHapus