Cara Membuat Notifikasi Komentar Seperti Google Plus - Setelah beberapa hari saya absen posing saya akan membagi ilmu tentang cara membuat notifikasi komentar seperti google plus. Ternyata banyak permintaan tentang cara membuat notifikasi komentar seperti google plus.
Dengan permintaan yang sangat banyak saya mempelajari tutorial langsung dari pembuatnya, wihh peningnya luar biasa. Rencananya saya cuma berbagi yang dasarnya saja bukan yang sudah saya percantik tapi dari pada nambah dosa lebih baik saya bagikan deh.
Sebelum melangkah pada tutorial, silahkan liat dulu screenshoot plus demonya.
Langkah 1 : Simpan jQuery di atas </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
Lewati langkah ini apabila sudah terdapat jQuery pada template sobat.
Langkah 2 : Simpan 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/AVvXsEj9aNDxkbYGAvTzaTmyhoaxKs-epcoczqUTeH4mnuYJyGlKMTZ3IdfXoZcA6K_I_GHwtCiKwpHz6YI-Z668c7ehO7FhSBUWlxV-U5b8lwGzwasbwkx22w-XqEObOA-2aVUnVAZrfznEjPs/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/AVvXsEhjSXdHEVjFN06kNaasu7IysnfcogysQVqHEbDZtYRb4cBh8b05prSED7blppwuojlzTis6q3QSVv_Jk2U1h1Xj0HiLWaWXqpnqxTBZzSKywdd8-jXIf1zlvvnlzWEEdpgKu-GezW46j9I/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(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/s80-c/gravatar.png);
}
Langkah 3 : Simpan kode ini di atas </body>
<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWx5p4lWfEih4KQuE1g1N8QPYfzxxfvQhD3mRIu7e-37l9oKuZiqsySudvhC2v1w5DFXAbJLozB5Va4Mc66z9c0mGjK0PIm2_nTcq6wyglOzBsZZCJVsv6boHhRY4neVA_PDFWuen6ahA/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5b4FdrZ69XnY57OfkHtepbhxDplLp-jVyunl4rgSFmrMyZ9Y5Gk2NI2_Zj5ofR4Dt_FsI0_H4x-fkLRDBTDTiy6EjA_mj4DaFU9oVQa89j8P8DG4ak49WTia-entubaLbk9CpD_vVHMs/s1600/delete4.png' title='close'/></div>
<script>
var originalTitle = document.title;
var cm_config = {
home_page: "http://teksmikro.blogspot.com",
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>
<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/notif-komen.js' type='text/javascript'/>
Apabila ada pertanyaan silahkan didiskusikan di kolom komentar. Jangan ngintip lagi ya.. HARAM 
