Cara Membuat Recent Comment Disqus Ringan di Blogger

Disqus adalah sistem komentar yang sangat populer dikalangan para blogger saat ini, Selain itu disqus juga dianggap sangat aman karena menggunakan sistem komunikasi 1 arah , Disqus juga sangat mudah untuk dikonfigurasikan dan sistem komentar disqus juga bisa di integerasikan dengan berbagai platform serta CMS seperti Blogger, wordpress, Drupal, Joomla dan masih banyak lagi.

Baca juga : Cara Membuat Most Comment Widget Untuk Blogger

Hari ini saya mau berbagi tips Bagaimana cara membuat recent comment disqus yang ringan untuk blogger ada dua pilihan widget recent comment yang bisa kamu cobain nantinya ikuti terus ya artikel hari ini.

#1. Cara memasang widget recent comment disqus ringan tanpa foto.

Script recent komentar ini dibuat oleh arlina design sudah pernah juga saya terapkan pada blog saya hasilnya cukup memuaskan karena tidak mengganggu loading dari blog kita. Cara memasangnya diblog sebagai berikut.

1. Silahkan login ke blogger kamu masing masing.
2. Pilih menu layout atau tata letak.
3. Klik Add a Gadget.
4. Pastekan script dibawah ini pada pilihan HTML/Javascript.

<style scoped="scoped" type="text/css">

#RecentComments{display:block;width:100%;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:400px;}

#RecentComments ul.dsq-widget-list{text-align:left;max-height:400px;overflow:auto;}

#RecentComments img.dsq-widget-avatar{margin:3px 10px 7px 0;width:32px;height:32px;padding:0;float:left;border-radius:3px;clear:both;display:block}

#RecentComments p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;font-weight:400}

#RecentComments p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#444}

#RecentComments p.dsq-widget-meta a:hover{color:#ff675c}

#RecentComments li.dsq-widget-item{margin:0;padding:6px 0 4px;list-style-type:none;clear:both;border-bottom:1px solid #eee;color:#736fb8;font-weight:600}

#RecentComments li.dsq-widget-item:last-child{border-bottom:none}

#RecentComments a.dsq-widget-user {display:table;color:#736fb8;font-weight:600;}

#RecentComments a.dsq-widget-user:hover{color:#999;}

#RecentComments span.dsq-widget-comment{display:block;clear:both;margin-top:5px;}

#RecentComments .dsq-widget-comment p{display:inline-block;font-size:88%;margin:0;font-weight:400;color:#444}

#RecentComments .dsq-widget-item pre{position:relative;background-color:#f3ffca;padding-top:0;box-shadow:0 1px 0 rgba(0,0,0,.1);border-radius:0;opacity:.9;transition:all .3s;}

#RecentComments .dsq-widget-item pre:hover {opacity:1}

#RecentComments .dsq-widget-item pre code {color:#444;font-size:82%;}

#RecentComments .dsq-widget-item pre:before{content:'';position:absolute;padding:initial;font-size:initial;text-indent:initial;left:initial;color:initial;top:0;right:0;width:1.2em;height:1.2em;background-color:#d8e3b0}

#RecentComments .dsq-widget-item pre:after{content:'';font-size:initial;padding:0;position:absolute;width:0;height:0;border-style:solid;border-width:0 1.2em 1.2em 0;border-color:transparent #fff transparent transparent}

</style>

<div id="RecentComments" class="dsq-widget">

<script defer="defer" type='text/javascript'>

//<![CDATA[

document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://rubahdenganIDdisqusKamu.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=1&avatar_size=32&excerpt_length=120\"></scr" + "ipt>");

//]]>

</script>

<script type='text/javascript'>

//<![CDATA[

$("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');

//]]>

</script>

</div>

Simpan dan silahkan lihat hasilnya.

Baca juga : cara membuat recent post ringan di blogger terbaru

#2. Cara memasang widget recent comment disqus ringan dengan foto.

Kalau di widget yang kedua ini nanti di recent comment nya akan tampil foto dari yang berkomentar dipostingan yang ada diblog kita, Saya sendiri memilih recent komentar yang ini, Kamu bisa melihat di blog ini. Cara memasangnya silahkan lihat dibawah ini.

1. Silahkan login ke blogger kamu masing masing.
2. Pilih menu layout atau tata letak.
3. Klik Add a Gadget.
4. Pastekan script dibawah ini pada pilihan HTML/Javascript.

<style scoped="scoped" type="text/css">

#RecentComments{display:block;width:100%;margin:0 auto;padding:0 10px;border:1px solid #ddd;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:300px;overflow:auto}

.dsq-widget ul.dsq-widget-list{padding:0;margin:0;text-align:left}

img.dsq-widget-avatar{margin:3px 10px 7px 0!important;width:58px!important;height:58px!important;padding:0!important;float:left;border-radius:3px!important}

p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px!important}

p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}

li.dsq-widget-item{margin:0!important;padding:6px 0 4px!important;list-style-type:none;clear:both;border-bottom:1px solid #ddd}

li.dsq-widget-item:last-child{border-bottom:none}

a.dsq-widget-user{font-weight:700;display:block!important;margin-bottom:5px}

</style>

<div id="RecentComments" class="dsq-widget">

<script type='text/javascript'>

//<![CDATA[

document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://perampokgoogle.disqus.com/recent_comments_widget.js?num_items=20&hide_mods=1&hide_avatars=0&avatar_size=32&excerpt_length=80\"></scr" + "ipt>");

//]]>

</script>

<script type='text/javascript'>

//<![CDATA[

$("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');

//]]>

</script>

</div>

Simpan settingan dan lihat hasilnya.

Oke segitu dulu ya informasi mengenai bagaimana cara memasang recent comment disqus di blogger Semoga bermanfaat dan dapat dimengerti Terimakasih.