Cara Memasang Recent Comments Disqus Di Blog

Recent Comments Disqus berfungsi menampilkan komentar terbaru dari Disqus di situs teman dengan tampilan slide dari samping dan kalau teman menekan tombol icon lonceng di pojok atas maka widget recent comments ini akan terbuka. Dengan widget ini teman akan jadi lebih gampang mengetahui komentar terbaru dari Disqus di situs sobat.

Bagi teman yang ingin memasangnya, silakan ikuti langkah-langkah berikut ini.

Cara Memasang Recent Comments Disqus di Blog

Widget ini memakai font Awesome, silakan tambahkan link CSS berikut di atas </head>

<script type='text/javascript'> //<![CDATA[ function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); //]]> </script>

Pertama, buka Blogger klik hidangan Tema dan klik tombol Edit HTML lalu tambahkan aba-aba CSS di bawah ini sebelum </head>

<style type='text/css'> /* Animation */ @keyframes rubberBand{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,0.75,1);transform:scale3d(1.25,0.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,0.85,1);transform:scale3d(1.15,0.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}} @keyframes bounceInLeft{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}} /* Recent Comments Disqus */ .header-1{background:#2e9eff;color:#fff;height:auto;padding:15px;overflow:hidden} .header-1 h4{font-size:18px;float:left;color:#fff} .header-1 img{float:right} .notif-show{position:fixed;top:10px;right:10px;z-index:997;color:#fff!important;background:rgba(0,0,0,0.2);font-size:16px;font-weight:normal;width:auto;padding:6px 8px;cursor:pointer;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);border-radius:2px;transition:all .6s} .notif-show:hover{background:#2e9eff;animation:rubberBand 1s} #disqus-notif{position:fixed;background:#fff;z-index:999;width:25%;top:0;right:-769px;bottom:0;transition:all .5s} #disqus-notif.active{right:0} #overlay-1.active{background:rgba(53,58,61,.92);position:fixed;z-index:998;overflow:hidden;width:100%;height:100%;top:0;left:0} #disqus-notif .close-text{display:inline-block;font-weight:700;font-size:14px;position:relative;right:15px;top:-7px;visibility:hidden;opacity:0;transition:all .5s} #disqus-notif .close-1{position:fixed;margin-left:-40px;margin-top:6px;font-size:35px;font-weight:700;color:#fff} #disqus-notif .close-1:hover .close-text{visibility:visible;opacity:1;-webkit-transform:translate3d(-50px,0,0);transform:translate3d(-50px,0,0)} #RecentComments{display:block;width:100%;margin:0 auto;padding:0;height:100%} #RecentComments ul.dsq-widget-list{background:#f6f7f9;text-align:left;max-height:95%;overflow:auto;overflow-x:hidden} #RecentComments img.dsq-widget-avatar{margin:0 10px 0 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:#ced6e0;font-size:12px} #RecentComments p.dsq-widget-meta a:hover{color:#a4b0be} #RecentComments li.dsq-widget-item{background:#fff;margin:10px;padding:10px;clear:both;color:#888;border-radius:5px;border-bottom:1px solid rgba(0,0,0,0.08)} #RecentComments a.dsq-widget-user{display:table;color:#22a6b3;font-weight:700;font-size:14px;margin:7px 0 0 0} #RecentComments a.dsq-widget-user:hover{color:#2e87e7} #RecentComments span.dsq-widget-comment{display:block;clear:both;margin:20px 10px 10px 0} #RecentComments .dsq-widget-comment p{display:inline-block;font-size:13px;margin:0;font-weight:400;color:#444;line-height:1.5} #RecentComments .dsq-widget-item pre{position:relative;background-color:#f8cf82;color:#000;font-family:monospace;line-height:normal;overflow:hidden;text-overflow:ellipsis;padding:10px;margin:5px 0;border-radius:3px;font-size:12px} #RecentComments .dsq-widget-item pre code{color:#000} #disqus-notif.active #RecentComments li.dsq-widget-item{animation:bounceInLeft 1.5s} @media screen and (max-width:1366px){#disqus-notif{width:35%}} @media screen and (max-width:768px){#disqus-notif{width:100%}#disqus-notif .close-1{background:#535c68;display:block;text-align:left;margin:0;padding:0 15px;position:relative;font-size:35px;font-weight:700;color:#fff}#disqus-notif .close-text{display:none}} </style>

Selanjutnya tambahkan aba-aba ini bebas diantara aba-aba <body> dan </body> atau cukup tambahkan sebelum </body>

<a class='notif-show' href='javascript:;'><i class='fa fa-bell'/></a> <div id='overlay-1'/> <div id='disqus-notif'> <a class='close-1' href='javascript:;' title='Close'>&#215;<span class='close-text'>Close</span></a> <div class='header-1'><h4>Notifications</h4><img alt='Disqus Logo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKdg6nn9hnoQoJidXWE0NrF5R5nYYMMViUfkddYAKNSZs9VWqPmlOPS7o9f_ew0cxAUgBVKIloPQKzAEU5MhsOcdnd2azE3ECtuXgj2wROBXruux8DI1rGyNINUytNzLf369aL4pKpjNL3/s1600/Disqusq.png' title='Disqus'/></div> <div class='dsq-widget' id='RecentComments'> <script defer='defer' type='text/javascript'> //<![CDATA[ document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://arlinadesign.disqus.com/recent_comments_widget.js?num_items=20&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=180\"></scr" + "ipt>"); //]]> </script> </div> </div>

Ganti aba-aba yang ditandai dengan username Disqus blog sobat. Edit pada bab ini kalau teman ingin mengubah setelan recent comments

num_items=20&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=180

Nilai	Keterangan
num_items=20	Jumlah komentar yang muncul
hide_mods=0	Ganti 0 dengan 1 untuk menyembunyikan komentar admin
hide_avatars=0	Ganti 0 dengan 1 untuk menyembunyikan avatar
avatar_size=32	Ukuran gambar avatar
excerpt_length=180	Jumlah goresan pena komentar yang tampil

Selanjutnya tambahkan aba-aba ini di bawah sebelum </body>

<script defer='defer' type='text/javascript'> //<![CDATA[ // Recent Comments Disqus $(function(){$(".notif-show").on("click",function(){$("#disqus-notif").addClass("active").focus()});$(".close-1").on("click",function(){$("#disqus-notif").removeClass("active")})}); $(function(){$(".notif-show").on("click",function(){$("#overlay-1").addClass("active").focus()});$(".close-1").on("click",function(){$("#overlay-1").removeClass("active")})}); $("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow noopener').attr('target', '_blank'); //]]> </script>

Selesai, klik tombol Simpan tema untuk perubahan dan cek risikonya di blog sobat.