Cara Lain Memasang Komentar Disqus Untuk Blogger Amp Html

Karena Disqus masih satu-satunya sistem komentar yang sudah mendukung AMP HTML, maka tampilan komentar Disqus perlu kita optimalkan semoga tampilannya menjadi selaras dengan tampilan blog.

Agar selaras dengan tampilan blog, kita perlu mengatur beberapa bab disqus ibarat warna link dan jenis abjad pada komentar Disqus.

Untuk itu ada cara lain yang lebih gampang untuk memasang komentar Disqus pada blog AMP HTML yang otomatis mengatur warna link dan jenis hurufnya.

Terima kasih kepada jp26jp yang memiliki inspirasi untuk mempermudah customisasi komentar Disqus pada blog AMP.

Silahkan gunakan isyarat amp-iframe di bawah ini untuk menampilkan komentar DISQUS  di Blogger.

 <amp-iframe expr:src='&quot;https://cdn.rawgit.com/KompiAjaib/kompi-html/master/amp_html_disqus.html?shortname=kompiajaib&amp;fontBodyFamily=sans-serif&amp;fontLinkColor=e8554e&amp;url=&quot; + data:blog.canonicalUrl' 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'>Disqus Comments</div>
 </amp-iframe>

Ganti kompiajaib dengan shortname Disqus blog Anda.
Gunakan sans-sarif kalau jenis abjad blog Anda tumpul, ganti dengan serif kalau jenis abjad blog Anda lancip.
Ganti isyarat e8554e dengan isyarat warna untuk link blog Anda.

Perhatian

Untuk yang memakai blog dengan background gelap, Anda harus menentukan Appearance dengan for dark background di Setting Disqus.

Jika ingin menyimpan sendiri isyarat html-nya ibarat amphtmldisqus.html di atas, silahkan gunakan isyarat di bawah ini.

 <div id="disqus_thread"></div>
 
 <script>
   window.addEventListener('message', receiveMessage, false);
 
   function receiveMessage(event) {
     if (event.data) {
       var msg;
       try {
         msg = JSON.parse(event.data);
       } catch (err) {}
       if (!msg)
         return false;
       if (msg.name === 'resize') {
         window.parent.postMessage({
           sentinel: 'amp',
           type: 'embed-size',
           height: msg.data.height
         }, '*');
       }
     }
   }
 
   function getQueryVariable(variable) {
     var query = window.location.search.substring(1);
     var vars = query.split('&');
     for (var i = 0; i < vars.length; i++) {
       var pair = vars[i].split('=');
       if (pair[0] == variable) {
         return pair[1];
       }
     }
     return (false);
   }
 
   function generateCss(q) {
     var css       = document.createElement('style'),
         sp2       = document.getElementById('disqus_thread'),
         parentDiv = sp2.parentNode;
     css.type = 'text/css';
     if (css.styleSheet) css.styleSheet.cssText = q;
     else css.appendChild(document.createTextNode(q));
     parentDiv.insertBefore(css, sp2);
   }
 
   var disqus_config = function() {
     this.page.url = getQueryVariable('url');
   };
 
   (function() {
     var d = document,
         s = d.createElement('script'),
         q = '#disqus_thread {font-family:' + getQueryVariable('fontBodyFamily') + '} a {color:#' + getQueryVariable('fontLinkColor') + '}';
         generateCss(q);
     s.src = '//' + getQueryVariable('shortname') + '.disqus.com/embed.js';
     s.setAttribute('data-timestamp', +new Date());
     (d.head || d.body).appendChild(s);
   })();
 </script>

Sumber https://www.kompiajaib.com/

Share this post