Cara Memasang Komentar Disqus Untuk Blogger AMP HTML

Table of Contents

Karena Disqus masih Satu - satunya sistem komentar yang sudah mendukung Amp HTML, maka tampilan komentar Disqus perlu kita optimalkan agar tampilannya menjadi selaras dengan tampilan blog.

Agar selaras dengan tampilan blog, kita perlu mengatur beberapa bagian disqus dan jenis huruf pada komentar Disqus.

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

Silahkan gunakan kode amp-iframe di bawah ini untuk menampilkankomentar Disqus di Blog Ampanda.

<amp-iframe expr:src='&quot;https://cdn.rawgit.com/KompiAjaib/kompi-html/master/amp_html_disqus.html?shortname=gantinamabloganda&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 ganti nama blog anda dengan shortname Disqus blog Anda.

Gunakan sans-serif jika jenis huruf blog Anda tumpul, ganti dengan serif jika jenis huruf blog Anda lancip.

Ganti kode e8554e dengan kode warna untuk link blog Anda.

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

Seperi pada blog saya silahkan anda berkunjung agar lebih afdol, bisa melihat langsung jadinya.

Jika ingin menyimpan sendiri kode HTML-nya seperti Amp HTML Disqus di atas, silahkan gunakan kode 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>

Silahkan setting menu reaksi pada dashbor Disqus, agar komentar Disqus pada blog anda makin cantik, seperti pada gambar dibawah ini : Demikian cara setting komentar Disqus pada blog Amp, yang saya pasang pada salah satu blog yang saya miliki, semoga bermanfaat.