Notifikasi Komentar Ala G+

Notifikasi Komentar Ala G+

Notifikasi Komentar Ala G+

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.

Share this:

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

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

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - https://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Info Alya? Keep us running by whitelisting Info Alya in your ad blocker.

This is how to whitelisting Info Alya in your ad blocker.

Thank you!

×
×
×