Cara Memasang Tombol Show-Hidden Komentar Disqus di Blogger

Melanjutkan artikel sebelumnya yang berjudul cara memasang komentar Disqus di artikel blog, kali ini saya akan menjelaskan tutorial bagaimana caranya memasang tombol Show-Hidden komentar Disqus di Blogger / Blogspot.

Buat pembaca yang sebelumnya sudah menerapkan tutorial pertama (Link di atas), maka kembalikan keadaan Template Blogger-nya ke semula.

Mengapa? Pasalnya, artikel sebelumnya dan artikel yang sedang kalian baca ini, merupakan tutorial yang berbeda.

Dikatakan berbeda karena tutorial ini menggunakan HTML, tambahan CSS, dan JavaScript (Js) yang sedikit berbeda agar tombol Show dan Hidden mau tampil di Blogger.

Cara Memasang Tombol Show-Hidden Komentar Disqus di Blogger

Login ke Blogger > Tema > Edit HTML

Simpan kode CSS di bawah ini, di atas kode ]]></b:skin> atau </style>

/* Call Disqus On Click Event by IGNIEL.COM and https://kodebloggerku.blogspot.com */
button#ignielDisqus {
       background-color: #008c5f;
       color: #fff;
       font: normal 500 18px Georgia,sans-serif;
       line-height: 0;
       text-align: center;
       width: 100%;
       border-width: 0;
       padding: 20px 10px;
       cursor: pointer;
       transition: all .5s ease;
       border-radius: 3px
}
button#ignielDisqus:hover {
       background: #1d2129 /* Perubahan warna tombol ketika disorot */
}

Lalu tambahkan Script jQuery di bawah ini, di atas kode </head>

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

Kalau Script jQuery di atas sudah ada di Template Blogger, maka gak perlu dipasangkan lagi.

Selanjutnya simpan kode di bawah ini, di atas kode </body>

<b:if cond='data:view.isPost'> <script> //<![CDATA[
       window.disqus_blogger_current_url = $('link[rel=canonical]').attr('href');
       window.disqus_shortname = 'kodeblogger';
       $('#ignielDisqus').on('click', function(){
       $.ajax({
       type: 'GET',
       url: '//' + disqus_shortname + '.disqus.com/blogger_item.js',
       dataType: 'script',
       cache: true
});
$(this).fadeOut();
});
//]]> </script> </b:if>

Ganti ID Disqus kodeblogger di atas - yang sudah ditandai, dengan ID Disqus yang kalian punya.

Terakhir, kalian harus menambahkan HTML di bawah ini ke dalam Template Blogger. Posisinya boleh di mana saja, tergantung keinginan kalian.

<div class="disqus-blogger-comment-block"/>
<button id="ignielDisqus">Buka Komentar</button>

Biasanya HTML di atas diletakkan DI BAWAH kode <div class='comments' id='comments'>. Bisa juga ditempatkan di atas kode atau di bawah kode <b:include data='post' name='comment_picker'/>. Bebas! Tergantung koding dari tema blog dan keinginan kalian.

Sampai di sini, sudah selesai!

Itulah tutorial bagaimana cara menampilkan dan memunculkan komentar Disqus (Show / Hidden) di Blogger / Blogspot.

Sumber: https://www.igniel.com/2018/03/load-disqus-onclick-button.html