Membuat Tombol Buka Tutup Komentar Disqus Di Blog AMP

Membuat Tombol Buka Tutup Komentar Disqus Di Blog AMP. Sebelumnya Saya sudah posting Membuat Elemen pada Blog AMP dengan Shortcode AMP. Nah, disini kita akan menggunakan sebagian shortcode tersebut untuk membuat tombol buka tutup atau show hide komentar disqus di blog AMP. Dengan membuat tombol buka tutup komentar disqus di blog akan membuat loading blog kita menjadi lebih ringan. Karena jika tidak menggunakan show and hide komentar, biasanya ketika halaman posting di buka, iframe akan langsung dimuat, sihingga akan menyumbang loading pada blog kita.

Nah, jadi agar iframe dari komentar Disqus di blog kita tidak langsung dimuat ketika halaman dibuka, sembunyikan (hidden) terlebih dahulu kotak komentarnya dengan tombol buka dan tutup agar iframe dimuat ketika tombol buka diklik.

Yang pertama.

Simpan CSS di bawah ini untuk kedua conditional tag untuk halaman postingan desktop dan mobile.

.buka-komen,.tutup-komen{font-family:Roboto,sans-serif;background-color:#117AC9;color:#fff;font-size:16px;line-height:1.3em;padding:5px 7px;display:block;min-width:54px;text-align:center;font-weight:500;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transition:all 218ms;-moz-transition:all 218ms;-o-transition:all 218ms;transition:all 218ms;-webkit-user-select:none;-moz-user-select:none;}
.buka-komen{margin:20px 0;cursor:pointer;}
.tutup-komen{margin:20px 0 0;cursor:pointer;}

Silahkan simpan CSS di atas tepat dibawah kode berikut ini.

<style amp-custom='amp-custom'>
/*<![CDATA[*/

Yang kedua.

Silahkan cari kode komentar Disqus seperti di bawah ini.

<amp-iframe expr:src='&quot;https://cdn.rawgit.com/KompiAjaib/kompi-html/master/ampdisqus_blogger4.html?shortname=butirankode&amp;fontBodyFamily=sans-serif&amp;fontLinkColor=FF1744&amp;canonicalurl=&quot; + data:blog.canonicalUrl + &quot;&amp;title=&quot; + data:blog.pageName' 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'/>
</amp-iframe>

Jika sudah ketemu, Kemudian silahkan ganti kode di atas dengan kode di bawah ini.

<div class='buka-komen' id='buka-komen' on='tap:komen.show,tutup-komen.show,buka-komen.hide' role='button' tabindex='0'>Buka Komentar</div>
<div class='tutup-komen' hidden='' id='tutup-komen' on='tap:komen.hide,tutup-komen.hide,buka-komen.show' role='button' tabindex='0'>Tutup Komentar</div>
        <div class='disqus' hidden='' id='komen'>
<amp-iframe expr:src='&quot;https://cdn.rawgit.com/KompiAjaib/kompi-html/master/ampdisqus_blogger4.html?shortname=butirankode&amp;fontBodyFamily=sans-serif&amp;fontLinkColor=FF1744&amp;canonicalurl=&quot; + data:blog.canonicalUrl + &quot;&amp;title=&quot; + data:blog.pageName' 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'/>
</amp-iframe>
       </div>

Jangan lupa ganti butirankode dengan shortname Disqus blog Anda. kemudian Simpan. selesai....

Nah, itulah artikel kali ini tentang cara Membuat Tombol Buka Tutup Komentar Disqus Di Blog AMP. Semoga bermanfaat.