Memasang Notifikasi Komentar di Blogger - Sudah lama tidak update. Dan postingan saya kali ini adalah bagaimana cara membuat notifikasi atau pemberitahuan komentar di blog. Mungkin, sebagian besar pengguna blog sudah tau apa itu notifikasi komentar. Jadi, saya tidak usah menjelaskannya lagi. Dan mungkin sobat juga sudah memasang notifikasi ini. Tapi, siapa tau ini boleh dicoba. Sebelumnya, saya harus berterima kasih terlebih dahulu kepada +Kang Ismet yang sudah berbagi informasi cara pemasangannya di dunia maya ini. Mungkin, ini terdapat sedikit modifikasi. Baiklah, langsung saja ini SS-nya.
Langkah - langkah :
1. Simpan kode berikut ini sebelum kode </body>.
<div id='notif' title='Notifikasi'/>
<div id='notif2' title='Notifikasi'/>
<div class='bg_hitam' id='bg'/>
<div id='cm-wrapper'>
<div class='flexcroll' id='cm-scroll'>
<div id='comments-container'/>
</div>
</div>
<div id='show-total'/>
<script type='text/javascript'>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
home_page: "http://silumanpisces.blogspot.com",
max_result: 18,
t_w: 50,
t_h: 50,
summary: 9999,
new_tab_link: false,
ct_id: "comments-container",
new_cm: " Komentar Baru!",
interval: 30000,
alert: true,
alert: function(total) {
document.getElementById("show-total").innerHTML = '<strong class=\'total-show\'>'+total+'</strong>';
document.title = '(' + total + ') ' + originalTitle;
}
};
$('#notif').click(function(){$("#cm-wrapper").css({right: "0px"});$("#bg, #notif2").show();$("#notif").hide();});$('#notif2').click(function(){$("#cm-wrapper").css({right: "-381px"});$("#bg, #notif2").hide();$("#notif").show();});$('#bg').click(function(){$("#cm-wrapper").css({right: "-381px"});$("#bg, #notif2").hide();$("#notif").show();});document.getElementById('notif').onclick = function() {document.title = originalTitle;$('#show-total').hide();};document.getElementById('show-total').onclick = function() {document.title = originalTitle;$('#show-total').hide();$("#cm-wrapper").css({right: "0px"});$("#bg").show();};setTimeout(function() {$('.myframe').each(function() {$(this).replaceWith('<iframe class="myframe" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');});}, 5000);$(document).ready(function() {
var stickyNavTop = $('#HTML001').offset().top; var stickyNav = function(){var scrollTop = $(window).scrollTop(); if (scrollTop > stickyNavTop) { $('#HTML001').addClass('sticky');} else {$('#HTML001').removeClass('sticky'); }};stickyNav();$(window).scroll(function() {stickyNav();});});
setTimeout(function() {
$('.jsfiddle-demo').each(function() {
$(this).replaceWith('<iframe class="jsfiddle-demo loader" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');
});
}, 5000);var cm_config_defaults={home_page:"http://silumanpisces.blogspot.com",max_result:15,t_w:50,t_h:50,summary:9999,new_tab_link:false,ct_id:"comments-container",new_cm:" Komentar Baru!",interval:30000,alert:true,},_cookie={set:function(g,f,j){var i,h;if(j){i=new Date();i.setTime(i.getTime()+(j*24*60*60*1000));h="; expires="+i.toGMTString()}else{h=""}document.cookie=g+"="+f+h+"; path=/"},get:function(f){var e=f+"=",h=document.cookie.split(";"),j;for(var g=0;g<h.length;g++){j=h[g];while(j.charAt(0)==" "){j=j.substring(1,j.length)}if(j.indexOf(e)==0){return j.substring(e.length,j.length)}}return null},del:function(b){this.set(b,"",-1)}},tt_cm=(_cookie.get("tt_cm"))?_cookie.get("tt_cm"):0,doc_title=document.title;for(var i in cm_config_defaults){cm_config_defaults[i]=(typeof(cm_config[i])=="undefined")?cm_config_defaults[i]:cm_config[i]}function showRecentComments(json){var entry=json.feed.entry,total=parseInt(json.feed.openSearch$totalResults.$t,10),skeleton="",oldCount=tt_cm,co=cm_config_defaults;var totalComments=total-oldCount>50?'50+':total-oldCount;if(oldCount<total){if(cm_config.alert===true){alert((total-oldCount)+cm_config.new_cm)}else{if(cm_config.alert===false){document.title="("+(total-oldCount)+cm_config.new_cm+") "+document.title}else{cm_config.alert((total-oldCount),cm_config.new_cm)}}}skeleton='<ul class="cm-outer">';for(var i=0;i<entry.length;i++){for(var j=0;j<entry[i].link.length;j++){if(entry[i].link[j].rel=="alternate"){link=entry[i].link[j].href;break}}var dash=link.lastIndexOf("/")+1,dot=link.lastIndexOf("."),title=link.split("-").join(" ").substring(dash,dot)+"…";author=entry[i].author[0],name=author.name.$t,avatar=author.gd$image.src.replace(/\/s[0-9]+(\-c|\/)/,"/s"+co.t_w+"$1").replace(/http\:\/\/www.google.com\/url\?source\=imglanding(.*?)q\=/i,"").replace(/\.(jpg|jpeg|png|bmp|gif)(.*?)$/i,".$1"),profile=(author.uri)?author.uri.$t:"#nope",u=entry[i].id.$t.replace(/^.*?blog\-([0-9]+).*?post\-([0-9]+)/,"http://www.blogger.com/delete-comment.g?blogID=$1&postID=$2"),r=entry[i]["thr$in-reply-to"].source.split("default/")[1],d=entry[i].id.$t.replace(/^.*?blog\-([0-9]+).*?post\-([0-9]+)/,"http://www.blogger.com/comment-iframe.g?blogID=$1&postID="+r+"&parentID=$2"),date=entry[i].gd$extendedProperty[1].value,content=("content"in entry[i])?entry[i].content.$t.replace(/<i rel="pre">(.*?)<\/i>/ig,"<pre>$1</pre>").replace(/<i rel="code">(.*?)<\/i>/ig,"<code>$1</code>").replace(/<i rel="linku">(.*?)<\/i>/ig,"<a class='allow' href='$1'>\{link\}</a>").replace(/:D/ig,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFFgiGLsHY0r32XfEdq22FZ812xcDnwRC3KUt7eftXzCMugDKhaJhrSYsmJmkBedAakTfQXWLhOM2wDcQ-uI98A4JT7mEmtNbS9AEWvFBXS2HeUW70agNxW1utZ8Tm1KCieHkTxt7VSZM/s1600/icon_smile.gif' alt='' class='cm-smiley'/>").replace(/:\)/ig,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJv23uAoTDDqf3ZqXil0jo4PObdg8emxFOHIXAYyaOhQDXQasBWUlXMoVdNHGrjZvdvL0ksdltC0IKwPq68DSy16kdZs9a27HxPkaTJL510kVczMeOrwmk3Wam5YrshwT0AvCVXOw_DUw/s1600/smile1.gif' alt='smile' class='cm-smiley'/>"):"",nt=(co.new_tab_link)?' target="_blank"':"";content=(content.length>co.summary)?content.substring(0,co.summary)+"…":content;skeleton+="<li>";skeleton+='<div class="cm-header"><a href="'+profile+'" title="'+name+'"'+nt+'><img alt="Loading..." style="width:'+co.t_w+"px;height:"+co.t_h+'px;" src="'+avatar+'"></a><span class="author"><a href="'+profile+'" rel="nofollow">'+name+'</a> pada <a href="'+link+'" title="'+title+'"'+nt+" rel=>"+title+"</a></div></span>";skeleton+='<div class="cm-content">';skeleton+='<span class="cm-text">'+content+"</span>";skeleton+='<div class="cm-footer">'+date+' <a href="'+d+'" onclick="window.open(this.href,'_cf','scrollbars=1,width=470,height=250,left=355,top=135');return false;" title="Balas komentar">Balas</a> <a href="'+u+'" title="Hapus komentar" target="_blank">Hapus</a></span> </span>';skeleton+="</div></li>"}skeleton+="</ul>";document.getElementById(co.ct_id).innerHTML=skeleton;_cookie.set("tt_cm",total,7000);tt_cm=total}(function(){var head=document.getElementsByTagName("head")[0],script=document.createElement("script"),co=cm_config_defaults;script.type="text/javascript";script.id="cm-feed-script";script.src=co.home_page+"/feeds/comments/default?alt=json-in-script&redirect=false&max-results="+co.max_result+"&callback=showRecentComments";head.appendChild(script);setInterval(function(){var newScript=document.createElement("script");newScript.type="text/javascript";newScript.id="cm-feed-script";newScript.src=co.home_page+"/feeds/comments/default?alt=json-in-script&redirect=false&max-results="+co.max_result+"&callback=showRecentComments";var oldScript=document.getElementById("cm-feed-script");oldScript.parentNode.removeChild(oldScript);head.appendChild(newScript)},co.interval)})();
//]]>
</script> 2. Lalu, simpan CSS berikut di atas kode ]]></b:skin> atau </style>.
/* Notifikasi Komentar */
#show-total {
position:absolute;
top:1px; /* jarak dari atas */
right:280px; /* jika ingin kesebelah kiri tukar right menjadi left */
z-index:9999; /*pengaturan always top*/
cursor:pointer;
float:right;
}
.total-show {
background-color:#FF0000; /*warna total komentar*/
color:white;
padding:2px 6px;
font-size:11px;
border-radius:4px;
font-weight:bold;
}
#notif {cursor:pointer;}
#notif:before {
content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioJ8mah62JcNRwrWPwYDCJS842VC6Wy0nL9-jlYhCjMztFrqHyxZmWLCkSq0X7sFbBpq-qRR1R5YBxEARkKep1X5tCodcIp6Oj4QuWw5Ybw_0-ljsK9n9D_A7Qb5Yxya6NU3TpbbBY62Y/s1600/lonceng.png');
display:block;
position:absolute;
top:12px;
right:300px;
opacity:.5;
z-index:9997;
transition:all 0.4s ease-out;
}
#notif:hover:before {
opacity:1;
}
#notif2 {cursor:pointer;display:none}
#notif2:before {
content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioJ8mah62JcNRwrWPwYDCJS842VC6Wy0nL9-jlYhCjMztFrqHyxZmWLCkSq0X7sFbBpq-qRR1R5YBxEARkKep1X5tCodcIp6Oj4QuWw5Ybw_0-ljsK9n9D_A7Qb5Yxya6NU3TpbbBY62Y/s1600/lonceng.png');
display:block;
position:fixed;
top:12px;
right:300px;
opacity:.5;
z-index:9997;
transition:all 0.4s ease-out;
}
#notif2:hover:before {
opacity:1;
}
#cm-wrapper {
width:310px;
position:fixed;
top:48px;
right:-381px;
z-index:9999;
background-color:#222;
padding:15px 13px 25px 15px;
color:#666;
font-family: Arial, Sans-serif;
border-top:8px solid #444;
transition:0.5s ease;
}
#cm-wrapper:before {
content:"";
width:0;
height:0;
position:absolute;
top:-24px;
right: 303px;
border:8px solid transparent;
border-color:transparent transparent #444;
}
#cm-scroll {
width: 100%;
height: 600px;
overflow: auto;
position: relative;
}
#comments-container {
color:#666;
font-family: Arial, Sans-serif;
}
#comments-container.cm-active {
position:fixed;
right:0;
top:61px;
}
.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}
.vscrollerbase {
width: 5px;
background-color: #111;border-radius:2px;
}
.vscrollerbar {
width: 5px;
background-color: #599b29;border-radius:2px;
}
.hscrollerbase {
height: 10px;
background-color: #111;border-radius:2px;
}
.hscrollerbar {
height: 10px;
background-color: #444;border-radius:2px;
}
.scrollerjogbox {
width: 10px;
height: 10px;
top: auto; left: auto;
bottom: 0px; right: 0px;
background-color: gray;
}
.cm-outer {
margin:0 auto;
padding:0;
font-size:11px;
text-align:left;
}
.cm-outer pre {background-color:#141414;font-size:11px;color:#7c7c7c}
.cm-outer li {
padding:7px 10px 12px;
list-style:none;
clear:both;
position:relative;
border-top:1px solid #333;
border-bottom:1px solid #111;
margin-right:10px;
}
.cm-outer code {
color:#a6a658;
font-size:11px;
}
.cm-outer li.selected {
border-left:4px solid #fffe8c;
}
.cm-outer li:first-child {
border-top:none;
}
.cm-outer li:last-child {
border-bottom:none;
}
.cm-text {color:#999;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 0 8px 60px;font-size:12px;font-weight:normal !important;}
.cm-header a {color:#599b29;text-decoration:none;font-size:12px;font-weight:bold}
.cm-header a:hover {color:#e6e6e6;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-left:60px}
.cm-outer img {
display:block;
float:left;
background:#8fa2cb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Q0yr091RPVcMF1bQUFH0tP44BQrBMazyEKknL9gXYJLmSKjcsr4msvha9XHHrf83QzorCQkL616SqVkpl5g5h75vuXNyXRHwdmWTyiqy-eb6dWj9STsn6X-6A65YpfNuy-8nVHfpqO4/s1600/anon5.png') no-repeat 50% 50%;
overflow:hidden;
border-radius:100px;
position:absolute;
top:10px;
left:0;
border:3px solid #3d464f;
}
.cm-footer {margin-top:7px;}
.cm-footer a {color:#599b29;text-decoration:none;}
.cm-footer a:hover {color:#e6e6e6;text-decoration:none;}
div.cm-header img[src='http://img1.blogblog.com/img/openid16-rounded.gif'] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqQEsIJQoW_F_m1ue0zHr_2U9FAJDKQTl15gHTVfaPxX8q3xEGlwun9_WoRdTwtrrjkKWd0PaZhgDdaUdWc_QKb17H5tLbtbRu3QLTXDeGf8JM4wWCBOty7Q2EnPKGlucoKHXDX0qGb0A/s80-c/gravatar.png);
}
.bg_hitam{
display: none;
position: absolute;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000;
z-index:99;
opacity:.30;
}
.sticky {
position:fixed;
top:42px;/* jarak dari atas*/
z-index: 100;
}
.comments
.thanks-comment{
position:relative;
margin:10px 0;
padding-left:40px;
font-style:italic;
font-size:16px;
quotes:"201C""201D""2018""2019"
}
.comments
.thanks-comment:before{
content:open-quote;
position:absolute;
top:0;
left:0;
margin-top:15px;font-size:4em;color:#d80556}
3. Sebelum disimpan pastikan dulu bila blog anda sudah terdapat jQuery. JQuery versi apapun bisa digunakan. Jika belum ada , silahkan pasang kode berikut di atas kode </head>.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> 4. Jangan lupa, pada langkah pertama ubah url blognya dengan url blog sobat. Ada 2 url yang sobat harus ganti. Salah satunya pada cuplikan kode berikut.
Ubah url blognya. Jika sudah, simpan template.
}, 5000);var cm_config_defaults={home_page:"http://silumanpisces.blogspot.com",max_result:15,Ubah url blognya. Jika sudah, simpan template.
7 komentar Tambahkan komentar
ambil pertamax dulu.. =D
Balasbagus nih jadi pengunmjung bisa langsung ke TKP :D
ya mas. Jika ada notifikasi komentar jadi kita langsung bisa menuju TKP. gk ribet jadinya.
Balaskeren kang :-bd
Balasmakasih sis
Balascara memindah gambar loncengnya gimana gan?
Balasya tinggal atur margin top dan right di css-nya gan, sesuai keinginan.
Balasterima kasih sob, saya sudah menerapkannya dan berhasil, tapi kalau boleh tahu kira-kira bebannya berat ngak ya, soalnya kodenya saya lihat banyak tu :D
BalasDilarang menyertakan link aktif, iklan, ataupun titip link dalam berkomentar di Blog Fathoni16. Silahkan berkomentar tanpa ada kata-kata kotor.
Konversi KodeEmoticon