Cara Membuat Recent Comment Notifikasi Version Blogger

Assalamualaikum, Kali ini saya akan kongsikan cara membuat Notifaction Recent Post comment blogger , Sebelum ini saya tlah kongsikan recent post comment disqs tapi kali ini saya akan kongsikan version blogger pulak.

Caranya bagai mana?

Pertama login ke blogger anda dan click html editor.


Cari penutup body /body Lalu Pasangkan code berikut tepat di atasnya

<div id='overlay-1'></div>
<div id='disqus-notif'>
<a class='close-1' href='javascript:;' title='Close'><i class='fa fa-times'></i></a>
<div class='header-1'><h4>Recent Comments</h4><img alt='Blogger Logo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAVJcBvzRMLVNAJrSfjg2dclI7PtNBElj9yvwAYfRS3NdwT6vgu2wxgvCzB0-0KJHzLdPTuY4guTnAzGobYAsfLkaUp-WTkZF2bKwat8xY1HErpve7rjk9ZiKH9va2dEBryqNcOPB8Hko/s1600/ICON.png' title='Blogger'/></div>
<div class='dsq-widget' id='RecentComments'>

<script type='text/javascript'>
//<![CDATA[
// Recent Comments
function idbcomments(a){var e;e='<ul class="idbcomments">';for(var t=0;numComments>t;t++){var r,o,n,i;if(t==a.feed.entry.length)break;e+="<li>";for(var d=a.feed.entry[t],s=0;s<d.link.length;s++)"alternate"==d.link[s].rel&&(r=d.link[s].href);for(var l=0;l<d.author.length;l++)o=d.author[l].name.$t,n=d.author[l].gd$image.src;n=-1!=n.indexOf("/s1600/")?n.replace("/s1600/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s220/")?n.replace("/s220/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s512-c/")&&0!=n.indexOf("http:")?"https:"+n.replace("/s512-c/","/s"+avatarSize+"-c/"):-1!=n.indexOf("blogblog.com/img/b16-rounded.gif")?"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxEfpY3QzcDXc2tzVbs1D78FJ-Pbkud0d0pp7XWEn2PeGBKvepj28Ogc1i3mehzcPPXRuGZxgcBNlnZjOfeaqXd0K2B0h8GBHPZRWfT1vHOleFk0aNhoRzLjZV9PEisHAuSBfQ5jIdbO2S/"+avatarSize+"/blogger.png":-1!=n.indexOf("blogblog.com/img/openid16-rounded.gif")?"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje3hKw83uYjngnmJ0znXc0XvJfWzK91GfYrYafTJgUcufSs-y8vl7QCYiCZ_eXkLkcZNwK6t_VJvSz7c4XAnaL2C4ajQ6_ZPIqBEWlmgGbz7GiRZQMnJ_TgyO9WHkvv3FP3Bi7wa4nA4W8/"+avatarSize+"/openid.png":-1!=n.indexOf("blogblog.com/img/blank.gif")?-1!=defaultAvatar.indexOf("gravatar.com")?defaultAvatar+"&s="+avatarSize:defaultAvatar:n,1==showAvatar&&(i=1==roundAvatar?"avatarRound":"",e+='<div class="avatarImage '+i+'"><img class="'+i+'" src="'+n+'" alt="'+o+'" width="'+avatarSize+'" height="'+avatarSize+'"/></div>'),e+='<a href="'+r+'">'+o+"</a>";var A=d.content.$t,v=A.replace(/(<([^>]+)>)/gi,"");""!=v&&v.length>characters?(v=v.substring(0,characters),v+="&hellip;",1==showMorelink&&(v+='<a href="'+r+'">'+moreLinktext+"</a>")):v=v,e+="<span>"+v+"</span>",e+="</li>"}e+="</ul>";var c="";0==hideCredits&&(c="display:block;"),e+="",document.write(e)}var numComments=10,showAvatar=!0,avatarSize=42,roundAvatar=!0,characters=40,showMorelink=!1,defaultAvatar="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdmmp9mcvQmIGlSrLV4HhIf2QEAs_fb22SpPTHX7_j2ffppKT_tU_Rl7Zr-m_vKpvcRbmqJ5WzEzDm7PqWRDZfAkc9N6SbDY4nu8aWHcjVc6eCzWx1WduMFYk-HDm9SL2zTVKcYUZ07GE/s1600/noimage.png",hideCredits=!0,numComments=numComments||5,avatarSize=avatarSize||60,characters=characters||40,defaultAvatar=defaultAvatar||"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdmmp9mcvQmIGlSrLV4HhIf2QEAs_fb22SpPTHX7_j2ffppKT_tU_Rl7Zr-m_vKpvcRbmqJ5WzEzDm7PqWRDZfAkc9N6SbDY4nu8aWHcjVc6eCzWx1WduMFYk-HDm9SL2zTVKcYUZ07GE/s1600/noimage.png",moreLinktext=moreLinktext||" More &raquo;",showAvatar="undefined"==typeof showAvatar?!0:showAvatar,showMorelink="undefined"==typeof showMorelink?!1:showMorelink,roundAvatar="undefined"==typeof roundAvatar?!0:roundAvatar,hideCredits="undefined"==typeof hideCredits?!1:roundAvatar;
//]]>
</script>
<script src='/feeds/comments/default?alt=json&callback=idbcomments&max-results=10' type='text/javascript'></script>
</div>
</div>
<ul id='scrollToTop'>
<li><a class='ripplelink' href='#top' title='Go up'><i class='fa fa-chevron-up'></i></a></li>
<li><a class='notif-show ripplelink' href='javascript:;' title='Open Comments Notifications'><i class='fa fa-bell-o'></i><span class='sindicat'></span></a></li>
<li><a class='ripplelink' href='#bottom' title='Go down'><i class='fa fa-chevron-down'></i></a></li>
</ul>
<div id='top'></div>
<div id='bottom'></div>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){var o=220,r=600;jQuery(window).scroll(function(){jQuery(this).scrollTop() > o?jQuery("#scrollToTop").fadeIn(r):jQuery("#scrollToTop").fadeOut(r)})});
$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},600),!1}})});
// Notif comment
$(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>

Selanjutnya tambahkan code css berikut di dalam css template anda

/* Notifikasi Comment*/
.header-1{background:#222;color:#fff;height:auto;padding:15px;overflow:hidden}.header-1 h4{font-size:18px;float:left;color:#fff}.header-1 img{float:right}#scrollToTop .notif-show{position:relative;color:#222;transition:all .6s}#scrollToTop .notif-show:hover{color:#222}.notif-show:hover i{animation:rubberBand 1s}#disqus-notif{position:fixed;background:#fff;z-index:999;width:23.5%;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-1{position:fixed;margin-left:-40px;margin-top:16px;color:#fff;transition:all .3s}#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 i{transform:rotate(360deg)}#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:2px solid rgba(0,0,0,0.08)}#RecentComments a.dsq-widget-user{display:table;color:#22a6b3;font-weight:400;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:#f1f2f6;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;padding:0}#disqus-notif.active #RecentComments li.dsq-widget-item{animation:bounceInLeft 1.5s}#RecentComments .dsq-widget-comment p a{color:#3498db}#RecentComments .dsq-widget-comment p a:hover{color:#2980b9}
@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:500;color:#fff}}
.kotak_iklanpost{margin:20px auto;text-align:center}#st-4{z-index:70!important}.kotak_iklanpost img{margin:auto;-webkit-touch-callout:initial;-webkit-user-select:initial;-khtml-user-select:initial;-moz-user-select:initial;-ms-user-select:initial;user-select:auto;pointer-events:auto;width:100%}

Seleai memasangkanya save template anda dan lihat hasilnya, Na bagi mana?

Suka saya ingatkan, penggunaan banyak javascript menyebapkan loading blogger anda berat.

Sekiranya ada pertanyaan silakan tinggalkan comment and adi ruangan yang tlah di sediakan, Sampai disini saja posting saya tentang Cara Membuat Recent Comment Notifikasi Version Blogger, Kita bertemu lagi di posting akan datang.