Membuat Show Hide Komentar Disqus Pada Blog AMP HTML

Sebelumnya, saya sudah membuat artikel tentang, Cara Memasang Komentar Disqus Untuk Blog AMP HTML. Dan pada kesempatan kali ini, saya akan mencoba membuat artikel tentang membuat Show Hide Komentar Disqus Pada Blog AMP HTML.

Untuk saat ini, baru dua sistem komentar yang sudah support untuk blog AMP HTML dengan pemasangan menggunakan amp-iframe, yaitu komentar Disqus dan Komentar Facebook. Namun menurut saya, komentar Disqus ini memberikan tambahan loading pada halaman AMP sebagaimana iframe pada HTML biasa.

Jika blog Anda sudah menggunakan template AMP HTML, silahkan coba show hide komentar Disqus, agar blog menjadi lebih ringan. Untuk caranya seperti di bawah ini.

Langkah pertama

Yang pertama, silakan cari kode komentar disqus seperti dibawah ini.


<amp-iframe expr:src='&quot;https://cdn.rawgit.com/KompiAjaib/kompi-html/master/disqus_amp2.html?shortname=CobaNgetik&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>

Setelah itu, ganti semua 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=CobaNgetik&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 juga shortname CobaNgetik dengan shortname Disqus blog Anda.

Langkah kedua

Kemudian, Silakan 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:#fff;background:#1b20eb;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[*/

Langkah ketiga

Silahkan simpan kode di bawah ini tepat di atas kode </head>

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

Demikian artikel tentang Membuat Show Hide Komentar Disqus Pada Blog AMP HTML. Selamat mencoba.

Reaksi:
Share this with short URL:

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser