Pada kesempatan ini aku ingin menyebarkan 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 menyebarkan 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 arahan disqus yang sahabat punya sebelum nya pada template kalian. Seperti teladan arahan di bawah ini. <amp-iframe expr:src='"https://cdn.rawgit.com/KompiAjaib/kompi-html/master/disqus_amp2.html?shortname=kompi-design&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> Setelah itu silahkan sahabat ganti semua nya 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='"https://cdn.rawgit.com/KompiAjaib/kompi-html/master/disqus_amp2.html?shortname=Dzgn-Blogger&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> 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 == "item" and data:blog.isMobileRequest == "false"'> 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 == "item" and data:blog.isMobileRequest == "true"'> 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 arahan di atas silahkan sahabat letakan arahan tersebut di atas arahan </style> pada arahan teladan dibawah ini.
<style amp-custom='amp-custom'> ..... ..... </style> Selanjut nya silahkan sahabat copy arahan js amp-accordion di bawah ini kemudian letakan arahan tersebut di atas arahan </head> kalau sahabat sudah memiliki arahan 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!
