Uncategories Membuat Notifikasi Komentar

Membuat Notifikasi Komentar

Posted by Pratama Aditya 04.51

1. ke blogger.com
2.pilih blog yang akan dipasang tutorial ini
3.ketemplate > edit HTML
4. cari kode </head> lalu simpan kode dibawah ini diatas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

5. Kemudian masukkan CSS dibawah ini tepat diatas  ]]></b:skin>

/* Notifikasi Komentar  */
#show-total {
  position:fixed;
  top:8px;
  right:288px;
  z-index:999;
  cursor:pointer;
    float:right;
}
  .total-show {
    background-color:#f1c40f;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/AVvXsEiGKO8EJQ2UDcNpmnxPBfPPqkfYRHpcYjxKFFudALw93-mftEzvQkHnCKpvAras2d3rtzacAllRnZs_DxixacOxEV6kCKJERp1we0mc3Wx62-2YOxd2c9KufI-fCj4Jxrn1zilimI1PpJs/s1600/lonceng2.png');
  border:1px solid #b6b5b5;
  padding:5px 6px 0 6px;
  border-radius:3px;
  display:block;
  position:fixed;
  top:15px;
  right:298px;
  opacity:.5;
  z-index:999;
  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/AVvXsEiGKO8EJQ2UDcNpmnxPBfPPqkfYRHpcYjxKFFudALw93-mftEzvQkHnCKpvAras2d3rtzacAllRnZs_DxixacOxEV6kCKJERp1we0mc3Wx62-2YOxd2c9KufI-fCj4Jxrn1zilimI1PpJs/s1600/lonceng2.png');
  border:1px solid #b6b5b5;
  padding:5px 6px 0 6px;
  border-radius:3px;
  display:block;
  position:fixed;
  top:15px;
  right:298px;
  opacity:.5;
  z-index:9997;
  transition:all 0.4s ease-out;
}
  #notif2:hover:before {
  opacity:1;
}
#cm-wrapper {
  width:300px;
  position:fixed;
  top:61px;
  right:-381px;
  z-index:999;
  background-color:#192028;
  padding:15px 13px 25px 15px;
  color:#666;
  font-family: Arial, Sans-serif;
  border-top:8px solid #ff6c60;
  transition:0.5s ease;
}
#cm-wrapper:before {
content:"";
width:0;
height:0;
position:absolute;
top:-24px;
left:6px;
border:8px solid transparent;
border-color:transparent transparent #ff6c60;
}
#cm-scroll {
width: 100%;
height: 560px;
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: 7px;
    background-color: #111;border-radius:3px;
}
.vscrollerbar {
width: 7px;
background-color: #444;border-radius:3px;
}
.hscrollerbase {
height: 10px;
background-color: #111;border-radius:3px;
}
.hscrollerbar {
height: 10px;
background-color: #444;border-radius:3px;
}

.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 #28313b;
  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 50px;font-size:12px;font-weight:normal !important;}
.cm-header a {color:#168980;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:50px}
.cm-outer img {
  display:block;
  float:left;
  background:#8fa2cb url('http://img1.blogblog.com/img/anon36.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:#168980;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/AVvXsEgmrK5mg4iO84LPOQvxUJCZVr2u465YZHAq-_b5nifgIa1aWtycmyM9oDUrEB5mmVefbq_RXQqfET0NgPcUxYlfHeIqnGUuQT_C8Zyxc4hvaFsaqkG5edeamtlN-_-4jyjG3GxTZbV4fNg/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;
}
img.cm-smiley  {
  float:none;
  position:relative;
  display:inline-block;
    width:12px !important;
    height:12px !important;
    top:2px;
    border:none;
    border-radius:2px;
background:none;
}

6. Selanjutnya, tambahkan kode berikut, diatas 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://link-blog-anda.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 = $('#HTML7').offset().top; var stickyNav = function(){var scrollTop = $(window).scrollTop();     if (scrollTop > stickyNavTop) { $('#HTML7').addClass('sticky');} else {$('#HTML7').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://cara-termudah.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)+"&hellip;";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/AVvXsEjNYhj_rIcw2cpp_k5sqGOxp7QxQEXN98I8J-NdMGZ_SmYXzFL-2oMqfyvclmX_-hXcPp0ospqyvU1DcEhT742jml7Doh8QQS0IZ9VuovD1O5AAU-Vm7c_i7_AcU3TaF6hwcrffvDSkXoQ/s1600/icon_smile.gif' alt='' class='cm-smiley'/>").replace(/:\)/ig,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8SGsiw4DZMNKStM3Z9KOt5bxrkIDVLUwO0NppbuUGv9sCDasr-HPQGFBrtR6uxVqTpB6OGOOUh0Bp6gDv5gYmGXXoEtEeDcFCv1EYrw85EJeeAZ7hl3f-d9zoKUF53GLzUH6uypSijGg/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)+"&hellip;":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,&#39;_cf&#39;,&#39;scrollbars=1,width=470,height=250,left=355,top=135&#39;);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>

7.ganti link-blog-anda Menjadi Link Blog anda Simpan Template.jika Javascript tidak jalan Harap Berkomentar.
Next
This is the current newest page
Previous
Next Post »
Thanks for your comment
Langganan: Posting Komentar (Atom)