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'>×<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/AVvXsEic5ORtnkOJhyphenhyphenR675llC4AEdgjkDF3NH8XF97ufo3ikhwnvxELMrzrqP1O8Zstuf8Rj7r3CnYPE0UYedE1P6H_14836jNuBiLMivnvbaC84Nb3OgQJY90xrA5cUwZjcQoOwGk82uqamDC26/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 jikalau 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 akhirnya di blog sobat.
Demikian Cara Memasang Recent Comments Disqus di Blog, agar bermanfaat bagi sobat. Wassalam.