Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara buat tombol Buka Tutup Komentar Disqus, Blogger dan Facebook di Template Non AMP (HTML)

Widget komentar pada sebuah Blog/Web sangat besar manfaatnya selain untuk melakukan komunikasi ternyata juga dapat meningkatkan performa blog/web. Blog akan terlihat rapi apabila widget komentar disembunyikan tetapi ada tombol buka tutupnya. Selain membantu meringankan loading blog cara ini juga bisa memaksimalkan pengunjung saat membaca artikel.

Komentar Blogger, Facebook dan Disqus memiliki kelebihan dan kelemahan masing masing. Jika penggunaan Widget Komentar yang bagus saran saya anda menggunakan bawaan Blogger. Bukan berarti Facebook dan Disqus tidak bagus tetapi lebih disarankan saja. Saat ini blog mastimon.com menggunakan Komentar Disqus karena menurut saya tampilannya menarik.

Baca juga : Cara memasang Widget Komentar DISQUS di Blog/Web dengan mudah

Tetapi ada yang membuat saya tidak merasa nyaman saat menggunakan Widget Komentar Disqus. Coba anda perhatikan bahwa saat ini setiap blog yang menggunakan komentar Disqus pasti ada Iklan tampil bawaan Disqus. Disitu saya merasa sedih karena merasa sia sia menampilkan iklan tersebut. Penghasilan dari iklan Disqus cukup kecil dan ada batasan jika inggin gajian.

Menyiasatinya supaya iklan Disqus tidak tampil secara langsung adalah menyembunyikan Widget dan membuat tombol Buka Tutup (Show Hide) Komentar tersebut. Anda bisa lihat Tombol Buka Tutup Komentar blog mastimon.com ini, cukup cantik bukan dan blog semakin terlihat rapi. Bagi anda yang berminat memodifikasi Komentar Disqus silahkan ikuti cara berikut ini.

Cara buat tombol Buka Tutup Komentar Disqus, Blogger dan Facebook

Langkah pertama untuk membuat tombol Show Hide Komentar adalah silahkan anda cari kode dibawah ini :
<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>

Jika sudah mendapatkannya, silahkan anda ganti dengan kode HTML dibawah ini :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.buka-komen,.tutup-komen{font-family:inherit;background-color:#11589D;color:#fff;font-size:16px;line-height:1.3em;padding:8px 10px;text-align:center;font-weight:700;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transition:all 218ms;-moz-transition:all 218ms;-o-transition:all 218ms;transition:all 218ms;-webkit-user-select:none;-moz-user-select:none;margin:20px 0 0;cursor:pointer;}
.buka-komen{display:block;margin-bottom:20px}
#comments-box{display:none}
</style>
<div aria-label='Buka Komentar' class='buka-komen' id='buka-komen' onclick='document.getElementById(&quot;comments-box&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;none&quot;' role='button' tabindex='0'>Buka Komentar</div>
<div aria-label='Tutup Komentar' class='tutup-komen' hidden='hidden' id='tutup-komen' onclick='document.getElementById(&quot;comments-box&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;block&quot;' role='button' tabindex='0'>Tutup Komentar</div>
</b:if>
<div id='comments-box'>
        <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>
          </div>

Silahkan anda ganti warna, ukuran font dan lain lain sesuai dengan keingginan. Kode HTML di atas sebenarnya tidak menunda loading Disqus jadi kemungkinan besar PageSpeed blog anda tetap. Tetapi jika kita lihat tampilannya menjadi rapi dan enak dilihat. Para pengunjung atau visitor akan betah berlama lama di blog anda.

Lihat juga : Cara dapatkan UANG dari Iklan DISQUS dengan Widget Komentar

Bagaimana, cukup mudah bukan membuat tombol Buka Tutup pada Widget Komentar Disqus, Facebook dan Blogger. Jika anda masih merasa kebinggungan cara pasangnya silahkan berkomentar pada artikel ini. Dengan senang hati admin akan membantu dan semoga blog ini selalu bermanfaat untuk pembaca sekalian, Terimakasih.