Cara Membuat Komentar Disqus Menjadi Show Hide

Cara Membuat Komentar Disqus Menjadi Show Hide - Membuat komentar Disqus menjadi Show and Hide pastinya akan membuat kecepatan blog anda menjadi lebih cepat, sebelum menerapkan komentar Disqus menjadi Show Hide, loading blog pasti akan menjadi lambat hal itu terjadi karena script load komentar Disqus yang berat, alternatif lainnya untuk mengatasi loading blog yang lambat karena komentar Disqus silahkan baca Cara Men-Defer Komentar Disqus Di Blogger.

Cara membuat komentar Disqus menjadi Show Hide maksudnya adalah memuat komentar Disqus dengan Onclick Event, jelasnya kita akan membuat sebuah tombol yang apabila di klik akan memuat kolom komentar Disqus, contoh nya ada pada blog ini silahkan cek di bawah artikel ini terdapat tombol Load Comment.

Cara Membuat Komentar Disqus Menjadi Show Hide

Jika blog sudah terpasang Widget Disqus dan script yang berkaitan dengan Disqus (CSS juga termasuk) silahkan di hapus dulu, agar tidak ada kesalahan setelah menerapkan tutorial ini, kemudian pastikan di dalam template blog sudah ada link fontawesome.

Pertama login ke blogger > Template Editor > Cari kode di bawah ini.

<b:includable id='comments' var='post'>
.......
.......
.......
</b:includable>

Tambahkan kode di bawah ini tepat di bawah kode di atas.

<b:includable id='disqus-comment' var='post'>
<script type='text/javascript'>
var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
                if (!disqus_blogger_current_url.length) {
                    disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
                }
var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
                var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
</script>
</b:includable>

Selanjutnya tambahkan kode di bawah ini tepat sebelum tag </body>.

Ganti SCRIPTSAMPAH dengan username Disqus anda

Sekarang tambahkan CSS di bawah ini sebelum tag </style> atau ]]></b:skin>.

/* Disqus Comments */
#comments{display:none;}
.post-comment-link {visibility:hidden;}
#disqus_thread {background:#fff;margin:10px 0 0 0;padding:20px;box-shadow:inset 0 0 1px 0 #aaa;}
#disqusshow{position:relative;overflow:hidden;display:block;padding:15px 20px;text-align:left;color:#222;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;margin:10px 0;background:#fff;border:1px solid #999;transition:all .3s}
#disqusshow:after{display:inline-block;content:"\f086";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#e85e54;border-left:1px solid #999;top:0;right:0;padding:12px 20px;position:absolute}
#disqusshow:hover,#disqusshow:active{color:#f8695f}

Selanjutnya cari kode di bawah.

<div class='comments' id='comments'>

Tambahkan kode di bawah ini tepat di atas kode yang di cari.

<div id='disqusshow' onclick='load_Comments()'>Load comments</div>
<div id='disqus_thread'/>

Dan yang terakhir adalah untuk menampilkan jumlah komentar Disqus di halaman Home dan Postingan, caranya adalah dengan menambah kode di bawah ini pada post meta atau post info sesuai dengan yang digunakan pada template.

<a expr:href='data:post.url + &quot;#disqus_thread&quot;' title='Comments Count'> Comments</a>

Simpan Template, silahkan cek hasilnya, Demo membuat komentar Disqus Show Hide bisa langsung dilihat di bawah artikel ini.

Demikian Tutorial Cara Membuat Komentar Disqus Menjadi Show Hide, Selamat mencoba

Artikel Terkait

Cara Membuat Komentar Disqus Menjadi Show Hide

4/ 5

Oleh Unknown

Unknown 2:56 AM