Cara Memasang Recent Comment Disqus Di Blog Dengan Mudah

Cara Memasang Recent Comment Disqus di Blog dengan Mudah - Recent comment disqus ini berfungsi untuk mengetahui notifikasi komentar disqus di blog sahabat dengan efect yang menarik dan tentunya responsive dengan slide dari arah kiri ke kanan dengan memakai icon lonceng yang keren.

Cara Memasang Recent Comment Disqus di Blog

Sebelum ke cara pemasangannya lihat dulu blog sahabat sudah dipasang Font Awesome belum..jika belum copy aba-aba dibawah ini pastekan sempurna diatas aba-aba </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>

Jika sudah memasang aba-aba diatas kini saatnya memasang aba-aba CSSnya, Blogger > Tema > Edit HTML copy aba-aba CSS dibawah ini dan pastekan sempurna diatas aba-aba </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>

Tambahkan juga aba-aba dibawah ini terserah mau dimana saja asalkan masih diantara <body> hingga </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/AVvXsEgTuwKHD_j53SQpEffwJ9LqXVZlIfLW6Fyknf3FVxh5k2Ye07znIjh9APHkJ66e1wV9d1KUpztH59TTlcK-WbmGPsaOCybCj1z19spU-FhaipUmoC0fZ_1y6XPOYJaeBY5BQ4eOGY_ZRfOI/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://triksimple.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>

Yang bertanda merah ubah dengan username disqus sahabat sendiri, oh iya copy juga aba-aba dibawah ini dan pastekan sempurna diatas aba-aba </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>

Jika sudah diterapkan semua aba-aba diatas Simpan tema sahabat dan lihat hasilnya.Demonya dapat dilihat di blog ini ya..

Baca Juga :Cara Menampilkan Fitur Terbaru Tombol Reaksi Disqus di Blog

Oke sekian yang dapat saaya jelaskan tentang Cara Memasang Recent Comment Disqus di Blog dengan Mudah Terima Kasih yang sudah berkunjung biar bermanfaat bagi kalian semua.

Sumber https://www.triksimple.com/