Selasa, 11 November 2014

Notifikasi Komentar Ala G+

Baca Juga :

Tutorial kali ini tentang notifikasi ala google plus, disimak baik-baik !

infoalya.com

Login di akun blogspot anda
klik template
klik edit html
copy paste kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin>
atau kode </style> (pilih salah satu saja) biasanya diatas ]]></b:skin> tetapi ada beberapa template dapat berjalan dengan baik jika diletakkan diatas kode </style>



/* Notifikasi Komentar  */
    #show-total {
    position:absolute;
    top:1px; /* jarak dari atas */
    right:380px; /* 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('http://2.bp.blogspot.com/-pC7grh8zv_I/VFQlkWfDTAI/AAAAAAAAFfc/JxjA7jADT_A/s1600/lonceng1.png');
    display:block;
    position:absolute;
    top:8px;
    right:400px;
    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('http://2.bp.blogspot.com/-pC7grh8zv_I/VFQlkWfDTAI/AAAAAAAAFfc/JxjA7jADT_A/s1600/lonceng1.png');
    display:block;
    position:fixed;
    top:12px;
    right:400px;
    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('http://4.bp.blogspot.com/-JF6712BTA-U/T2Z5ZRTOrOI/AAAAAAAABn4/cXZsvDO8Hzs/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(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/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}

Selanjutnya cari kode </body>
kemudian copy dan paste kode dibawah ini tepat 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://samhidayat.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 = '<b class=\'total-show\'>'+total+'</b>';
            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://samhidayat.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='http://3.bp.blogspot.com/-WeTjMT8JDhg/UKhVHlZ88II/AAAAAAAADPI/b1gpiAvIkCc/s1600/icon_smile.gif'  alt='' class='cm-smiley'/>").replace(/:\)/ig,"<img  src='http://1.bp.blogspot.com/-2Z7Cwe04x-Q/UH9THzWWJII/AAAAAAAACtA/ChwawyzYsDI/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>

URL warna merah ganti dengan URL anda
klik save jika selesai.
Previous Post
Next Post

post written by:

  • 0 Comment
  • Comment

Leave your comment

[+] Silahkan tinggalkan komentar
[+] Berkomertarlah dengan santun
[+] Mohon tidak meninggalkan live link
[+] Terima kasih untuk komentar anda