Buka Tutup Komentar Disqus Pada Template AMP

Diposting pada

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. Meskipun blog ini tidak menggunakan template AMP jadi tidak ada salah nya untuk berbagi tutorial kali ini.

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.

Baca Juga : Cara Membuat Iklan Sticky Pada Template Non AMP

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='"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 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='"https://cdn.rawgit.com/KompiAjaib/kompi-html/master/disqus_amp2.html?shortname=xxxxxx&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 xxxxxx 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 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.
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

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *