Untuk Contoh Hasil Penerapan Kode Dibawah Seperti Ini :

Desktop View, Untuk Mobile Memang Saya Disable

    Silahkan Kalian Masuk Ke Theme dan dan Edit HTML

Langkah Pertama Adalah Salin Code CSS ini di atas Code </head> :

<style>
/* Animation */
@keyframes spinner-grow{0%{-webkit-transform:scale(0);transform:scale(0)}50%{opacity: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}}
@keyframes bounceInRight{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)}from{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 */
#disqus-notif .close-1{background:#f7f7e5;display:block;text-align:center;margin:0;padding:10px;position:relative;line-height:normal;font-weight:500;color:#222;right:initial;width:auto;height:auto;background:transparent;top:-12px}
.sindicat{animation:spinner-grow 1s ease infinite}
.notif-show .sindicat{display;block;font-size:16px;background:#801111;position:absolute;top:6px;right:0;width:8px;height:8px;border-radius:8px;left:17px}
.notif-code{display:inline-block;font-size:18px;float:right;position:absolute;right:185px;top:12px;z-index:99}
.header-1{position:relative;background-color:#ae203b;color:#222;height:auto;padding:17px;overflow:hidden}
.header-1 h4{font-size:18px;float:left;color:#fff;margin:auto}
.header-1 img{float:right}
.notif-show{position:relative;top:10px;right:10px;z-index:997;color:#000!important;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{color:#9b9494 !important;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{position:fixed;z-index:998;overflow:hidden;width:100%;height:1000px;top:0;left:0;background:rgba(0, 0, 0, 0.67)}
#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.active #RecentComments li.dsq-widget-item{animation:bounceInLeft 1.5s}
#disqus-notif.active #RecentComments li.dsq-widget-item:nth-child(2n){animation:bounceInRight 1.5s}
#disqus-notif .close-1{position:absolute;right:0;color:#222;font-size:22px;width:57px;height:57px;line-height:59px;text-align:center;border:1px solid rgba(0,0,0,0.05);transition:all .3s;z-index:99}
#disqus-notif .close-1 i{font-family:fontawesome;font-size:20px;font-weight:normal;font-style:normal;transform:rotate(270deg);transition:all .3s}
#disqus-notif .close-1:hover .close-text{visibility:visible;opacity:1;-webkit-transform:translate3d(-50px,0,0);transform:translate3d(-50px,0,0)}
#RecentComments{position:relative;background:#183153;display:block;width:100%;margin:0 auto;padding:0;height:800px}
#RecentComments ul.dsq-widget-list{position:relative;z-index:9995;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:rgba(255, 255, 255, 0.06);margin:10px;padding:15px;clear:both;color:#fff;border-radius:8px;border-bottom:1px solid rgba(255,255,255,0);transition:all 300ms cubic-bezier(0.250,0.100,0.250,1.000);transition-timing-function:cubic-bezier(0.250,0.100,0.250,1.000)}
#RecentComments a.dsq-widget-user{display:table;color:#0fcee1;font-weight:700;font-size:14px;margin:7px 0 0 0}
#RecentComments a.dsq-widget-user:hover{color:#2e87e7}
.dsq-widget ul.dsq-widget-list{padding:0;margin:0;text-align:left}
#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:rgba(255,255,255,.7);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}
li.dsq-widget-item {
 margin: 15px 0;
 list-style-type: none;
 clear: both;
}
@media screen and (max-width:1366px){#disqus-notif{width:35%}}
@media screen and (max-width:768px){#disqus-notif{width:100%}
.notif-show{top:0px}
.notif-show{display:none}
.dsq-widget-list.active{display:none}
#disqus-notif .close-1{background:#535c68;display:none;text-align:center;margin:0;padding:10px;position:relative;font-size:35px;font-weight:500;color:#fff;line-height:normal;width:auto;height:auto;right:initial}
#RecentComments{height:768px}
#disqus-notif .close-text{display:none}}
</style>

Langkah Kedua Adalah Menempatkan Script Awesome ini 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>

Langkah Ketiga Adalah Menempatkan JavaScript diatas kode </body> :

<script 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');
$(function(){$(".notif-show").on("click",function(){$("dsq-widget-list").addClass("active").focus()});$(".close-1").on("click",function(){$("dsq-widget-list").removeClass("active")})});
//]]>
</script>

Langkah Ke-Empat ialah Menempelkan Kode HTML di tempat yang kalian inginkan.Silahkan Salin Code HTML dibawah ini :

<span class='notif-code'>
  <a class='notif-show' href='javascript:;'> <i class='fa fa-comments-o'/> <span class='sindicat'/></a>
<div id='overlay-1'/>
<div id='disqus-notif'>
<a class='close-1' href='javascript:;' title='Close'><i class='fa fa-times'/></a>
<div class='header-1'><h4>Discussion Post</h4></div>
<div class='dsq-widget' id='RecentComments'>
<script defer='defer' type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://oploverz.disqus.com/recent_comments_widget.js?num_items=15&hide_mods=0&hide_avatars=1&avatar_size=32&excerpt_length=180\"></scr" + "ipt>");
//]]>
</script>
</div>
</div>
  </span>

Jika Sudah Silahkan Lihat Hasilnya, Dan Pastikan Kalian Pakai Jquery yang 3.3.1. Jika Belum pakai Salin Kode dibawah ini tempatkan di atas </head> :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>