Cara Buat Tombol Buka Tutup Komentar Disqus, Blogger Dan Facebook Di Template Non Amp (Html)

Widget komentar pada sebuah Blog/Web sangat besar keuntungannya selain untuk melaksanakan komunikasi ternyata juga sanggup 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 sanggup memaksimalkan pengunjung dikala membaca artikel.

Komentar Blogger, Facebook dan Disqus mempunyai kelebihan dan kelemahan masing masing. Jika penggunaan Widget Komentar yang bagus saran aku anda memakai bawaan Blogger. Bukan berarti Facebook dan Disqus tidak bagus tetapi lebih disarankan saja. Saat ini blog memakai Komentar Disqus sebab berdasarkan aku tampilannya menarik.

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

Tetapi ada yang menciptakan aku tidak merasa nyaman dikala memakai Widget Komentar Disqus. Coba anda perhatikan bahwa dikala ini setiap blog yang memakai komentar Disqus niscaya ada Iklan tampil bawaan Disqus. Disitu aku merasa murung sebab merasa sia sia menampilkan iklan tersebut. Penghasilan dari iklan Disqus cukup kecil dan ada batasan kalau inggin gajian.

Menyiasatinya supaya iklan Disqus tidak tampil secara eksklusif yaitu menyembunyikan Widget dan menciptakan tombol Buka Tutup (Show Hide) Komentar tersebut. Anda sanggup lihat Tombol Buka Tutup Komentar blog ini, cukup manis 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 menciptakan tombol Show Hide Komentar yaitu silahkan anda cari arahan 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 arahan 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 sebetulnya tidak menunda loading Disqus jadi kemungkinan besar PageSpeed blog anda tetap. Tetapi kalau kita lihat tampilannya menjadi rapi dan lezat dilihat. Para pengunjung atau visitor akan betah berlama usang di blog anda.

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

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

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel