Cara Membuat Tombol Disqus di Blog Valid AMP

Pembahasan kali ini adalah bagaimana cara memasang tombol show hide di komentar Disqus, dengan salah satu alasan agar loading di komentar Disqus tersebut dapat dikurangi sehingga jika ingin berkomentar terlebih dahulu kita harus mengklik tombol show komentar tersebut. Trik ini banyak di posting oleh para blogger karena ini merupakan tampilan komentar yang menarik dan di sempurnakan oleh Kang Adhy Suryadi pada blognya.

Sekarang kita akan bahasa bagaimana cara memasang tombol show hide/ buka tutup komentar tersebut, sehingga jika ingin berkomentar anda terlebih dahulu harus mengklik tombol tersebut.

Berikut kita mulai langkah membuat tombol Show Hide/ Buka Tutup pada Komentar Disqus untuk tamplate AMP

Langkah pertama anda harus memasang JS di bawah ini seperti cara-cara yang sudah kita pelajari di artikel-artikel sebelumnya

Spoiler:

Hint


<script async='async' custom-element='amp-accordion' src='https://cdn.ampproject.org/v0/amp-accordion-0.1.js'/>

Untuk Template Anda yang sudah pernah memasang komentar Disqus anda dapat mencari cari kode seperti dibawah ini

Spoiler:

Hint


<amp-iframe expr:src='&quot;https://cdn.rawgit.com/babakbelur1819/Disqus-Comment/dfb57015/Disqus-Comment.html?shortname=BabaKBeluR&amp;fontBodyFamily=sans-serif&amp;fontLinkColor=e8554e&amp;url=&quot; + data:blog.canonicalUrl' frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-forms 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>

Recommended Author





Lalu kemudian ganti kode tersebut dengan kode dibawah ini:

Spoiler:

Hint


<amp-accordion> 
<section> 
<h4> 
<span class='show-more'>Show Disqus Comment</span> 
<span class='show-less'>Hide comment</span> 
</h4> 
<amp-iframe expr:src='&quot;https://cdn.rawgit.com/babakbelur1819/Disqus-Comment/dfb57015/Disqus-Comment.html?shortname=babakbelur&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>

Ganti Shortname babakbelur yang di tandai diatas dengan shortname Disqus milik anda sendiri. Langkah selanjutnya adalah temukan kode

Spoiler:

Hint


<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;false&quot;'> <style amp-custom='amp-custom'>
/*<![CDATA[*/

Dan langkah terakhir pada kode diatas silahkan anda dapat tambahkan CSS dibawah ini

Spoiler:

Hint


.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}

Kemudian simpan Template anda dan lihat hasilnya.

Demikian tadi artikel tentang Cara Membuat Tombol Disqus di Blog Valid AMP anda. Dan jika anda memliki pertanyaan seputar Cara Membuat Tombol Disqus di Blog Valid AMP ini ataupun anda ingin sharing informasi silahkan berkomentar melalui disqus di bawah dan jangan lupa like fanspage, Subscribe Youtube channel kami di samping artikel ini, jangan lupa share artikel ini jika bermanfaat. Terima kasih telah berkunjung.

Baca Juga Artikel Tentang Cara Memasang Komentar Disqus Pada Blog Valid AMP DI SINI

Related Keyword: comment disqus, disqus website, disqus profil, disqus admin, sign in disqus, disqus indonesia