Cara Membuat Recent Comment Notifikasi Version Blogger - Onet4u Tech
Dark
News Update
Loading...

Cara Membuat Recent Comment Notifikasi Version Blogger

Cara Membuat Recent Comment Notifikasi  Version Blogger
Also Read
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.
Cara Membuat Recent Comment Notifikasi  Version Blogger

Caranya bagai mana?

Pertama login ke blogger anda dan click html editor.

Info

Suka saya ingatkan, Sebelum memulakan proses pengubahsuaian template/pengeditan template sila buat backup terlebihdahulu untuk mengelakan daripada sebarang masalah \, sekiranya mengalami error pada template

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://2.bp.blogspot.com/-rSn-tmTRyVI/XMVV2FNoVII/AAAAAAAACsE/L6hwhns7vnEWHujUoOugHmVuYVd5eim0wCLcBGAs/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://1.bp.blogspot.com/-7bkcAKdpGXI/UrbyQRqvSKI/AAAAAAAAFmI/oBv_yMeYnMQ/s"+avatarSize+"/blogger.png":-1!=n.indexOf("blogblog.com/img/openid16-rounded.gif")?"https://2.bp.blogspot.com/-VgnInuIUKBU/UrbzyXTYWRI/AAAAAAAAFmU/3f_Vfj3TI6A/s"+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://2.bp.blogspot.com/-MSKTh2QQaCo/V4iK-euaR2I/AAAAAAAAESQ/VThMbkwTQ-AbVBePc2o8Q6gX686R-GtSACLcB/s1600/noimage.png",hideCredits=!0,numComments=numComments||5,avatarSize=avatarSize||60,characters=characters||40,defaultAvatar=defaultAvatar||"https://2.bp.blogspot.com/-MSKTh2QQaCo/V4iK-euaR2I/AAAAAAAAESQ/VThMbkwTQ-AbVBePc2o8Q6gX686R-GtSACLcB/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.
dottycat
“Don’t try to plan everything out to the very last detail. I’m a big believer in just getting it out there: create a minimal viable product or website, launch it, and get feedback.”

RELATED POSTS

COMMENT

Load Comments

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel