Selain tampilannya sangat simple, fungsi kerja dari Notifikasi Disqus ini adalah untuk memberitahu siapa saja yang sedang berkomentar tanpa harus login email dulu.
Demo Tampilan :
Cara Memasang Notifikasi Komentar Disqus :
1. Login ke Blogger sobat, buka menu Template → Edit HTML kemudian tambahkan Code di bawah ini tepat di di atas </b:skin> atau </style>
/* CSS Notifikasi Disqus */
.header-1 {background:#fff;border-bottom:1px solid #ddd;height:30px;padding:15px;overflow:hidden}
.header-1 h4{font-size:15px;float:left;margin:5px;padding:2px;color:#555}
.header-1 img{float:right}
.notif-show{position:fixed;top:10px;right:10px;z-index:9997;color:#fff!important;background:#444;padding:10px;font-size:13px;border-radius:4px}
#disqus-notif.active{right:0}
#disqus-notif{position:fixed;background:#fff;z-index:9999;width:30%;border-left:3px solid #e2e2e2;top:0;right:-500px;bottom:0;transition:all .7s ease-in-out}#overlay-1.active{background:rgba(53,58,61,.9);position:fixed;z-index:9998;overflow:hidden;width:100%;height:100%;top:0;left:0}.close-text{display:inline-block;font-weight:700;font-size:14px;position:relative;right:-15px;top:-7px;visibility:hidden;opacity:0;transition:all 250ms ease-in-out}.close-1:hover .close-text{visibility:visible;opacity:1;-webkit-transform:translate3d(-80px,0,0);transform:translate3d(-80px,0,0)}
.close-1{position:fixed;margin-left:-50px;margin-top:20px;font-size:35px;font-weight:700;color:#fff!important}
#RecentComments{display:block;width:100%;margin:0 auto;padding:10px 0 10px 20px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;}
#RecentComments ul.dsq-widget-list{text-align:left;max-height:90%;overflow:auto;}
#RecentComments img.dsq-widget-avatar{margin:3px 10px 7px 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:#2e9fff;font-size:12px}
#RecentComments p.dsq-widget-meta a:hover{color:#2e87e7}
#RecentComments li.dsq-widget-item{margin:0;padding:6px 0 4px;list-style-type:none;clear:both;border-bottom:1px solid #eee;color:#2e87e7;font-weight:600}
#RecentComments li.dsq-widget-item:last-child{border-bottom:none}
#RecentComments a.dsq-widget-user {display:table;margin-top:8px;color:#2e9fff;font-weight:700;font-size:14px}
#RecentComments a.dsq-widget-user:hover{color:#2e87e7;}
#RecentComments span.dsq-widget-comment{display:block;clear:both;margin-top:5px;}
#RecentComments .dsq-widget-comment p{display:inline-block;font-size:13px;margin:0;font-weight:400;color:#444}
#RecentComments .dsq-widget-item pre{position:relative;background-color:#f3ffca;padding-top:0;box-shadow:0 1px 0 rgba(0,0,0,.1);border-radius:0;opacity:.9;transition:all .3s;}
.count-1{background:#ED1E24;padding:2px 5px;font-size:11px;border-radius:3px;position:absolute;top:-8px;left:-20px}
#RecentComments .dsq-widget-item pre:hover {opacity:1}
#RecentComments .dsq-widget-item pre code {color:#444;font-size:82%;}
#RecentComments .dsq-widget-item pre:before{content:'';position:absolute;padding:initial;font-size:initial;text-indent:initial;left:initial;color:initial;top:0;right:0;width:1.2em;height:1.2em;background-color:#d8e3b0}
#RecentComments .dsq-widget-item pre:after{content:'';font-size:initial;padding:0;position:absolute;width:0;height:0;border-style:solid;border-width:0 1.2em 1.2em 0;border-color:transparent #fff transparent transparent}
@media screen and (max-width:480px) {#disqus-notif{width:100%}.close-1{margin:0;color:#444!important}}
2. Note ! Jika blog sobat belum terpasang Script Font Awesome, silakan tambahkan dulu Script-nya.
Cari di code </head> dan tambahkan Code di bawah ini :
<link type='text/css' rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'/>3. Jika sudah, lalu tambahkan Code HTML di bawah ini tepat di bawah <body>
<a class='notif-show' href='javascript:;'><i class='fa fa-comments-o'></i><span class='count-1'>New!</span></a>
<div id='overlay-1'></div>
<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><a href='https://disqus.com' target='_blank' title='Disqus'><img alt='Disqus Logo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQvKtI3iLfGXaNPzONu_L1pLWpKF6uzXNRYigJ_dQJZ4DXDgHJP0Zn8_5DN52Ba4k6GqyqnJeWso4cdtipHSy0p97Q0LQI2At1C1fNK8FUl39C7nI9AmHhKLJk7ugDod2Wj97V9EmI6lHl/s1600/disqus-1.png'/></a></div>
<div class='dsq-widget' id='RecentComments'>
<script defer='defer' type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://designzchan.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=120\"></scr" + "ipt>");
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');
//]]>
</script>
</div>
</div>
4. Langkah akhir, tambahkan Code Javascript di bawah ini di atas code </body>
<script type='text/javascript'>
//<![CDATA[
// Notif Komentar 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")})});
//]]>
</script>
5. Simpan/Save Template, dan lihat hasilnya.
Semoga tutorial Membuat Notifikasi Komentar Disqus di Blogger dapat bermanfaat untuk sobat semuanya..
Terima kasih :)
