Show Hide Komentar Disqus Pada Template AMP

Ditulis oleh: Adhy Suryadi

Ditulis pada: 10/09/2016

Saat ini komentar Disqus masih satu-satunya sistem komentar yang sudah mendukung AMP dengan pemasangan menggunakan amp-iframe. Namun menurut saya, komentar Disqus ini memberikan tambahan loading pada halaman AMP sebagaimana iframe pada HTML biasa.

Kemudian kemarin saya mencoba menggunakan show hide pada komentar Disqus dengan menggunakan fitur amp-accordion, dan hasilnya cukup memuaskan. Loading halaman AMP menjadi tambah cepat, dan komentar Disqus tetap bisa digunakan.

Jika Anda sudah menggunakan template Blogger AMP, silahkan coba show hide komentar Disqus seperti di bawah ini. Untuk demonya silahkan coba DI SINI

Silahkan temukan kode komentar Disqus seperti di bawah ini

<amp-iframe expr:src='&quot;https://cdn.rawgit.com/KompiAjaib/kompi-html/master/disqus_amp2.html?shortname=kompi-design&amp;url=&quot; + data:blog.canonicalUrl' frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' width='600'>

<div aria-label='Disqus Comments' overflow='' role='button' tabindex='0'>Disqus Comments</div>

  </amp-iframe>

Kemudian silahkan ganti kode di atas dengan kode di bawah ini

<amp-accordion>

    <section>

<h4>

<span class='show-more'>Add your comment</span>

<span class='show-less'>Hide comment</span>

</h4>

<amp-iframe expr:src='&quot;https://cdn.rawgit.com/KompiAjaib/kompi-html/master/disqus_amp2.html?shortname=kompi-design&amp;url=&quot; + data:blog.canonicalUrl' frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' width='600'>

<div aria-label='Disqus Comments' overflow='' role='button' tabindex='0'>Disqus Comments</div>

  </amp-iframe>

</section>

  </amp-accordion>

Jangan lupa ganti kompi-design dengan shortname Disqus blog Anda.

Kemudian tambahkan CSS di bawah ini untuk kedua conditional tag untuk halaman postingan desktop dan mobile.

section[expanded] .show-more,section:not([expanded]) .show-less{display:none;}

.disqus-comments h4{padding:8px 10px;text-align:center;color:#000;background:#f5f5f5;border:none;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);transition:.3s box-shadow ease;-webkit-transition:.3s box-shadow ease;text-shadow:0 0 0;clear:both}

.disqus-comments h4:hover {box-shadow: 0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19);}

.disqus-comments amp-iframe{margin-left:-8px;margin-right:-8px}

Silahkan simpan CSS di atas tepat di bawah kode di bawah ini (ada 2 buah)

<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;false&quot;'>

<style amp-custom='amp-custom'>

/*<![CDATA[*/

Dan

<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;true&quot;'>

<style amp-custom='amp-custom'>

/*<![CDATA[*/

Terakhir, silahkan simpan kode di bawah ini di atas kode </head>

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

Selesai... selamat mencoba.