Cara Membuat Notifikasi Komentar Ala Google Plus

Cara Membuat Notifikasi Komentar Ala Google Plus - Askum , kemaren ada yang request entang bagaimana cara membuat notifikasi komentar ala google + , sebetulnya cara ini awalnya kang ismet dulu lah yang menemukannya . namun karena ada teman saya yang request notifikasi keren ini , maka akan saya buat triknya , meskipun terlambat :) oh ya demonya seperti dibawah ini .

• Demo

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/AVvXsEgkyLze0DcLNDMlp6xkdXgqjy0dALIyEFY0bZD97x8ZIFybSQUEPp3AKe7j1ze4oFp6CF7aCu3fzCrOdJ5pOnboeTpM9KYjCSZJINAeTEIGNxZAd40RmLO9Bbh94bKvZmds0kHsNfUMawo/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/AVvXsEjJVtJy6rMxsQhKrJLCu3nWmKWcO_4PyAQvSNhfPMRZgSSwaeRPH41uP5e4pucc85Omu40rOxhLBrSs0Mc4KloaPZrbsG3G2L-f4iW1FNcZDz_hwIsl_16jkN0o1YoB3_Ezynz9H8sen2U/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/AVvXsEioJi8LWIdHIOqIvywTseclSQK_ZCb2C-wcYgAhXGFZCCI5AD9ND_hkK-YiEpGGMCvrEqfufvAw5XHsyVDsPR3jSGSVXiLGB2s5CPrLMDeSXZCefO5z9bdpFCvn538Xqxmbz164SlbKgtM/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/AVvXsEjnjCGUdYRc1peGPmMu2oFAw-lHPjFwCe2ybWjhRLKgttswCqVeaj2nIa4x1RJk94-l910mlW32Ph16MabA0H-QbUt5mPc7eFFu8K5iFdeNqMILnA9F9D2pdvteW-Q6ZXsgAS5sljBbCnE/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDMaJZwzPXT6H7hfIU5jO4RiJ_Tz8aDdVRq-Uwwm4uQ2gstUxrGO_Jmu6SP8D4_FazHccWFW35e6HABE96PEvekx8CiEPch0oJ3dRn5fANtgXzFdas8MAx8cyKB3qWDK2aQmChtQvR2tE/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