Cara Memasang Recent Comment Disqus di Blogger

AdityaTekno.com - Membuat dan Memasang Recent Comments Disqus di blog dapat memudahkan anda dan pengunjung untuk mengetahui komentar terbaru dari Disqus di blog anda dengan tampilan slide dari samping dan jika anda menekan tombol icon lonceng di pojok atas maka widget recent comments ini akan terbuka.

Baca Juga: Cara Terbaru Memasang Komentar Disqus di Blog

Dengan widget ini anda akan jadi lebih mudah mengetahui komentar terbaru dari Disqus di blog anda. Nah, jika anda ingin mencoba tutorial ini. Silahkan simak tutorialnya dibawah.

Cara Memasang Widget Recent Comment Disqus di Blog

Karena widget ini menggunakan font Awesome, silakan tambahkan kode 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>

Baca Juga: Cara Membuat Tombol Buka Tutup Komentar Keren + Gradient Color di Blog

Pertama, buka Blogger >> Tema >> Edit HTML kemudian tambahkan kode 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>

Kemudian tambahkan kode ini 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/AVvXsEgiUX6L9luRXsYb8Oo75wD3OAiJBrZ2axA7lZ1yzIJcN-9aKRuajcQqf9EVHXagDMkEYh-vFuNeysBOPswMx1kQj6WSP2IhoiBOJ5-oodQN8q0gWZ0pC9-ozU9U_hRo_iN00B4UQZ5VxjY-/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://namadisqus.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>

Baca Juga: Cara Mengembalikan Komentar Disqus (permanen) menjadi Komentar Blogger

Ganti kode yang ditandai dengan username Disqus blog anda. Edit pada bagian ini jika anda 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 tulisan komentar yang tampil

Selanjutnya tambahkan kode 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 dan cek hasilnya di blog anda.

Baca Juga: Cara Membuat Komentar Disqus dengan Tombol Onclick Load

Demikian Cara Memasang Recent Comment Disqus di Blogger. Semoga bermanfaat dan sampai jumpa dipostingan selanjutnya. Salam AdityaTekno.com