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/AVvXsEiBQ06IxTNlkCNAjCYgz-UNHq0_iIUqWYbUR53rBzcZ1CC-aZnDs2ggiNmh_Qw9jmxgiuhB6BSHKsPuBGnOQZMkavaOMP4IRAh938bbw8N2R0N1KRhMf8-gg7V1_ibOL2B6OYRBWy9p3UU/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/AVvXsEjdLbtcdfGQ4oPdbgffuvU7raX_EdoAjntD6zMZiLRdGIamlaF16K9NmwlrBo2Xp1_C_LO9PI0wtSo_a6ymp7fStmgdIv6-hDLuXHbGrle43nzR5iynSF5e7bfw7nIPP3cct0Vb7DbnY3w/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/AVvXsEhWw9OQfMtmVbuPDfRZEp5ZvdzVjeYUynI8wDGy8IKJdyAS-8lrTW5xOwf4Bd68i3AYLyswvpoFwQOS6qKq0F8ikHj0F2LPiFVBS6CAy8laCIYtR3JBpPxvfgbL1GNWn7rwI-SYf8EAL_Q/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/AVvXsEhTlASp8fo90EO1rU9XroqMevAdsSCsOL0YYbOYZcdrHEVmRnDdpzjuEpMVZ3pPmBGD2m2NWCmtHaurYFhQRuyFvelmJfn0ZP-aoCN3MfDt9ba0nQXk0SSO_kCPDbPVAZwZsv85-o0-7aU/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig3HHVDBdMcfLleEPBiBiMcgnrjiXLSzew-eQ2I5E9onu-Ns8sq6oUq_UV7mVcgrtLt8U1HuT546cZHJlCnAmvFXvLkXkhUSOvHUBsymOXTBqvVg7Cvc8hmRRTMf838RIZDqOGFaUd7Cc/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