Notifikasi Komentar Ala Google Plus

Assalamu'alaikum wr wb selamat malam para blogger Kali ini saya akan share artikel tentang notifikasi komentar, Widget ini selain tampilannya yang simple juga berfungsi untuk pemberitahuan komentar terbaru di blog kita, dengan memasang widget ini kita tidak perlu lagi repot-repot dan notifikasi komentar ini seperti punya abah saja tampil beda hehe..

Cara Membuat Notifikasi Komentar Ala Google Plus

1. Sobat Masuk ke Template => Edit HTML
2. Cari Kode ]]></b:skin> atau kode </style>
3. Taruh Kode CSS berikut ini tepat di atas ]]></b:skin> atau </style>

 /* CSS Notifikasi Komentar */
#show-total {
position:fixed;
top:15px;
right:288px;
z-index:999;
cursor:pointer;
float:right
}
.total-show {
background-color:#f1c40f;
color:#fff;
padding:2px 6px;
font-size:11px;
border-radius:4px;
font-weight:700
}
#notif {
cursor:pointer
}
#notif:before {
content:"\f086";
font-family:FontAwesome;
font-size:22px;
font-style:normal;
font-weight:400;
border:1px solid #b6b5b5;
padding:2px 5px;
display:block;
position:absolute;
top:1px;
right:190px;
opacity:.5;
z-index:999;
transition:all .4s ease-out
}
#notif:hover:before {
opacity:1
}
#notif2 {
cursor:pointer;
display:none
}
#notif2:before {
content:"\f00d";
font-family:FontAwesome;
font-size:22px;
font-style:normal;
font-weight:400;
padding:2px 5px;
border-radius:3px;
display:block;
position:fixed;
top:1px;
right:190px;
opacity:.5;
z-index:9997;
transition:all .4s ease-out
}
#notif2:hover:before {
opacity:1
}
#cm-wrapper {
width:300px;
position:fixed;
top:61px;
right:-381px;
z-index:999;
background-color:#DFDFDF;
padding:15px 13px 25px 15px;
color:#666;
font-family:Arial,Sans-serif;
border-top:8px solid #ff6c60;
transition:.5s ease
}
#cm-wrapper:before {
content:"";
width:0;
height:0;
position:absolute;
top:-24px;
left:119px;
border:8px solid transparent;
border-color:transparent transparent #ff6c60
}
#cm-scroll {
width:100%;
height:560px;
overflow:auto;
position:relative
}
#comments-container {
color:#666;
font-family:Arial,Sans-serif
}
#comments-container.cm-active {
position:fixed;
right:0;
top:61px
}
.scrollgeneric {
line-height:1px;
font-size:1px;
position:absolute;
top:0;
left:0
}
.vscrollerbase {
width:7px;
background-color:#111;
border-radius:3px
}
.vscrollerbar {
width:7px;
background-color:#444;
border-radius:3px
}
.hscrollerbase {
height:10px;
background-color:#111;
border-radius:3px
}
.hscrollerbar {
height:10px;
background-color:#444;
border-radius:3px
}
.scrollerjogbox {
width:10px;
height:10px;
top:auto;
left:auto;
bottom:0;
right:0;
background-color:gray
}
.cm-outer {
margin:0 auto;
padding:0;
font-size:11px;
text-align:left
}
.cm-outer pre {
background-color:#141414;
font-size:11px;
color:#7c7c7c
}
.cm-outer li {
padding:7px 10px 12px;
list-style:none;
clear:both;
position:relative;
border-top:1px solid #28313b;
border-bottom:1px solid #111;
margin-right:10px
}
.cm-outer code {
color:#a6a658;
font-size:11px
}
.cm-outer li.selected {
border-left:4px solid #fffe8c
}
.cm-outer li:first-child {
border-top:none
}
.cm-outer li:last-child {
border-bottom:none
}
.cm-text {
color:#999
}
.cm-outer {
margin:0 0 5px
}
.cm-header {
margin:4px 0 8px 50px;
font-size:12px;
font-weight:400!important
}
.cm-header a {
color:#168980;
text-decoration:none;
font-size:12px;
font-weight:700
}
.cm-header a:hover {
color:#e6e6e6;
text-decoration:none
}
.cm-outer .cm-content {
overflow:hidden
}
.cm-content {
margin-left:50px
}
.cm-outer img {
display:block;
float:left;
background:#8fa2cb url('http://img1.blogblog.com/img/anon36.png') no-repeat 50% 50%;
overflow:hidden;
border-radius:100px;
position:absolute;
top:10px;
left:0;
border:3px solid #3d464f
}
.cm-footer {
margin-top:7px
}
.cm-footer a {
color:#168980;
text-decoration:none
}
.cm-footer a:hover {
color:#e6e6e6;
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/AVvXsEi4JdnnXoE2EavBeAYFsuLBywS7uqbotuejlwRlVAiMbU05ptN3Cjef7c7tny-PKG0En4dOTs251C5VJ7_ydBk_1dkKTbwR4bypy7RUA8-k_gHzkUxGowZ4hRZIMjg9XDekmrkxKgfzL3I/s80-c/gravatar.png)
}

.bg_hitam {
display:none;
position:absolute;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
z-index:99;
opacity:.3
}

img.cm-smiley {
float:none;
position:relative;
display:inline-block;
width:12px!important;
height:12px!important;
top:2px;
border:none;
border-radius:2px;
background:none
}

<div id='notif' title='Notifikasi'/>
<div id='notif2' title='Notifikasi'/>
<div class='bg_hitam' id='bg'/>
<div id='cm-wrapper'>
<div class='flexcroll' id='cm-scroll'>
<div id='comments-container'/>
</div></div>
<div id='show-total'/>
<script type='text/javascript'>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://abahtemplate.blogspot.com/",
    max_result: 20,
    t_w: 40,
    t_h: 40,
    summary: 9999,
    new_tab_link: false,
    ct_id: "comments-container",
    new_cm: " Komentar Baru!",
    interval: 30000,
    alert: true,
    alert: function (total) {
        document.getElementById("show-total").innerHTML = '<strong class=\'total-show\'>' + total + '</strong>';
        document.title = '(' + total + ') ' + originalTitle
    }
};
$('#notif').click(function () {
    $("#cm-wrapper").css({
        right: "0px"
    });
    $("#bg, #notif2").show();
    $("#notif").hide()
});
$('#notif2').click(function () {
    $("#cm-wrapper").css({
        right: "-381px"
    });
    $("#bg, #notif2").hide();
    $("#notif").show()
});
$('#bg').click(function () {
    $("#cm-wrapper").css({
        right: "-381px"
    });
    $("#bg, #notif2").hide();
    $("#notif").show()
});
document.getElementById('notif').onclick = function () {
    document.title = originalTitle;
    $('#show-total').hide()
};
document.getElementById('show-total').onclick = function () {
    document.title = originalTitle;
    $('#show-total').hide();
    $("#cm-wrapper").css({
        right: "0px"
    });

    $("#bg").show()
};
//]]>
</script>

<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/notif-komen.js'type='text/javascript'/>

4. Silahkan sobat cari lagi kode </body>
5. Taruh Kode diatas ini tepat diatasnya.

Facebook Twitter Google+ Linkedin Digg