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, biar Loading halaman AMP menjadi tambah cepat, dan komentar Disqus pun tetap dapat digunakan.

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

Cara Membuat Buka Tutup Komentar Disqus Pada Template AMP

Silahkan teman temukan arahan disqus yang teman punya sebelum nya pada template kalian. Seperti teladan arahan 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 teman 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='&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 arahan di atas silahkan teman letakan arahan tersebut di atas arahan </style> pada arahan teladan dibawah ini.

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

Selanjut nya silahkan teman copy arahan js amp-accordion di bawah ini kemudian letakan arahan tersebut di atas arahan </head> jikalau teman sudah memiliki arahan js tersebut, teman 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 teman dan lihat hasil nya. Dan untuk demo nya teman 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 teman yang sedang mencari Cara Membuat Buka Tutup Komentar Disqus Pada Template AMP. Selamat Mencoba!