Skip to main content

Membuat Tombol Buka Tutup Komentar Disqus Di Blog AMP

Halo sahabat blogger, selamat malam. Pada malam ini saya akan mencoba berbagi artikel cara Membuat Tombol Buka Tutup Komentar Disqus Di Blog AMP. Sebenarnya pada waktu yang lalau saya sudah posting serupa dengan artikel ini, yaitu Membuat Show Hide Komentar Disqus Pada Blog AMP HTML. Namun di artikel tersebut menggunakan script dari amp-accordion.

Tetapi pada artikel ini kita tidak menggunakan scrip, namun hanya menggunakan CSS dan HTML saja. Membuat tombol buka tutup komentar disqus di blog AMP akan membuat loading blog kita menjadi lebih ringan. Kaerna yang 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 (ada 2 buah)


<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[*/

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.

You Might Also Like:

Buka Komentar