Memasang Komentar Disqus Show Hide Untuk Blogger Valid AMP HTML
Memasang Atau Membuat Komentar Disqus Dengan Tombol Buka Tutup Untuk Blogger Valid AMP HTML – Hai, Pada kesempatan Kali ini saya akan membahas bagaimana cara Membuat Komentar disqus pada blog dengan Efek Show Hide pada blog yang sudah valid AMP HTML.
Jika blog anda sudah menggunakan Template valid Amp Html, tidak ada salahnya untuk mencoba mengganti komentar disqus nya menjadi Show Hide, agar loading blog anda semakin Ringan lagi. Untuk Demo atau contoh Komentar Disqus Show Hide Bisa anda lihat di bawah postingan ini. Untuk cara membuatnya silahkan anda simak dibawah ini.
Baca Juga : Cara Membuat Slide Menu With Button Fixed Ala AMP Sidebar
Membuat Komentar Disqus Menjadi Show Hide Untuk Blog Valid AMP HTML
atau untuk mempermudah pencarian silahkan tekan tombol ctrl+f dan silahkan anda cari kode asyn. Jika sudah ketemu silahkan anda taruh disitu bersama kode js js lainya.
<script async='async' custom-element='amp-accordion' src='https://cdn.ampproject.org/v0/amp-accordion-0.1.js'/>
Jika kode js amp-accordion diatas sudsh ada di blog anda, silahkan lewati saja.
<amp-iframe expr:src='"https://cdn.rawgit.com/KompiAjaib/kompi-html/master/disqus_amp2/?shortname=dulbjn&url=" + 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>
<amp-accordion>
<section>
<h4>
<span class='show-more'>Add your comment</span>
<span class='show-less'>Hide comment</span>
</h4>
<amp-iframe expr:src='"https://cdn.rawgit.com/KompiAjaib/kompi-html/master/disqus_amp2/?shortname=dulbjn&url=" + 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>
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}
<b:if cond='data:blog.pageType == "item" and data:blog.isMobileRequest == "false"'>
<style amp-custom='amp-custom'>
/*<
