Cara Menciptakan Buka Tutup Komentar Disqus Pada Template Amp

Pada kesempatan ini aku ingin membuatkan tutorial Cara Membuat Buka Tutup Komentar Disqus Pada Template AMP. Waktu kemudian aku juga sempat membahas Cara menciptakan buka tutup komentar bawaan blogspot untuk non AMP. Berhubung blog ini kini memakai template AMP jadi tidak ada salah nya untuk aku membuatkan tutorial kali ini.

Cara Membuat Buka Tutup Komentar Disqus Pada Template AMP ini aku memakai fitur amp-accordion, semoga Loading halaman AMP menjadi tambah cepat, dan komentar Disqus pun tetap dapat digunakan.

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

Cara Membuat Buka Tutup Komentar Disqus Pada Template AMP

Silahkan sahabat temukan instruksi disqus yang sahabat punya sebelum nya pada template kalian. Seperti teladan instruksi 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 sahabat ganti semua nya dengan instruksi 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 instruksi di atas silahkan sahabat letakan instruksi tersebut di atas instruksi </style> pada instruksi teladan dibawah ini.

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

Selanjut nya silahkan sahabat copy instruksi js amp-accordion di bawah ini kemudian letakan instruksi tersebut di atas instruksi </head> jikalau sahabat sudah memiliki instruksi js tersebut, sahabat dapat 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 sahabat dan lihat hasil nya. Dan untuk demo nya sahabat dapat lihat di blog ini pada kotak komentar disqus di bawah. (Kalo masih belum di ganti)

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