5 Juni 2018

Memuat Komentar Disqus Dengan Klik Tombol

Fitur komentar Disqus merupakan salah satu fitur komentar paling populer yang banyak dipasang di blog. Memasang komentar Disqus untuk Blogger juga termasuk gampang. Biasanya komentar Disqus secara otomatis akan termuat begitu halaman sebuah blog sudah terbuka. Agar fitur komentar Disqus ini tidak termuat secara otomatis sehingga tidak membebani loading halaman blog pada saat dibuka, kita bisa membuat sebuah tombol komentar yang akan memuat komentar Disqus ketika tombol tersebut diklik.

Untuk memasang tombol komentar Disqus seperti yang ada di blog Sentra Blogger ini, hal pertama yang perlu diperhatikan adalah jika di blog Anda sudah terpasang widget Disqus, silakan hapus terlebih dahulu supaya tutorial ini bisa bekerja dengan baik. Berikut langkah-langkahnya :
1. Pastikan blog Anda sudah terpasang script JQuery, jika belum silakan pasang kode berikut setelah atau di bawah <head>. Jika sudah ada, abaikan saja.

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
2. Pasang kode CSS berikut dalam <style> :

button#bloggerDisqus {
    background-color:#42c0fb; /* Warna tombol */
    color: #0000ff;
    font: normal 600 16px 'Roboto',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#bloggerDisqus:hover {
    background: #ea6153; color: #fff; /* Warna tombol ketika disorot */
}
3. Tambahkan kode HTML berikut sebelum atau di atas <div class='comments' id='comments'>

<div class="disqus-blogger-comment-block"/>
<button id="bloggerDisqus">Buka Komentar</button> <!--Tulisan di tombol -->
4. Berikutnya simpan kode berikut sebelum atau di atas </body>

<b:if cond='data:view.isPost'> <script> //<![CDATA[
    // Call Disqus On Click by Sentra Blogger
    window.disqus_blogger_current_url = $('link[rel=canonical]').attr('href');
    window.disqus_shortname = 'sentra-blogger'; // Ganti dengan shortname Disqus Anda
    $('#bloggerDisqus').on('click', function(){
    $.ajax({
        type: 'GET',
        url: '//' + disqus_shortname + '.disqus.com/blogger_item.js',
        dataType: 'script',
        cache: true
    });
    $(this).fadeOut();
    });
//]]> </script> </b:if>
5. Simpan pengaturan templat. Selesai dan lihat hasilnya.
Comment Policy: Silakan berkomentar yang relevan dan mohon tidak menyertakan link aktif!
Leave comment