 |
| Cara Memasang Notifikasi Komentar |
- Masuk ke template lalu pilih Edit HTML kemudian cari kode ]]></b:skin>
- Copy dan pastekan kode berikut ini di atas kode ]]></b:skin>
/* CSS Comment Notification */
#show-total {position: absolute;top: 4px;right: 305px;z-index: 9999;cursor: pointer;float: right;}
.total-show {background-color:#D40B0B;color:#fff;padding:2px 6px;font-size:11px;
border-radius:2px;font-weight:normal;}
#notif {cursor:pointer;}
#notif:before {content: url('http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-12/24/laptop-wifi-icon.png');display:block;
position:absolute;top:5px;right:310px;opacity:0.6;z-index:9997;transition:all 0.3s ease-in-out;padding: 4px 4px 0px;
background: #fff;
border-radius: 3px;}
#notif:hover:before {opacity:1;}
#notif2 {cursor:pointer;display:none}
#notif2:before {
content: url('http://3.bp.blogspot.com/-XTG95ALcO4Y/U6wQKfUKdJI/AAAAAAAAEBo/I1ae0Yf1PvU/s1600/notif.png');
display: block;
position: fixed;
top: 14px;
right: 351px;
opacity: 1;
z-index: 9999;
transition: all 0.3s ease-in-out 0s;
}
#notif2:hover:before {opacity:1;}
#cm-wrapper {width:310px;position:fixed;top:0px;right:-381px;z-index:9998;
background-color:#fff;padding:15px 13px 25px 15px;color:#46515e;font-family:'Roboto',Sans-serif;border-left:8px solid #119CFF;transition:all 0.3s ease-in-out;}
#cm-wrapper:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
top: 6px;
left: -43px;
right: 303px;
border: 20px solid #119CFF;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
}
#cm-scroll {width:100%;height:600px;overflow:auto;position:relative;}
#comments-container {color:#46515e;font-family:'Open Sans',Sans-serif;opacity:1;}
#comments-container.cm-active {position:fixed;left:0;top:61px;}
.scrollgeneric {line-height:1px;font-size:1px;position:absolute;top:0;left:0;}
.vscrollerbase {width:5px;background-color:#fafafa;}
.vscrollerbar {width:5px;background-color:#e1e2e4;}
.vscrollerbar:hover {width:5px;background-color:#bdbec1;}
.vscrollerbar:focus {width:5px;background-color:#b7c866;}
.hscrollerbase {height:10px;background-color:#fafafa;}
.hscrollerbar {height:10px;background-color:#fafafa;border-radius:2px;}
.scrollerjogbox {width:10px;height:10px;top:auto;left:auto;bottom:0px;right:0px;
background-color:transparent;transition:0.3s ease-in-out;}
.cm-outer {margin:0 auto;padding:0;font-size:11px;text-align:left;}
.cm-outer pre {background-color:#fff;color:#46515e;border:1px solid #e1e2e4;border-left:3px solid #b7c866;font-size:11px;}
.vscrollerbar .cm-outer pre {width:5px;background-color:#e1e2e4;}
.cm-outer li {padding:7px 10px 12px;list-style:none;clear:both;position:relative;
border-bottom:3px solid #e1e2e4;border-radius:5px;margin-right:10px;}
.cm-outer code {color:#119CFF;font-size:11px;}
.cm-outer li.selected {border-left:4px solid #119CFF;}
.cm-outer li:first-child {border-top:none;}
.cm-outer li:last-child {border-bottom:none;}
.cm-text {color:#6c7075;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 0 8px 60px;font-size:13px;font-weight:normal!important;}
.cm-header a {color:#5d6b6b;font-family:'Roboto';text-decoration:none;font-size:13px;font-weight:300;}
.cm-header a:hover {color:#119CFF;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-left:60px}
.cm-outer img {display:block;float:left;background:#fff url('http://1.bp.blogspot.com/-21HK5HI5YEM/U6wYCTGPkKI/AAAAAAAAECQ/_R2ECAxKrug/s1600/anonim.png') no-repeat 50% 50%;
overflow:hidden;border-radius:100px;position:absolute;top:10px;left:0;
border:2px solid #e1e2e4;transition:all 0.3s ease-in-out;}
.cm-outer img:hover {border:2px solid #119CFF;}
.cm-footer {margin-top:7px;}
.cm-footer a {color:#a5aab1;text-decoration:none;}
.cm-footer a:hover {color:#119CFF;text-decoration:none;}
div.cm-header img[src='http://img1.blogblog.com/img/openid16-rounded.gif'] {
content: url(http://1.bp.blogspot.com/-21HK5HI5YEM/U6wYCTGPkKI/AAAAAAAAECQ/_R2ECAxKrug/s1600/anonim.png);}
.bg_hitam{display:none;position:absolute;position:fixed;top:0%;right:0%;width:100%;
height:100%;background-color:#182025;z-index:99;opacity:0.3;transition:all 0.3s ease-in-out;}
.emoWrap{margin:0 auto;text-align:center}
.emo,.emoKey{display:inline-block;*display:inline;vertical-align:middle}
.emoKey{width:auto;border:1px solid #ccc;background-color:white;font:normal bold 11px/normal Arial,Sans-Serif;padding:2px;margin:0 0 0 2px;color:black}
- Cari kode </body> dan pastekan script berikut ini di atas 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: "https://infonessia.blogspot.co.id",
max_result: 26,
t_w: 50,
t_h: 50,
summary: 9999,
new_tab_link: false,
ct_id: "comments-container",
new_cm: " New Comments!",
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:"https://minima9.blogspot.com",max_result:15,t_w:50,t_h:50,summary:9999,new_tab_link:false,ct_id:"comments-container",new_cm:" New Comments!",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]+)/,"https://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]+)/,"https://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://4.bp.blogspot.com/-J7s7flyAolE/U6tMYuCWJjI/AAAAAAAAD-g/ktLPs0sF0zM/s1600/smile.png' alt='' class='cm-smiley'/>").replace(/:\)/ig,"<img src='https://4.bp.blogspot.com/-J7s7flyAolE/U6tMYuCWJjI/AAAAAAAAD-g/ktLPs0sF0zM/s1600/smile.png' 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> on <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="Reply Comment">Reply</a> <a href="'+u+'" title="Delete Comment" target="_blank">Delete</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>
- Simpan Template
Keterangan:
- Warna biru untuk mengatur posisi tombol pemberitahuan
- Warna hijau bisa diganti dengan url icon lain
- Warna merah ganti dengan alamat blog Anda
- Contoh bisa dilihat di blog ini dengan klik tombol notifikasi di bagian atas blog ini
