Berikut Cara Membuat Notifikasi Komentar Ala Google Plus
1- Pertama sobat harus Simpan kode CSS ini di atas ]]></b:skin> atau </style>
#cm-total{position:fixed;top:14px;right:0;width:188px;text-align:left;z-index:9999;cursor:pointer}
.total-counter{background-color:#d11919;color:white;padding:1px 4px;font-family:Arial,Sans-serif;font-size:11px;border-radius:5px;font-weight:bold}
#notif{position:fixed;top:20px;right:180px;z-index:9999;height:22px;width:19px;opacity:.4;cursor:pointer}
#notif:hover{opacity:1}
.close-notif{position:fixed;top:92px;right:20px;z-index:9999;cursor:pointer;display:none}
#cm-container{width:355px;position:fixed;top:67px;right:0;z-index:9999;background-color:#e5e5e5;padding:60px 20px 10px 20px;color:#666;box-shadow:0 4px 15px -4px rgba(0,0,0,.4)!important;text-align:left;border:1px solid rgba(0,0,0,.2);background-clip:padding-box;display:none}
#cm-container:before{content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3vRDn2wjOK5BEFKwL2HTx4VJFWkLhPWi4xOuGxirthJjYvJdCEhBfqswD_dZgGXdzOtfuiSMNI4CmJOUpbnO3GtuCJsha3TnW40zblqOsXetuOUKVuylttDe9nSIrq6cubMFdscI3C2A/s1600/arrow-notif.png');position:absolute;top:-14px;left:196px}
#cm-container:after{content:"Komentar Terbaru";position:absolute;top:22px;left:150px;text-align:center;font:normal 14px Arial;color:#333}
.cm-outer{margin:0 auto;padding:0;font-size:11px;text-align:left;font:normal 12px Arial}
.cm-outer ul{margin-bottom:5px}
.cm-outer li{padding:9px 10px 14px;list-style:none;clear:both;position:relative;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.2);background-color:white;margin-bottom:10px}
.cm-text{color:#797979}
.cm-outer{margin:0 0 5px}
.cm-header{margin:4px 0 8px 90px;font-size:11px;font-weight:normal!important}
.cm-header a{color:#262626;text-decoration:none;font-size:14px;font-weight:bold}
.cm-header a:hover{color:#74a2c3;text-decoration:none}
.cm-outer .cm-content{overflow:hidden}
.cm-content{margin-left:90px}
.cm-outer img{display:block;float:left;background:#ececec url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_5ArgpaGtL3Lslijx9IPsz2dEOdzT0ew0BoW3wnly3OAkqSBSCBUlk3qE7gXqEFsVZDd2fM-RZkK6YfHc8CSyvw9j3wLUl-Kqk5ko80Skn02RZBfEvvjPtbB5yb9PuYhT1VoDFl2gWFw/s1600/anon80.png') no-repeat 50% 50%;overflow:hidden;border-radius:3px 0 0 3px;position:absolute;top:0;left:0}
.cm-footer{margin-top:7px}
.cm-footer a{color:#5886a7;text-decoration:none}
.cm-footer a:hover{color:#74a2c3;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/AVvXsEidzn6LH22vhyuzi4hj9uWQT8XshkQwMtBjT6qA9Gqa-5Mvm3MCVhGWa1KnTWuBIzNeG4PuFgt7veKGWnm4RZZJjFlSBBaEHDio4v0IGCgVGTbKP8JT3w00j5-f3vpQ-WNT1bxswVJEl5w/s80-c/gravatar.png)}2- Setelah anda pasang kode diatas kemudian langkah selanjutnya adalah sobat Simpan kode Java script ini di atas </body>
<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJPME1l3xUymhRKvbQiBhoECG18AWXCCDrV9orjMkrcEmuJuh1scyvL_ZuK9IDU61YOey8_Ttl06_2kvXoVPl0dOlJfQSEPdNg8td5e7w_v05y_8IcSIW9yazcSrj9JqkkzCwBmHvqOEg/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNQNhNjHLvUOV38iiqqNH6tAFknx-1VhY0pf56kdBcPcMo8s435kiR5WkjUuXZANTuLP7cpFgSlVB2m4E5WdOWUEFaIgK0QKIRAnS3NjIGVAbeXr_BvhPsYQWli64WFHa5MNgFr0PGx4U/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
home_page: "http://blog.kangismet.net",
max_result: 6,
t_w: 80,
t_h: 80,
summary: 40,
new_tab_link: true,
ct_id: "cm-container",
new_cm: " Komentar Baru!",
interval: 30000,
alert: true,
alert: function(total) {
document.getElementById("cm-total").innerHTML = '<strong class=\'total-counter\'>'+total+'</strong>';
document.title = '(' + total + ') ' + originalTitle;
}
};
$('#notif').click(function(){$('#cm-container, .close-notif').toggle();});$('.close-notif').click(function(){$('#cm-container, .close-notif').hide();});document.getElementById('notif').onclick = function(){document.title = originalTitle;$('#cm-total').hide();};document.getElementById('show-total').onclick = function(){document.title = originalTitle;$('#cm-total').hide();$('#cm-container').show();};
//]]>
</script>3-Langkah yang Terkahir adalah Sobat Harus Simpan jQuery dibawah <head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
Oh ya , apabila di template sobat sudah terdapat jQuery maka lewati saja langkah diatas
4- Simpan Template dan lihat hasilnya . Gimana sob , mudahkan Cara Membuat Notifikasi Komentar Ala Google Plus , oh ya trima kasih banyak to +Kang Ismet
sumber : http://blog.kangismet.net/2013/11/notifikasi-komentar-ala-google-plus.html