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/AVvXsEhiq3ORzFFpVWUaQ0osbrNbH36u-PF-NiH51VZUB1KXnYjvZH8KWY3yrFiBZow_KWQ6KjGTMWEdI7GXjtDerolBEXTD6Pp1kp2Mjp0dkHhSlW1Sn6M03HJX_ZvFrTEGaZbod1Cc64zfOdQ/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/AVvXsEjWjIYv_pYxZ4KzqSm3tIFnY-02JkoveKqGN4pbVffGa0ihGzF7QIPa_oZ_-CIkX9Hp_ookOktKovOpNkPESeHqv__pYzIVbzL9LwYYPjqGR_20CPsQe6SlrNYliD8DxRg94NWD3mJLR44/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/AVvXsEiORXPJQynW77Ll3JX00HR8cG4NhQoi04MGlkX0yqgaPgvLcASoP7CYZBUu3DTUAhOkrHI4cM3UWSQf7kleYs6XHXsar08MxaebsVSxIGG7HCFRznbie1jxECGh-Cxf5iQr55u3kWwJTmY/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/AVvXsEjdp079eV-ly3MoFVR6ySluYPJGVTjC6fjNcMmeDuiPSr7-QjNnNNGjT7YiNOta_S-JyXd2D9kHWPgFoyWUQWZ_8vJkfvgnE9at_KfjTxez0V7BTc0k8TXeKvlFjQk0NMQQnmjtXY6pqkc/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCcBYKJ2dsuaA7UrVFMzszYj6lu2V5TKYs8iEa67Y8o3ScYd0s-rUHAmqVsHgFhIKYXxyhuChQ9xUS19GibwUxYkuNwHDLKlgyXb_6qnmX8ckmC7BsQYS88eCVatqrZBpgJg9QUqqlXGk/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
Baca Juga Artikel Terkait Lainnya
Silahkan bertanya sesuai dengan artikel yang telah anda baca diatas.
Link aktif otomatis terseleksi ke SPAMMER.
Alasan komentar anda tidak terjawab adalah OOT atau diluar kemampuan Admin.