Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Disqus / Valid amp

Memasang Komentar Disqus Show Hide Untuk Blogger Valid AMP HTML

Posting Komentar

Apabila blog anda sudah memakai Template valid Amp Html, nir terdapat salahnya buat mencoba mengganti komentar disqus nya sebagai Show Hide, supaya loading blog anda semakin Ringan lagi. Untuk Demo atau model Komentar Disqus Show Hide Bisa anda lihat pada bawah postingan ini. Untuk cara mengolahnya 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.html?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.html?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.

    Posting Komentar untuk "Memasang Komentar Disqus Show Hide Untuk Blogger Valid AMP HTML"