Notifikasi Komentar Ala Google Plus

Notifikasi Komentar Ala Google Plus ini sebenarnya Free Just 4 U dapatkan dari Kang Ismet salah satu master blogger yang saya kenal.
Bagi rekan - rekan yang ingin memasang Notifikasi Komentar Ala Google Plus silahkan ikuti caranya di bawah ini. Untuk lebih jelas cara pemasangannya bisa langsung kunjungi Blog Kang Ismet, sedang untuk demonya bisa dilihat dengan klik lambang lonceng yang ada di pojok kanan atas blog ini.

• Baca juga : Tips Mempercepat Loading Blog

Langkah 1 : Simpan jQuery di bawah ini di atas </head>
( Lewati langkah ini jika didalam template sudah ada  jQquery )

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

Langkah 2 : Simpan CSS ini di atas ]]></b:skin> atau </style>

/* 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/AVvXsEgQhRjfeyFTOFkEcLIOzlQKaw-JaMNyFSHw6QmdcD8hKYZMlxVDGqe0XIu1nuYVZZl54h1rXUtbv-7iqk9Ak1C5PEcYFC10-x3v0sjkuHmy4uZ6eabc-sKJbBkm3-CcuQKgyvj5d2ZHueg/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/AVvXsEgBA6Abm8y3E3EzI53es0s6GGQpaHZEBuHM5t4QedujylvwrYKQvD6HwxIhWvrb4aZmnROEVR454KnjnlfFEBHtDRLp6nSqtX1sAF-LYJZ2pBy-w4hsS8Jz2gEmo6W82xmiVSel3Nw29vc/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=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7jkx8KeeQltW9V9PbzyUnpMv7L0GU9mcxhyphenhyphenjuNDTd6UDd4YCpAadd7R5rTkeX94XaCOpTJ4fUUJon0QIA17Lifi7vhKlFWATVRNa5vLR-ZvkRJGdc7fitAIG4DiGtioP6zjnXfqJYd8k/s80-c/gravatar.png);
}

Langkah 3 : Simpan kode ini di atas </body>

<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9tlKhmILEbq-d0yQU7bSs7xv_hfELa783p7iZDfiISoIg_67houTbu_G7teT9qmM5YKNMd6CybLd3dX1jYVjIh6pzK7cq4y9bMT9Tv_u7uGz0muolA5epqp81KkjH_FKn6dW1iLqTIbk/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSbUv96UwQKk-QoDHjQopli7sd9ZTAfSL8sJBG0O-YmQVno1ECgxulY6Z0ESSGULVW_PnNr1DJsSWWEESYvUtaLevmB3rsLPUWw_XyO-MYiGgfdS3i_fV7f6ohLWzgQ0AejT4lEbrysC4/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://blog.kangismet.net",
    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'/>

Semoga  Notifikasi Komentar Ala Google Plus  bermanfaat.
Sumber : http://blog.kangismet.net/2013/11/notifikasi-komentar-ala-google-plus.html