Cara Membuat Sistem Buka Tutup Komentar Disqus di Blog AMP

Seperti pernah saya sampaikan pada kesempatan sebelumnya bahwa kolom komentar adalah bagian penting pada sebuah Blog karena merupakan sarana atau media tempat berinteraksi antara penulis Blog dan pengunjung Blog.

Dikolom komentar Pengunjung Blog dapat memberi tanggapan, komentar atau bertanya tentang pembahasan yang belum bisa dipahami oleh pengunjung blog melalui kolom komentar.

Tetapi mungkin agan agan semua juga sudah tau bahwa kolom komentar juga memberi beban tambahan loading sebuah blog, apalagi jika blog tersebut menggunakan kolom komentar selain dari Blogger seperti kolom komentar Disqus dan lainnya.

Lalu bagimana caranya agar Blog dapat memakai komentar Disqus tanpa takut Blog menjadi lala alias loading lama? Solusinya adalah dengan memasang sistem buka tutup komentar.

Dengan menggunakan sistem Buka Tutup komentar kita bisa menggunakan kolom komentar Disqus tanpa takut Blog menjadi lambat dan berikut ini adalah langkah demi langkah membuat sistem buka tutup kolom komentar disqus di Blog AMP

• Pertama tama masuklah dulu ke Blogger >> Tema >> Edit HTML
• Pastikan Blog Agan sudah ada kode AMP-iframe seperti ini:

   <script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/> 

  jika belum ada pasanglah dulu kode tersebut sebelum kode &lt;/head&gt;&lt;!--<head/>--&gt; pada HTML blog Agan,


• Kemudian langkah selanjutnya adalah menambahkan kode CSS dibawah ini pada AMP-Custom

  *{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
  .disqus{margin:0 -8px;padding:0 0 20px;font-family:Roboto,sans-serif;}
  .disclaimer_box{width:100%;padding:2px;background:linear-gradient(60deg,#f79533,#f37055,#ef4e7b,#a166ab,#5073b8,#1098ad,#07b39b,#6fba82);border-radius:6px;}
  .disclaimer_box .content{background:#fff;padding:8px 12px;font-size:95%;border-radius:4px;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
  .disclaimer_box .content p{margin:0;padding:0}
  .buka-komen,.tutup-komen{font-family:Roboto,sans-serif;background-color:#11589D;color:#fff;font-size:16px;line-height:1.3em;padding:5px 7px;display:block;min-width:54px;text-align:center;font-weight:500;-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;}
  .buka-komen{margin:20px 0;cursor:pointer;}
  .tutup-komen{margin:20px 0 0;cursor:pointer;}



• Selanjutnya cari kode dibawah ini menggunakan CTRL+F

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

  penampakan kodenya biasanya akan terlihat seperti ini

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



• Kemudian kopi + paste kode dibawah ini tepat dibawah kode diatas

  <b:includable id='disquscomments' var='post'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='open-comment'/>
  <div class='disclaimer_box'>
    <div class='content'>
      <b>Comment Policy:</b> GANTI DENGAN PERATURAN KOMENTAR DI BLOG AGAN
    </div>
  </div>
  <div class='buka-komen' id='buka-komen' on='tap:komen.show,tutup-komen.show,buka-komen.hide,open-comment.scrollTo(&quot;position&quot;=&quot;top&quot;)' role='button' tabindex='0' aria-label='Buka Komentar'>Buka Komentar</div>
  <div class='tutup-komen' hidden='' id='tutup-komen' on='tap:komen.hide,tutup-komen.hide,buka-komen.show,close-comment.scrollTo(&quot;position&quot;=&quot;top&quot;)' role='button' tabindex='0' aria-label='Tutup Komentar'>Tutup Komentar</div>
  </b:if>
               <div class='disqus' hidden='' id='komen'>
  <amp-iframe expr:src='&quot;https://cdn.rawgit.com/unbloging/AMPdisqus/5a559c7d/disqus.html?shortname=https-unbloging-blogspot-com&amp;fontBodyFamily=sans-serif&amp;fontLinkColor=11589D&amp;canonicalurl=&quot; + data:blog.canonicalUrl + &quot;&amp;title=&quot; + data:blog.pageName' frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' width='600'>
  <div aria-label='Disqus Comments' overflow='' role='button' tabindex='0'/>
  </amp-iframe>
                </div>
              </b:includable>
  

  jangan lupa untuk menganti shortname https-unbloging-blogspot-com dengan shortname disqus milik Agan


• Selanjutnya cari kode Seperti ini:

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

  lalu ganti dengan kode yang ini:

  <b:include cond='data:blog.pageType == &quot;item&quot;' data='post' name='disquscomments'/>



• Kemudian yang terakhir tambahkan kode

  <div id='close-comment'/>
  

  diatas kode related pos blog Agan, tujuannya supaya begitu kolom komentarnya ditutup dia akan langsung scroll ke related post blog

Nah itulah Cara membuat sistem Buka Tutup atau Show Hide Comments Disqus di Blog AMP. Saya kira sangat mudah untuk diterapkan. Terimakasih sudah berkunjung dan jangan lupa untuk mampir ke kompiajaib.com tempat belajar blog paling lengkap dan juga tempatnya kode kode seperti diatas.