Siang ini saya mau berbagi bagaimana cara membuat notifikasi komentar atau recents comment di blogger dengan tampilan seperti
notifikasi di google plus.
Contohnya kaya yang ada di blog ini, coba lihat di pojok kanan atas, ada icon komentar.
Itu adalah icon notifikasi / pemberitahuan jika ada komentar terbaru di
Blog Alvin Warasi ini.
Nah, buat sahabat blogger yang minat membuat
Notifikasi Komentar Seperti Google Plus langsung aja simak langkah-langkah di bawah ini:
STEP 1
Copy script JQuery ini dan paste di atas kode
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript">
Tapi kalau sebelumnya udah ada jQuery di template blog Anda, STEP 1 bisa di skip.
STEP 2
Copy kode
CSS ini dan paste tepat di atas kode
]]></b:skin>
/* Notifikasi Komentar ----------------------------------------------- */
#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/AVvXsEhawd3FgN_tInqgfptr7PpxA-1dUJEj8QcdIb8PqFkEgx1JRQCxG4lebi_uWKMrhFmFd_wzdsPuaawP7cc-u9NtR0qbSasNXoMUh5kTMuVT8oxH9c7hXUVS9oWqxI0FQY7ZQrVs6ia19p8/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/AVvXsEjz8m4h10xxAnx7mqGB3QFWG_BSsPKPuRS0hOBcVh5MYJoGOEkhN22a42FzKFyAYt4umqOG1ZF0dLe4Uty0nKxex9wTHNbjlb-YL4i-MiZTu5Q6s2ITT0IN7XbGu8_I2LZkJHtoHZg6qfQ/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/AVvXsEijHmpNJlLT3QeAC72PU-ySUsBFybODYoRkHORaktawcpoKlqo98dvAxYbiB-NqjVzbrcUwQFPm-JNDTEOS3gM5pvyWa_aYBAbXSfw1HEJpgetZfDZWqwT2vnAEdI0V-LIl5ri0CTuqJA0/s80-c/gravatar.png); }
STEP 3
Copy kode dibawah ini dan paste tepat di kode
</body>
<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsRn_e8iwUCal6LFhyphenhyphenyIgBpXz-SjikozAbJJK2-rLgWFAX6btRFP6SFkYt4GCwBPzKSgH5Sa7e_m1e0kZqDYmSn67spG_jAlHP-_BNKos6Ym8yranQpXhkVC4sMI6BSyHaz8yIYhfdHEE/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhjOlNUqLoGAsNvdZdAl9jOdJ70LxDpZ7IRHpjJqMcZa-4Lhc9ooP_9O8qtaomvWCBajZuoIN7ZPJEtpiBBql9XOX5lfPGAFgmMb3gLGwqj2_GbjuEX0qZ52De6we64ZYXMWSEgsA0O_I/s1600/delete4.png' title='close'/>
</div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = { home_page: "http://the-warasi.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'/>
Pada bagian ini home_page: "http://the-warasi.blogspot.com", ubah sesuai URL blog Anda
Kalau udah semuanya,
SAVE. dan lihat hasilnya.. :)
Blogger
Google+
Facebook
Twitter