Cara membuat tombol Buka dan Tutup Komentar Disqus pada Blogger

Cara membuat tombol Buka dan Tutup Komentar Disqus pada Blogger

buka tutup komentar pada blog

Untuk membuat tombol komentar pada blogger menjadi buka tutup diperlukan penambahan script atau lebih persisnya penggantian kode HTML komentar pada template yang anda gunakan dengan kode html yang akan saya bagikan di bawah ini sehingga komentar pada blog anda terdapat tombol buka tutup.

Salah satu alasan mengapa anda perlu membuat Show Hide Komentar pada blogger yaitu untuk membuat tampilan blog menjadi lebih simple lagi dan Pembaca blog anda akan lebih fokus ke isi halaman postingan konten.

Selain itu dengan membuat tombol Show hide komentar pada blogger, komentar yang menjuntai kebawah yang terdapat pada postingan anda tidak akan tampil sebelum pengunjung mengklik tombol buka komentar dengan begitu tampilan blog anda akan lebih simple dan minimalis dengan adanya tombol buka tutup komentar pada blogger.

Cara Membuat Tombol Buka Tutup Komentar


Cara pertama untuk membuat tombol show hide komentar pada blog yaitu seperti biasa anda perlu masuk ke menu tema pada akun blogger anda lalu klik pada edit HTML sehingga anda bisa merubah data struktur pada template yang anda gunakan.

Baca juga : Cara buat tombol chat whatsapp melayang di blogger

Selanjutnya cari kode di bawah ini atau yang serupa dengan kode di bawah ini.

<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>

Untuk memudahkan mencari kode diatas gunakan ctrl+f pada keyboard lalu pastekan kode diatas di dalam kotak pencarian. Jika anda kesulitan dalam mencari kode di atas coba ambil potongan kode diatas sebagian saja.

Setelah kode di atas ketemu silahkan block semua lalu gantikan dengan kode di bawah 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>


Langkah terakhir klik simpan perubahan tema, Untuk melihat hasil tombol buka tutup komentar pada blogger yang sudah anda buat silahkan buka salah satu postingan anda lalu lihat pada bagian komentar postingan anda.

Sebagai tambahan untuk mengganti warna tombol buka tutup komentar pada blog silahkan ganti kode yang saya beri warna merah dengan warna color yang anda inginkan. Dan perlu di ingat bahwa kode di atas bukanlah trik untuk menunda pemuatan komentar pada blog tetapi hanya untuk buka tutup komentar saja.

Buka Komentar