Cara Memasang Recent Komen Disqus Blog

Pada kesempatan sebelumnya sudah saya sharing tentang Cara membuat baca juga pada postingan blog nah untuk postingan saya selanjutnya  akan membagikan kepada sobat blogger Cara membuat atau memasang recent comments disqus di blog untuk sobat yang masih kebingungan cara membuatnya bisa ikuti langkah dibawah ini dengan mudah.

Untuk cara membuatnya sobat harus pasang terlebih dahulu font awesome dibawah ini

<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>

Silahkan pasang code diatas tepat sebelum </head> selanjutnya pasang code berikut ini tepat sebelum </style> atau </b:skin>

/* Animation */
Baca Juga :Syarat Mendapatkan Lencana Terverifikasi Akun Instagram
@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)}
Baca Juga :Cara Membuat Random Post Blog
#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}
Baca Juga :Cara Memasang Widget Artikel Terbaru Tanpa Gambar
@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}}

Jika code CSS sudah terpasang silahkan untuk langkah selanjutnya letakan code dibawah ini diatara <body> atau </body> bisa juga 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/AVvXsEjYLvBOLac6KL8PX0fR5uvO4ZX5QBBT0LGGw70tKRE85NVvqbEGPSH7LU8PjkVJ1UwVhg5_QpJ6NMIRzyRgIRTy3HauO5GmzUnZKPVAjFBxVYGu_WDHxtycBUftdL6slhFsW_1YjBJoBHqa/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://URL_BLOG.disqus.com/recent_comments_widget.js?num_items=20&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=180\"></scr" + "ipt>");
//]]>
Baca Juga :Cara Memasang Recent Komen Disqus Blog
</script>
</div>
</div>

Silahkan sobat ganti URL_BLOG silahkan diganti dengan url blog sobat

dan untuk langkah terakhir sobat pasang code dibawah ini sebelum code
</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>

Setelah itu silahkan save kembali template yang sudah sobat edit tadi, demikianlah dari saya tentang cara membuat recent comments diqus selamat mencoba dan semoga bermanfaat. All Post Tips Trik

• Share
• Share

Rekomendasi

• Cara Membuat Bingkai Foto Profil Facebook SendiriCara Membuat Bingkai Foto Profil Facebook Sendiri - Akhir-akhir ini kita diramaikan dengan fitur baru facebook yaitu Bin… Read More
• Cara Membuat Tombol DownloadHi sobat jumpa lagi bersama saya diblog Mush'ab pada kesempatan kali ini saya akan membagikan Cara membuat tombol d… Read More
• Cara Menjalankan Aplikasi Android Di PC/Laptop Tanpa EmulatorMush'ab Hidayat - Menjalankan aplikasi android di perangkat PC atau laptop bukan lagi sebuah hal yang mustahil, seb… Read More
• Script Anti Adblock Ampuh Untuk BloggerScript Anti Adblock Ampuh Untuk Blogger - Adblock adalah aplikasi atau Adds-on yang dapat dipasangpada browser yang berf… Read More
• Buat Aplikasi Tanpa Perlu CodingAplikasi RE:APK, Reskin Aplikasi Tanpa Coding - Halo sobat Riswan.net, malam ini admin mau memperkenalkan aplikasi sulta… Read More
• Cara Membuat RAM Tambahan Menggunakan FlashdiskMush'ab Hidayat - RAM (Random Access Memory) merupakan salah satu bagian pada komputer yang bisa dikatakan memiliki… Read More

Dapatkan Tips Menarik Setiap Harinya!

• Dapatkan tips dan trik yang belum pernah kamu tau sebelumnya
• Jadilah orang pertama yang mengetahui hal-hal baru di dunia teknologi
• Dapatkan Ebook Gratis: Cara Dapat 200 Juta / bulan dari AdSense