Memasang Komentar Disqus Show Hide Untuk Blogger Valid AMP HTML

by

Memasang Atau Membuat Komentar Disqus Dengan Tombol Buka Tutup Untuk Blogger Valid AMP HTML – Hai, Pada kesempatan Kali ini saya akan membahas bagaimana cara Membuat Komentar disqus pada blog dengan Efek Show Hide pada blog yang sudah valid AMP HTML.

Jika blog anda sudah menggunakan Template valid Amp Html, tidak ada salahnya untuk mencoba mengganti komentar disqus nya menjadi Show Hide, agar loading blog anda semakin Ringan lagi. Untuk Demo atau contoh Komentar Disqus Show Hide Bisa anda lihat di bawah postingan ini. Untuk cara membuatnya silahkan anda simak dibawah ini.

Baca Juga : Cara Membuat Slide Menu With Button Fixed Ala AMP Sidebar

Membuat Komentar Disqus Menjadi Show Hide Untuk Blog Valid AMP HTML

  • Pertama yang harus anda lakukan adalah Silahkan anda tambahkan kode js amp-accordion dibawah ini dan letakan diatas kode </head> .
    atau untuk mempermudah pencarian silahkan tekan tombol ctrl+f dan silahkan anda cari kode asyn. Jika sudah ketemu silahkan anda taruh disitu bersama kode js js lainya. 

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

    Jika kode js amp-accordion diatas sudsh ada di blog anda, silahkan lewati saja.

  • Kedua silahkan anda cari kode disqus yang terpasang di blog anda. Kurang lebih kode komentar disqus mirip seperti dibawah ini. 

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

  • Jika sudah ketemu, Silahkan anda ganti dengan kode komentar disqus dibawah ini. 

    <amp-accordion>
        <section>
    <h4>
    <span class='show-more'>Add your comment</span>
    <span class='show-less'>Hide comment</span>
    </h4>
    <amp-iframe expr:src='&quot;https://cdn.rawgit.com/KompiAjaib/kompi-html/master/disqus_amp2/?shortname=dulbjn&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>

  • Untuk kode yang saya Marking silahkan anda ganti dengan nama unik akun disqus anda masing masing.
  • Langkah selanjutnya silakan anda copy kode Css dibawah ini. 

    section[expanded] .show-more,section:not([expanded]) .show-less{display:none;}
    .disqus-comments h4{padding:8px 10px;text-align:center;color:#fff;background:#1b20eb;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}

  • Dan silahkan anda Taruh Di bagian atas css <style amp-custom='amp-custom'> untuk tampilan Desktop maupun Mobile.
  • Untuk Mempermudah anda mencari Css tampilan Desktop dan mobile langsung tempel saja dibawah kode seperti dibawah ini. 

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


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

  • Terakhir klik simpan dan silahkan lihat hasilnya.

    Mungkin hanya itu saja untuk artikel kali ini tentang Memasang Komentar Disqus Show Hide Untuk Blogger Valid AMP HTML, semoga bermanfaat.
    Memasang Komentar Disqus Show Hide Untuk Blogger Valid AMP HTML Terbaru

    • Leave a Comment