2 Notifikasi Komentar Ala Google Plush

Buat para bogger mungkin trik notifikasi pesan ala google plush sudah sering di lihat di sebaian blog para bogger dn trik begini sudah banyak di share pada blog lain dan saya share lagi pada bog saya ini,siapa tau ada yang membutuhkanya,Untuk penerapaya sangat mudah dan tidak membutuhkan waktu yang lama karna cuma meerapapkanya saja pada dhosbor html blog anda.

Ada 2 notifikasi di antaranya seperti di bawwah ini,Anda tinggal pilih mana yang lebih cocok untuk blog anda,Untuk pegaturan penempatany silahkan anda atur code Cssnya sesuai dengan yang anda butuhkan,karna kode di bawah ini adalah kode standar yang di share,Jadi mungkin penempatanya belum sesuai dengan yang anda inginkan,Silahkan di atur saja.

#Notifiksi Yang Pertama#

Cara memasangnya sbagai berikut :

Loggin ke akun blogger anda > Edit Html > Gunakan Ctrl + F cari kode </head> > Jika sudahketemu simpan Jquery ini tepat di atas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Selanjutnya Gunakan Ctrl + F cari kode ]]></b:skin> Jika sudah ketemu simpan Css berikut tepat di atas kode ]]></b:skin>

/****Notifikasi Comments****/
#show-total {
position:fixed;
top:1px; /* jarak dari atas */
left:50px; /* jika ingin kesebelah kiri tukar right menjadi left */
z-index:9999; /*pengaturan always top*/
cursor:pointer;
float:right;
}
.total-show {
background-color:#FF0000; /*warna total komentar*/
color:white;
padding:2px 6px;
font-size:11px;
border-radius:4px;
font-weight:bold;
}
#notif {cursor:pointer;}
#notif:before {
content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ehXC8xyKckiUP3PZ1HsIyboTD3QEwSeQu28bRdl8bLXmFAGNFcaXuyF7Ym1CH8L2-DdeQLYdSFLwvbpztPQCguJWulGqHjiTLnb_R0A4Roz5DPiHB3_-P3y_YMmWDN5liV98so5v8IU/s1600/lonceng.png');
display:block;
position:fixed;
top:3px;
right:20px;
opacity:.5;
z-index:9997;
transition:all 0.4s ease-out;
border: 1px solid #ccc;
}
#notif:hover:before {
opacity:1;
}
#notif2 {cursor:pointer;display:none}
#notif2:before {
content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ehXC8xyKckiUP3PZ1HsIyboTD3QEwSeQu28bRdl8bLXmFAGNFcaXuyF7Ym1CH8L2-DdeQLYdSFLwvbpztPQCguJWulGqHjiTLnb_R0A4Roz5DPiHB3_-P3y_YMmWDN5liV98so5v8IU/s1600/lonceng.png');
display:block;
position:fixed;
top:3px;
right:20px;
opacity:.5;
z-index:9997;
transition:all 0.4s ease-out;
border: 1px solid #ccc;
}
#notif2:hover:before {
opacity:1;
}
#cm-wrapper {
width:310px;
position:fixed;
top:33px;
right:-381px;
z-index:9999;
background-color:#F3F7F7;
padding:15px 13px 25px 15px;
color:#666;
font-family: Arial, Sans-serif;
border-top:5px solid #5F95BE;
border-left:5px solid #5F95BE;
transition:0.5s ease;
}
#cm-wrapper:before {
content:"";
width:0;
height:0;
position:absolute;
top:-21px;
right: 24px;
border:8px solid transparent;
border-color:transparent transparent #5F95BE;
}
#cm-scroll {
width: 100%;
height: 600px;
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: 5px;
background-color: #111;border-radius:2px;
}
.vscrollerbar {
width: 5px;
background-color: #599b29;border-radius:2px;
}
.hscrollerbase {
height: 10px;
background-color: #111;border-radius:2px;
}
.hscrollerbar {
height: 10px;
background-color: #444;border-radius:2px;
}
.scrollerjogbox {
width: 10px;
height: 10px;
top: auto; left: auto;
bottom: 0px; right: 0px;
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 #333;
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 60px;font-size:12px;font-weight:normal !important;}
.cm-header a {color:#599b29;text-decoration:none;font-size:12px;font-weight:bold}
.cm-header a:hover {color:#e6e6e6;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-left:60px}
.cm-outer img {
display:block;
float:left;
background:#8fa2cb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-fYgfPG3BJ05ecWKh9thyphenhyphenXDzCGbY2UD3xOUclSKj_lW_kQsFwdwnZiAmbdLZDRJ8MFqCZKsWWbkpU0R4MdDvthSx71aHlqHrZz0o2dBRB5JwdDif8aS6LUN673C-lYuCyCagMS62MHCw/s1600/anon5.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:#599b29;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/AVvXsEiQMf8JafyR3ud8Lx1KGjctQ-t8UZJVp-jKq4_BKmjiK0Ehmf5YzNm-TL09tpsAi-h7dEmXD8vH2TUVElYIYrvJnAzcUMiZGH3FtCR8-V64iwclMXdyzbygDyhPT2Qu2FZgv6m-JzRu9N8/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:.30;
}
.sticky {
position:fixed;
top:42px;/* jarak dari atas*/
z-index: 100;
}
.comments
.thanks-comment{
position:relative;
margin:10px 0;
padding-left:40px;
font-style:italic;
font-size:16px;
quotes:"\201C""\201D""\2018""\2019"
}
.comments.thanks-comment:before{
content:open-quote;
position:absolute;
top:0;
left:0;
}

Gunakan Ctrl + F Cari kode </body> Jika sudah ketemu simpan code html berikut tepat di atas kode </body>

<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://rusmanedi.blogspot.com",
max_result: 18,
t_w: 50,
t_h: 50,
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();};setTimeout(function() {$('.myframe').each(function() {$(this).replaceWith('<iframe class="myframe" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');});}, 5000);$(document).ready(function() {
var stickyNavTop = $('#HTML7').offset().top; var stickyNav = function(){var scrollTop = $(window).scrollTop(); if (scrollTop > stickyNavTop) { $('#HTML7').addClass('sticky');} else {$('#HTML7').removeClass('sticky'); }};stickyNav();$(window).scroll(function() {stickyNav();});});
setTimeout(function() {
$('.jsfiddle-demo').each(function() {
$(this).replaceWith('<iframe class="jsfiddle-demo loader" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');
});
}, 5000);
//]]>
</script>
<script src='https://googledrive.com/host/0B54Ccx1SCE-cYi1hNDJLTC03cEE/ravizikrillah-notif.js' type='text/javascript'/>