Skip to main content

Memasang Disqus Recommendations di Luar Komentar

Memasang Disqus Recommendations di Luar Komentar - Sebelumnya kita ketahui kalau di komentar Disqus bisa memunculkan widget recommendation yang dapat ditampilkan di atas atau di bawah komentar. Widget rekomendasi dari Disqus ini menampilkan 8 buah random post dengan carousel dengan tampilan yang bisa diatur.

Baru-baru ini Disqus mengumumkan bahwa widget Disqus Recommendations dapat dipasang di luar komentar, bahkan tanpa komentar Disqus sekalipun.

Disqus Recommendations

Jadi, widget ini bisa dipasang di header, di atas atau di bawah postingan, atau di atas footer dengan posisi horizontal secara mandiri, baik blog tersebut menggunakan komentar Disqus atau tanpa komentar Disqus.

Untuk tampilannya di desktop dan di mobile seperti gambar berikut:

Ada 4 style layout untuk tampilan Disqus Recommendations ini yang bisa di atur dari dashboard Disqus untuk blognya di bagian Recommendations.

Jika Anda ingin mencoba memasangnya, silahkan gunakan kode-kode berikut ini, silahkan pilih yang sesuai.

Kode Asli dari Disqus

Simpan kode berikut di atas kode </body>

<script> 
//<![CDATA[
(function() { // REQUIRED CONFIGURATION VARIABLE: EDIT THE SHORTNAME BELOW
var d = document, s = d.createElement('script'); // IMPORTANT: Replace EXAMPLE with your forum shortname!
s.src = 'https://kompiajaib.disqus.com/recommendations.js'; s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
//]]>
</script>

Sesuaikan kode kompiajaib yang ditandai dengan shortname Disqus blog Anda. Kemudian silahkan simpan kode berikut di mana Anda ingin menampilkan widgetnya.

<div id="disqus_recommendations"></div>

Asynchronous

Simpan kode berikut di atas kode </body>

<script> 
//<![CDATA[
(function() { // REQUIRED CONFIGURATION VARIABLE: EDIT THE SHORTNAME BELOW
var d = document, s = d.createElement('script'); // IMPORTANT: Replace EXAMPLE with your forum shortname!
s.src = 'https://kompiajaib.disqus.com/recommendations.js'; s.async = true; s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
//]]>
</script>

Sesuaikan kode kompiajaib yang ditandai dengan shortname Disqus blog Anda. Kemudian silahkan simpan kode berikut di mana Anda ingin menampilkan widgetnya.

<div id="disqus_recommendations"></div>

Defer

Simpan kode berikut di atas kode </body>

<script> 
//<![CDATA[
function downloadJSAtOnload(){
var d = document, s = d.createElement('script'); // IMPORTANT: Replace EXAMPLE with your forum shortname!
s.src = 'https://kompiajaib.disqus.com/recommendations.js'; s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

Sesuaikan kode kompiajaib yang ditandai dengan shortname Disqus blog Anda. Kemudian silahkan simpan kode berikut di mana Anda ingin menampilkan widgetnya.

<div id="disqus_recommendations"></div>

Lazyload

Simpan kode berikut di atas kode </body>

<script> 
//<![CDATA[
var lazyDisqusRecommendations=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&lazyDisqusRecommendations===!1||0!=document.body.scrollTop&&lazyDisqusRecommendations===!1)&&(!function(){
var d = document, s = d.createElement('script'); // IMPORTANT: Replace EXAMPLE with your forum shortname!
s.src = 'https://kompiajaib.disqus.com/recommendations.js'; s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
}(),lazyDisqusRecommendations=!0)},!0),window.onscroll=function(){scrollFunction()};
//]]>
</script>

Kemudian silahkan simpan kode berikut di mana Anda ingin menampilkan widgetnya.

<div id="disqus_recommendations"></div>

Untuk blog AMP, saya buatkan di postingan selanjutnya ya.

UPDATE

Saya sudah buatkan widget Disqus Recommendations ini untuk blog AMP HTML, silahkan simak di postingan berikut: Disqus Recommendations AMP HTML.

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Playlist tutorial Blogger
Playlist tutorial AMP HTML
Playlist Serba-serbi
Jangan lupa SUBSCRIBE
Jangan Diklik!

Menarik Untuk Dibaca Juga:


PrivacySitemap
©2021 KOMPI AJAIB