Membuat Tombol Show Hide Disqus Comment pada Template AMP

Untuk saat ini komentar yang sudah support template AMP hanya komentar Disqus, jadi Disqus hanya satu-satunya sistem komentar yang bisa kita pakai pada template AMP pada saat ini, ya semoga saja kedepannya banyak lagi sistem komentar yang support AMP. Berkenaan dengan sistem komentar Disqus diatas, pada template Kompi Design sudah terpasang Disqus komen, hanya saja kolom komentarnya akan langsung terlihat ketika blog di akses. Untuk dapat membuatnya tidak langsung terlihat, kita bisa menambahkan fungsi Show Hide untuk kolom komentar tersebut.

Dibawah ini akan kita bahasa bagaimana cara memasang tombol show hide tersebut, sehingga jika ingin berkomentar terlebih dahulu kita harus mengklik tombol show komen tersebut. Trik ini sebelumnya sudah di posting oleh Kang Adhy Suryadi pada blog miliknya kompiajaib.com, jadi jika ada yang nyasar sampai ke blog ini, sebenarnya sedang membaca sebuah tutorial yang sama seperti postingan yang dibuat oleh Kang Adhy tersebut. Sebelumnya jika anda ingin mendownload Template AMP versi Blogger silahkan lihat dan download pada postingan saya sebelumnya yaitu Free Download AMP Template For Blogger.

Dibawah ini akan kita bahasa bagaimana cara memasang tombol show hide tersebut, sehingga jika ingin berkomentar terlebih dahulu kita harus mengklik tombol show komen tersebut.

Berikut langkah-langkah membuat Tombol Show Hide Disqus Comment pada Template AMP:
Pada Template Kompi Design silahkan anda cari kode berikut ini;

<amp-iframe expr:src='&quot;https://cdn.rawgit.com/darwinisrin/siijombi.html/master/disq-amp.html?shortname=darwinisrin&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>

Kemudian ganti Kode tersebut dengan kode dibawah ini;

<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/darwinisrin/siijombi.html/master/disq-amp.html?shortname=darwinisrin&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>

Dan jangn lupa untuk mengganti Shortname darwinisrin dengan shortname Disqus milik anda sendiri. Langkah selanjutnya adalah temukan kode;

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

Dan

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

Kemudian pada masing-masing kode diatas silahkan anda tambahkan CSS dibawah ini;

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

Langkah terakhir adalah menambahkan kode dibawah ini tepat sebelum kode </head>

Simpan Template anda dan lihat hasilnya, semoga berhasil dan selamat mencoba

Sumber : Kompiajaib.com