Cara Membuat Notifikasi Komentar

Hallo Sobat Emalution , sudah beberapa hari ini saya tidak online dan jarang aktif di dunia blogging.

Sampai-sampai Statistik Menurun , tetapi saya kembali dengan tutorial yang semoga bisa bermanfaat untuk sobat blogger.

Cara Membuat Notifikasi Komentar.ya begitulah namanya , mungkin tutorial ini sudah bertebaran luas di luar sana, tetapi saya akan membagikannya lagi .

Langsung saja kita ke caranya saja. karena waktu blogging hanya sedikit, hehe 😁.

1.Login ke Blogger.com

2.Buka menu template

3.Edit HTML.


Lalu letakkan kode dibawah tepat diatas ]]></b:skin> atau </style>

/* CSS Notifikasi Komentar */
#cm-total {position:absolute;top:14px;right:0;width:288px;text-align:left;z-index:9999;cursor:pointer;}
.total-counter {background-color:#1c94b9;color:#fff;padding:1px 4px;font-family:'Dosis',Sans-serif;font-size:11px;border-radius:5px;font-weight:400;}
#notif {position:absolute;top:13px;right:280px;z-index:9999;height:22px;width:19px;
opacity:0.6;cursor:pointer;transition: all 0.5s ease;}
#notif:hover {opacity:1;}
.close-notif {display:none;}
#cm-container {width:345px;height:560px;position:fixed;top:47px;right:0;
z-index:9999;background-color:transparent;color:#ccc;
text-align:left;background-clip:padding-box;display:none;transition:width 0.5s;}
#cm-container:hover {background-clip:content-box;background-color:rgba(255,255,255,0);}
#cm-container:after {content:none;}
.cm-outer {margin:0 auto;padding:0;font-size:11px;text-align:left;font:normal 12px Dosis;box-shadow:0 0 3px 1px rgba(0,0,0,0.3);}
.cm-outer ul{margin-bottom:5px;}
.cm-outer li {padding:9px 10px 14px;list-style:none;clear:both;position:relative;
background-color:#444;border-bottom:1px solid #363636;border-top:1px solid #4b4b4b;}
.cm-text {color:#ccc;}
.cm-outer {margin:0 0 5px;}
.cm-header {margin:4px 0 8px 0;font-size:13px;font-weight:400 !important;}
.cm-header a {color:#27a1c6;text-shadow:1px 1px rgba(0,0,0,0.3);font-family:'Dosis';font-size:14px;font-weight:400;transition: all 0.5s ease;}
.cm-header a:hover {color:#82d0e7;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-right:0px;}
.cm-outer img {display:block;float:left;
background:#313131 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQjNIrBMiQU998aQTtC6OBv8sZM68ts1BSt88ok5H2OxKnYRRf8cguG3kp4uV_JjV7PyquirEWlhdxG_fSY45A4cKSGT-8rnV7FgBP3rZYePOWQQMxBi6M-CzWoqczRIHQUnDSAjQyTwE/s1600/anon80.png') no-repeat 50% 50%;overflow:hidden;border-radius:100px;position:absolute;top:10px;right:15px; 
border:4px solid #555;box-shadow:0 0 3px 1px rgba(0,0,0,0.1);transition: all 0.5s ease;}
.cm-outer img:hover {border:4px solid #777;}
.cm-footer {margin-top:7px;}
.cm-footer a {color:#ccc;text-decoration:none;}
.cm-footer a:hover {color:#1c94b9;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/AVvXsEjpX6eyTtbwFqoPwtW3GSHDYEKLqAdGszmMbGcHKGLAHr4aJsiX53wbjb8-OoHanK5L8QIPqpTrm79WkEQ7dYyI2BnI7u3L9QCwao4LI7kFB9rLakJOsvjOvp6-4n8E4CaU7zGzK7NdwAE/s80-c/gravatar.png);}

Lalu Lanjutkan meletakkan kode dibawah tepat diatas </body>

<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='http://www.flaticon.com/png/256/19775.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOb5-z-f2r4yYZmyjIH40ovQ9D5ZaNr7Qsq-oW3K4AaKHzcpE_HDakZdQtsDJp5Qi4lAFyGmlWtK9KckKsjMNwZ7ifibos5kGuiePGXwkQhwV35g-ePUn6oOXrP5pUCJAVKKWbA0588i0/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://wahid-emalution.blogspot.com",
    max_result: 10,
    t_w: 50,
    t_h: 50,
    summary: 30,
    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-scroll');$('#cm-container').show();};
//]]>
</script>
<script src='https://aisuka-project.googlecode.com/svn/notif-komen.js' type='text/javascript'/>

Nah Begitu saja tutorialnya , dan saya sangat berterima kasih kpada Mba kiki yang Blognya Aisuka.
Semoga bermanfaat untuk sobat blogger. Terima kasih