Hallo para blogger pengguna blogspot/wordpress, kali ini saya akan membagi tutorial cara memasang widget komentar Terbaru dari "Disqus" Mungkin kalian salahsatu penggunanya, karena disqus adalah platform komentar terpopullar saat ini, selain fasilitass yang di eddiakan blogspot, ternyata disqus juga lebih menarik dan mudah di gunakan di blogger (!)
 |
| gambar by google.com |
Selain Komentar ternyata masih banyak lagi kegunaan dari disqus ini, jika kalian belum memiliki akun disqus silahkan membuat nya dengan sign up ,Sebelumnya blogger ini Tidak menggunakan disqus karena ada salahsatu masalah atau penerapan Blogger dengan mobile speed jadi saya migrasikan dari blogger ke disqus ,Kegunaan dari komentar disqus terbaru adalah untuk pengunjung blogger anda Tertarik ,bergabung di diskusi tersebut sehingga blogger anda ramai dan tidak sepi seperti (kuburan) ;D yuk di simak Tutorialnya.
Catatan pastikan blogger anda sudah menggunakan komentar disqus
1. Login ke Blogger > Tataletak > Add Widget HTML/ javascript setelah anda masuk silahkan pastekan script kode di bawah ini :
<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://tutortatut.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>
Catatan !
Ganti kode User yang di beri tanda kuning dengan Id disqus anda, setelah itu klik simpan dan jika berhasil maka Tampilanya akan seperti di bawah ini.
 |
| gambar by tutortatut.com |
Sekian Tutorial dari kami seboga bermanfaat. janganlupa saran dan komentar kirim ke from kami Trimkasih salam Blogger.
