Cara Membuat Tombol Show Hide Komentar Blogger

Terkadang munculnya kolom komentar dapat memecah fokus pembaca, ini tentu tidak diinginkan oleh para Blogger yang ingin memberikan pengalaman membaca terbaik di blog nya.

 

Untuk mengatasi hal tersebut, tips cara membuat tombol show hide komenter Blogger ini sangat potensial untuk menjadi solusinya.

 

Langkah-langkah membuatnya pun sangat mudah bahkan bagi kamu yang awam dengan kode-kode template Blog. Selain itu, Gubuk Pintar juga akan memandu kamu dengan detail agar semuanya berjalan secara sempurna.

Yuk kita masuk ke bagian inti artikelnya!

 

Daftar Isi

Cara Membuat Show Hide Komentar Blogger Penutup

 

 

Cara Membuat Show Hide Komentar Blogger

Ikuti langkah-langkah berikut ini untuk dapat melakukannya,

1. Backup template blog mu terlebih dahulu
   
   
2. Masuk ke Edit Tema dan cari,
   
   

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

   
   
3. Ganti kode tersebut dengan script berikut 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>

   
   Kamu dapat mengatur hal-hal yang Gubuk Pintar tandai sesuai dengan kebutuhan mu.
   
   
4. Simpan Tema

Apabila mengalami masalah, maka gunakan kembali template yang telah kamu backup.

 

Referensi cara ini berasal dari situs KompiAjaib, dimana demo nya dapat kamu lihat di kolom komentar Gubuk Pintar.

 

Perlu diperhatikan bahwa cara ini hanya sebatas membuat tombol show hide saja ya, bukan untuk menunda pemuatan JavaScript komentar Disqus, Facebook, Blogger, dll. 

 

Cara ini bekerja untuk semua jenis kolom komentar, baik kolom komentar asli Blogger, Disqus, Facebook dan lain sebagainya.

 

Penutup

Seperti itu cara membuat tombol show hide komentar Blogger, semoga kamu telah berhasil membuatnya ya dan meningkatkan kenyamanan pembaca blog mu.

 

***

 

Apabila memiliki pertanyaan seputar artikel Cara Membuat Tombol Show Hide Komentar Blogger, silahkan tulis dikolom komentar ya.

Bila artikel ini bermanfaat, bantu Gubuk Pintar menyebarkan manfaatnya dengan membagikan artikel ini ke sosial media mu melalui tombol share di bawah ini. Terimakasih orang baik!

Baca juga: