How To Make Comments Notification On Blog - After two days of not posting the article, this time infoBlog will share a tutorial about How To Make Comments Notification On Blog. Notification is something that gives official information to someone or the act of notifying someone.
Follow the steps below to Make Comments Notification On Blog . .
How To Make Comments Notification :
This widget uses jQuery, so please add the code below before </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
- Go to your Blogger Dashboard ›› Template ›› Edit HTML.
- Add the code below before ]]></b:skin> or </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/AVvXsEiKszgPEQ1R3QKe3zFUbTSdfkj2etxjz1r3empLJ0n2uTzYeDYRwDZ7atLydG93RFiAu4CS0js2eOv57Un-Zrokw8nQS0EzvNTpv_jpGLrqMHASLF-oJYEfsp-kKnqveCBq0OfC9XbFevE/s1600/arrow-notif.png');
position:absolute;
top:-14px;
left:196px;
}
#cm-container:after {
content:"News Comment";
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/AVvXsEihGVgRQOVfjQmiNOT6wp3zFZKjWjqwjjO166JfI7rfJaGN7fK-HJaXUcXjZj2ebqbxLyO2oFgvNdMsdpx069DQE9Ua2KbpWd8cA8NWc4aQu5IZ4tsWnHSzd4EszEE2feejaZnyatXbQsQ/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);
}
- And then, add the code below before </body>
<div id='cm-container'/>
<div id='notif' title='Notification'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisqYid_g4zmSIo64JkcKDD8Apm9E9oDw0jwufOSdTRj0rvk-aPutRlgF7AIr6MSM9pFgVxI-Xksu2BPkxH56vxloJEH4HwIMEaymN6EwA6P_aOSxV2H_RytcAwTt2Tcc9nz9n3pWj77p4/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwGxHBl0q44bPbnTj7qIraZWsVS8UCW56pUQLoozKRaXwFEsdGtokPvWNEp5Kf6B2Xiw-XO4uSkYu_eT2XFIHcsfFx13xKU6iQxPgInRgMxDg6SXugGTFW9_dqg9yBPT6Di5fqM4ach3U/s1600/delete4.png' title='close'/></div>
<script>
var originalTitle = document.title;
var cm_config = {
home_page: "http://infoaboutblog.blogspot.co.id/",
max_result: 6,
t_w: 80,
t_h: 80,
summary: 40,
new_tab_link: true,
ct_id: "cm-container",
new_cm: " News Comment",
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'/>
*NOTE
› Replace http://infoaboutblog.blogspot.co.id/ with your blog URL
For Result :
Enough of tutorial about How To Make Comments Notification On Blog. If you have any questions or suggestions, please write in the comments field below or directly send questions through the Contact Us service. Hopefully this article useful and you willing to share this article through social media accounts you have.
Thanks For Your Visiting
1 Comments:
thank you very useful information for me
EmoticonEmoticon