Cara Membuat Buka Tutup Komentar Disqus Pada Template AMP

Pada kesempatan ini saya ingin berbagi tutorial Cara Membuat Buka Tutup Komentar Disqus Pada Template AMP. Waktu lalu saya juga sempat membahas Cara membuat buka tutup komentar bawaan blogspot untuk non AMP. Berhubung blog ini sekarang menggunakan template AMP jadi tidak ada salah nya untuk saya berbagi tutorial kali ini. ( Ralat sudah tidak gunain blog AMP lagi :D )

Tapi tetap akan saya bagikan bagaimana cara nya, karena sebelum nya saya sudah pernah coba. Cara Membuat Buka Tutup Komentar Disqus Pada Template AMP ini saya menggunakan fitur amp-accordion, agar Loading halaman AMP menjadi tambah cepat, dan komentar Disqus pun tetap bisa digunakan.

Bila sobat ingin mencoba nya silahkan ikuti langkah - langkah di bawah ini.

Cara Membuat Buka Tutup Komentar Disqus Pada Template AMP

Silahkan sobat temukan kode disqus yang sobat punya sebelum nya pada template kalian. Seperti contoh kode 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>

Setelah itu silahkan sobat ganti semua nya 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=Dzgn-Blogger&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 Dzgn-Blogger dengan shortname Disqus blog sobat.

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

<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;false&quot;'>
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}
</b:if>

Dan

<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;true&quot;'>
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}
</b:if>

Kedua kode di atas silahkan sobat letakan kode tersebut di atas kode </style> pada kode contoh dibawah ini.

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

Selanjut nya silahkan sobat copy kode js amp-accordion di bawah ini lalu letakan kode tersebut di atas kode </head> bila sobat sudah mempunyai kode js tersebut, sobat bisa melewatkan tahap ini.

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

Dan yang terakhir save template sobat dan lihat hasil nya. Dan untuk demo nya sobat bisa lihat di blog ini pada kotak komentar disqus di bawah. (Kalo masih belum di ganti)

Mungkin itu saja yang bisa saya bagikan pada artikel kali ini. Semoga artikel ini bermanfaat buat sobat yang sedang mencari Cara Membuat Buka Tutup Komentar Disqus Pada Template AMP. Selamat Mencoba!

Credit Script By : kompiajaib

Share this post