Membuat Tombol Buka Tutup Komentar Disqus Di Blog AMP

Membuat Tombol Buka Tutup Komentar Disqus Di Blog AMP. Pada waktu yang lalu Saya sudah posting Shortcode AMP Untuk Mempermudah Membuat Beberapa Elemen.

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.

Untuk demo tombolnya bisa lihat dibawah artikel ini, dan silakan di klik tombolnya. Jika Anda berminat untuk memasang di blog Anda juga, mari ikuti caranya dibawah ini.

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=websitemini&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=websitemini&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 websitemini 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.