Cara Mengatur Warna Link Disqus Pada Blog AMP

Cara Mengatur Warna Link Disqus Pada Blog AMP Sistem komentar disqus adalah satu-satunya sistem komentar yang sangat mendukung terhadap teknologi terbaru blogger yaitu amp html. Dengan menggunakan sistem komentar disqus kita tidak perlu lama lagi untuk menunggu komentar terload karena munculnya sangat cepat dengan menggunakan CDN atau content delivery network dari Github. Untuk blogger amp html sistem komentar ini sangat cocok untuk diterapkan diblog sobat karena sistem komentar ini sudah valid dengan amp html.

Karena Disqus masih Satu-satunya sistem komentar yang sudah mendukung AMP HTML, maka untuk tampilan komentar Disqus perlu kita optimalka agartampilannya menjadi nyatu dengan warna tampilan blog sobat. Supaya selaras dengan tampilan blog, sobat perlu mengatur beberapa bagian disqus dan jenis huruf pada komentar Disqus.

Untuk blog dengan template AMP, warna link pada komentar Disqus tidak mengikuti warna link blog sehingga penampakannya kurang serasi dengan tampilan blog. Jika sobat menggunakan template AMP untuk blognya dan ingin mengatur link Disqus silahkan ikuti triknya di bawah ini :



Untuk kode komentar Disqus AMP biasanya seperti di bawah ini atau mirip seperti di bawah ini.

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

Untuk URL hosting Github yang berwana biru di atas, silahkan ganti dengan Hosting Github sobat sendiri dengan kode di bawah ini.

<style>
#disqus_thread a{color: #f1d600;}
</style>
<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) {
// Do nothing
}
if (!msg)
return false;
if (msg.name === 'resize') {
window.parent.postMessage({
 sentinel: 'amp',
 type: 'embed-size',
 height: msg.data.height
}, '*');
}
}
}
</script>
<script>
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);
}
var disqus_config = function () {
this.page.url = getQueryVariable("url");
};
(function() {
var d = document, s = d.createElement('script');
s.src = '//' + getQueryVariable("shortname") + '.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>

Ganti kode #f1d600 dengan kode warna link blog sobat. kemudian simpan kode di atas dengan file *.html misalnya disqus_amp.html kemudian silahkan hosting di Github lalu ganti URL pada amp-iframe Disqus dengan URL hosting disqus_amp.html sobat.

Selamat Mencoba, semoga bermanfaat.

Sumber : Kompiajaib.com