Show Hide Komentar Disqus Pada Template Amp

Saat ini komentar Disqus masih satu-satunya sistem komentar yang sudah mendukung AMP dengan pemasangan memakai amp-iframe. Namun berdasarkan saya, komentar Disqus ini memperlihatkan suplemen loading pada halaman AMP sebagaimana iframe pada HTML biasa.

Kemudian kemarin aku mencoba memakai show hide pada komentar Disqus dengan memakai fitur amp-accordion, dan risikonya cukup memuaskan. Loading halaman AMP menjadi tambah cepat, dan komentar Disqus tetap dapat digunakan.

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

Silahkan temukan arahan komentar Disqus menyerupai 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 arahan di atas dengan arahan 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 sempurna di bawah arahan 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 arahan di bawah ini di atas arahan </head>

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

Selesai... selamat mencoba.


Sumber https://www.kompiajaib.com/

Share this post