Mempercepat Blog #5 - Memanggil Komentar Disqus Ketika Klik Tombol

Cara memuat komentar Disqus dengan klik tombol untuk mempercepat loading blog. Bisa untuk Blogger, Wordpress, dan platform website / blog lainnya. Load Disqus comment onclick button.

How To Call Disqus Comment onClick Button

Hai hai. Blog Igniel balik lagi dengan satu trik yang bisa membantu untuk mempercepat loading blog. Seperti judulnya, ini berhubungan dengan kotak komentar Disqus. Normalnya, komentar Disqus akan langsung termuat ketika halaman blog sudah terbuka. Ini menjadi salah satu hal yang memperlambat kecepatan blog. Skor di GTmetrix, Page Speed Insight, atau di tempat lainnya jadi susah dapat A / 100%.

Dengan trik ini, komentar Disqus tidak langsung termuat ketika halaman blog terbuka. Jadi sudah jelas kan nilai plusnya apa. Ini akan mempercepat loading blog karena script Disqus baru dipanggil ketika visitor melakukan klik.


Cara Memuat Komentar Disqus Dengan Klik Tombol

SPertama-tama pasang dulu kotak komentar Disqus ke blog. Caranya ada di artikel yang berjudul Cara Memasang Komentar Disqus di Blogger. Setelah itu lanjut dengan panduan di bawah.


1. Untuk Blogger

  1. Percantik dulu tampilan tombolnya dengan menambahkan beberapa baris kode CSS. Simpan kode berikut DI ATAS ]]></b:skin>. Atau bisa juga DI BAWAH <style>.
    /* Call Disqus On Click by IGNIEL.COM */
    button#ignielDisqus {
        background-color: #008c5f; /* Warna tombol */
        color: #fff;
        font: normal 600 16px Tahoma,sans-serif;
        line-height: 0px;
        text-align: center;
        width: 100%;
        border-width: 0px;
        padding: 20px 10px;
        cursor: pointer;
        transition: all .5s ease;
        border-radius: 3px;
        -moz-border-radius: 3px;
    }
    button#ignielDisqus:hover {
        background: #1d2129; /* Warna tombol ketika disorot */
    }
  2. Pastikan di blog kamu sudah terpasang script jQuery. Kalau belum, pasang kode ini SESUDAH / DI BAWAH <head>. Kalau sudah, abaikan saja.
    <script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
  3. Tambahkan kode HTML ini, posisinya boleh dimanapun. Tergantung kamu mau memanggilnya dimana. Normalnya sih komentar Disqus disimpan SESUDAH / DI BAWAH <div class='comments' id='comments'>.
    <div class="disqus-blogger-comment-block"/>
    <button id="ignielDisqus">Buka Komentar</button> <!--Tulisan di tombol -->
  4. Next. Simpan kode ini SEBELUM / DI ATAS </body>.
    <b:if cond='data:view.isPost'> <script> //<![CDATA[
        // Call Disqus On Click by IGNIEL.COM
        window.disqus_blogger_current_url = $('link[rel=canonical]').attr('href');
        window.disqus_shortname = 'igniel'; // Ganti dengan shortname Disqus kamu
        $('#ignielDisqus').on('click', function(){
        $.ajax({
            type: 'GET',
            url: '//' + disqus_shortname + '.disqus.com/blogger_item.js',
            dataType: 'script',
            cache: true
        });
        $(this).fadeOut();
        });
    //]]> </script> </b:if>
  5. Selesai. Simpan pengaturan dengan klik tombol Save theme.

2. Untuk Wordpress dan Platform Website / Blog Lainnya

Script pertama khusus untuk Blogger ya. Nah, yang selanjutnya bisa untuk semua jenis website / blog.

  1. Untuk CSS, kodenya sama. Mau disesuaikan dengan template masing-masing juga bisa.
  2. Ini HTMLnya. Simpan di tempat komentar Disqus ingin dipanggil.
    <div id="disqus_thread"></div>
    <div id="disqus-comments">
        <button id="ignielDisqus">Buka Komentar</button> <!--Tulisan di tombol -->
    </div>
  3. Ini Javascriptnya. Ada sedikit perbedaan di alamat javascript Disqus yang dipanggil.
    <script> //<![CDATA[
        // Call Disqus On Click by IGNIEL.COM
        $('#ignielDisqus').on('click', function(){
        var disqus_shortname = 'igniel' // Ganti dengan shortname Disqus kamu
            $.ajax({
                 type: 'GET',
                 url: '//' + disqus_shortname + '.disqus.com/embed.js',
                 dataType: 'script',
                 cache: true
            });
            $(this).fadeOut();
        });
    //]]> </script>

3. Demo / Preview

Buka halaman ini biar tahu hasilnya seperti apa.

Super simple kan scriptnya? Budayakan komentar kalau sudah membaca ya. Semoga sukses mempraktekan cara buka komentar Disqus dengan klik tombol diatas. Enjoy~

46
Mempercepat Blog #5 - Memanggil Komentar Disqus Ketika Klik Tombol
Mempercepat Blog #5 - Memanggil Komentar Disqus Ketika Klik Tombol
Cara memuat komentar Disqus dengan klik tombol untuk mempercepat loading blog. Bisa untuk Blogger, Wordpress, dan platform website / blog lainnya. Load Disqus comment onclick button.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

46 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • RakaNata21
    24 Desember, 2021
    Profil: https://www.blogger.com/profile/06818315554818839614
    Mbak kalo box komentar kaya diblog ini bisa dibagiin gak
  • Rizuku
    28 September, 2021
    Profil: https://www.blogger.com/profile/02335031726263220503
    Permisi Min Saya Ingin bertanya di tema saya gk ada

    class='comments' id='comments'

    nah cara pemasangan script diatas itu caranya gmn yah?
  • ⠀
    14 April, 2021
    Profil: https://www.blogger.com/profile/14861092182195724906
    Terimakasih Mbak Igniel Work Disqus Nya Jadi Cepet Nggak Berat, Soal Nya Juga Blog Forum
  • ⠀
    14 April, 2021
    Profil: https://www.blogger.com/profile/14861092182195724906
    Mbak Template Punya Saya Kok Nggak Ada Kode <div class='comments' id='comments'
  • Admin
    15 Juli, 2020
    Profil: https://www.blogger.com/profile/09696948603376299266
    terimakasih kak igniel work tapi emang harus diapus dulu widget lamanya.
  • Penaku
    03 Juni, 2019
    Profil: https://www.blogger.com/profile/01397953360501943321
    Mbak maaf mah tanya , itu jenis iklan apa ya yg dalam artikel, seolah-olah iklan ada di bawah artikel , dan ada gk tutor custom komentar biar kaya begini tampilannya
    • Igniel
      04 Juni, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Namanya iklan parallax.

      Untuk tampilan komentar cek:
      https://www.igniel.com/2018/09/komentar-baru-blogger.html
  • Ifan
    27 Mei, 2019
    Profil: https://www.blogger.com/profile/09223266144464219345
    mau nanya, ini di website saya komen nya terlalu lebar untuk wordpress.
    • Igniel
      27 Mei, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Alamat blognya apa? Biar saya cek.
  • Nasrul Umam
    22 Mei, 2019
    Profil: https://www.blogger.com/profile/04472417949513919666
    Tanya mbak, saya pasang script di atas tetapi hanya pada halaman yang di tentukan, kadang bisa di klik lalu muncul box disqus nya, tetapi sering jg hanya berubah menjadi hitam saja tombol buka komentar nya . Apa yg salah ya?
    https://www.kum3n.com/p/discussion.html
    • Azid Zainuri, S.Pd
      23 Mei, 2019
      Profil: https://www.blogger.com/profile/04057497464899163227
      klo saya lihat sepertinya kakaknya belum memasang script Jquery jadi tidak berfungsi.
    • Nasrul Umam
      24 Mei, 2019
      Profil: https://www.blogger.com/profile/04472417949513919666
      Fix, penempatan jquery kurang pas. 😄😄
  • Marhaen
    19 Mei, 2019
    Profil: https://www.blogger.com/profile/01277602508476376781
    Work kak. Tapi di blogku kok jadi ada dua ya. Komentar Disqus sama google. Tapi kalo komentar googlenya diisi, komentar disqusnya (tombol buka komentarnya)ilang . Dan gak sama di halaman postingan satu dan lainnya.
    • Marhaen
      19 Mei, 2019
      Profil: https://www.blogger.com/profile/01277602508476376781
      Kalo mau cek, bisa liat di blogku
      https://hasanaskary.blogspot.com . Yg postingan berjudul rejeki itu pasti ada beda dengan postingan sebelum²nya. Mungkin ini bisa jadi daftar kasus yang akan kk pecahkan
    • Igniel
      23 Mei, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Saya cek work kok. Komentarnya muncul di semua post
  • Sakti
    15 Mei, 2019
    Profil: https://www.blogger.com/profile/16028105200911967298
    Ini buat wp bisa gak yah ?
  • Admin
    29 April, 2019
    Profil: https://www.blogger.com/profile/18115622998643896186
    kalo di wordpress kode nya taruh mana aja nih?
  • Rich Ard
    24 April, 2019
    Profil: https://www.blogger.com/profile/08181588658968702674
    akhirnya, setelah 2 tahun mencari-cari tutorial memasang tombol buka komentar, ini yang benar-benar work. terima kasih atas penjelasannya kak, sehat selalu yah buat kk. aamin. :)
  • Top Gadget Indonesia
    27 Februari, 2019
    Profil: https://www.blogger.com/profile/14932045704187137301
    Mbak punya Saya di desktop bisa terloading, tetapi saat di mobile kok nggak bisa terloading yang mbak. Mohon jawabannya 😐
  • Andhika Elfriza
    19 Februari, 2019
    Profil: https://www.blogger.com/profile/09323828802334580953
    Mba itu kok tombol Buka Komentarnya juga tampil di Halaman Statis yah? tapi gak berfungsi link nya. Supaya tidak tampil di Halaman Statis gimana yah mba?
    • Igniel
      20 Februari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kasih tag kondisional aja.
      <b:if cond='data:view.isPost'>
      kode tombol disini
      </b:if>
    • Andhika Elfriza
      20 Februari, 2019
      Profil: https://www.blogger.com/profile/09323828802334580953
      Iyah mba semalem iseng² berhasil, tapi yg di atas tutup body kode kondisionalnya saya hapus mba, itu ada efek sampingnya gak yah?
  • Syaiful bahri
    10 Februari, 2019
    Profil: https://www.blogger.com/profile/10418050987299538966
    Mba kode query diblog saya versi 1.7.1 apakah tetap bisa ?
  • Tedi Eka
    05 Januari, 2019
    Profil: https://www.blogger.com/profile/17195151981500818409
    Mbak saya coba pasang di blog kok gk bisa terload scriptnya ya? Padahal sudah ada jquerynya. Ini urlnya, mohon dicekkan kalau ada waktu

    https://bloggtipssehat.blogspot.com/2017/09/cara-mengobati-sakit-gigi-dengan-cepat.html
    • Igniel
      05 Januari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Scriptnya terhalang oleh script lain yang error. Coba hapus fungsi ini:
      function blockLinks(e,n){.....}
    • Tedi Eka
      05 Januari, 2019
      Profil: https://www.blogger.com/profile/17195151981500818409
      Sudah saya hapus mbak, tapi masih gk mau terload. Apa mungkin masih ada script lain dari komentar blogger yang belum saya hapus?
    • Igniel
      05 Januari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Coba tambahkan elemen baru di bawah script disqus tadi.
      <div class="comments" id="comments"></div>
    • Tedi Eka
      05 Januari, 2019
      Profil: https://www.blogger.com/profile/17195151981500818409
      Akhirnya beres hehe.. Makasih banyak bantuannya mbak.
  • Bachrul Uluum
    02 Desember, 2018
    Profil: https://www.blogger.com/profile/11414951743210637729
    shortname disqus tu yang nama komentar disqus kita ya mbak?
  • Mayeka
    23 November, 2018
    Profil: https://www.blogger.com/profile/03699519579037919477
    mbk punya saya di halaman statis kok gk muncul ya kalo di postingan biasa ada
    • Igniel
      23 November, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kayanya kodenya disimpen di tag kondisional post. Simpen di luar tag kondisional ya.
  • Pierre Wee
    03 Juni, 2018
    Profil: https://www.blogger.com/profile/14155530369733931832
    udah coba pasang, gak works :(
    • Pierre Wee
      03 Juni, 2018
      Profil: https://www.blogger.com/profile/14155530369733931832
      akhirnya bisa diaplikasikan setelah widget Disqus yang sudah ada sebelumnya saya hapus..
    • Igniel
      04 Juni, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Iya memang harus dihapus dulu biar gak bentrok. Semangat terus ngeblognya.
    • Azid Zainuri, S.Pd
      29 Desember, 2018
      Profil: https://www.blogger.com/profile/04057497464899163227
      makasih mbak. work.
      kalau buat komment kayak milik kak igniel yang ini gmana kak?
      ini udah dimodif ya.
  • Rajib Daiki
    07 Maret, 2018
    Profil: https://www.blogger.com/profile/02701487610952402554
    kok ga work y
    • Igniel
      07 Maret, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kalo semua kode terpasang dengan benar, pasti work kaya demonya.
    • Rajib Daiki
      07 Maret, 2018
      Profil: https://www.blogger.com/profile/02701487610952402554
      hmm apa w ss semua kode yg w pasang
    • Rajib Daiki
      07 Maret, 2018
      Profil: https://www.blogger.com/profile/02701487610952402554
      saya kirim ss nya di komentar fp artikel ini
    • Rajib Daiki
      08 Maret, 2018
      Profil: https://www.blogger.com/profile/02701487610952402554
      thax dh bisa itu ga muncul gara gara w taru di bawah html nya dibawah tpi pas di taru di atas baru bisa
  • f
    07 Maret, 2018
    Profil: https://www.blogger.com/profile/10633872232424020151
    akhirnya work hehe
    • Timon Adiyoso
      07 Maret, 2018
      Profil: https://www.blogger.com/profile/08315363282316702825
      Saya cek blog mas... Klik Buka Komentar ngak muncul muncul komentarnya... Blank
    • Igniel
      07 Maret, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Saya buka, muncul kok mas. Emang agak lama karena komentar Disqus itu berat.
  • f
    07 Maret, 2018
    Profil: https://www.blogger.com/profile/10633872232424020151
    kok gk work ya mbk?