Cara membuat notifikasi komentar seperti google plus

Malam ini saya mau berbagi bagaimana caranya buat Notifikasi komentar atau recents comment di blogger dengan tampilan seperti notifikasi di google plus.
Contohnya kaya yang ada di blog ini, coba liat di pojok kanan atas, ada icon lonceng.
Itu adalah icon notifikasi / pemberitahuan jika ada komentar terbaru di blog Irvan Efendy ini.

Nah, buat sahabat blogger yang minat membuat Notifikasi komentar seperti Google Plus langsung ajah simak langkah-langkah nya di bawah ini:

STEP 1

copy script jQuery ini dan paste diatas </head>

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

*tapi kalo sebelumnya udah ada jQuery di template blog kalian, STEP 1 bisa di skip.

STEP 2

Copy CSS ini dan paste diatas ]]></b:skin>

/* 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/AVvXsEg4uZoUNUhDx2jDJhbDlyhmCwxYLQeeev9nLmYDrmEOWgy3bj7nnPSH-hGRW8cvbxPUc7XcvJ2o-84b19Dtq51Z2Fs9NW2i1t-ET1PfozByfPOTrDjsu9jit3zYi2P05Ex9Ce212V-Nhx0/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/AVvXsEhu9aLNjnfdncNywOEpX-VoFYLE4n1KZ7nQAKOeDm-h3Gr3xXb_z9-NBWSIrxTuReEFqVMuqadzH-W48Zm-pRQaxAG-3nAdK3wSJT71oXJ3OEkLKRz39MS2RGkJmLYHSbtp03HCAvj0NIg/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDqyN3lhNWdSnJ4_KNQ6en7q2ZDlcfBB9mxyHYwsgvdZZVMxW8OgiocHraryzKUHsO47eGQ9InZ68uthod1JVurl16Xjm-EnIkWSHPRdztTJ3iBw5aW514lxaK6uOxlz-OeznhgGv6QUM/s80-c/gravatar.png);
}

STEP 3
Copy kode ini diatas </body>

<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgthid2f4B2ZpkHmWoKIdlDcK9XigldiwxEu4dicDKyyMK46-5T-fQ-bctEV-9HmI_7InEkFawkmqTTR7jieDHShf5DhkxnZGHXSKkpH9V_v4sbqXMxbZgzLEKakN6_1lJPikkBydsMVUY/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk3b4iXvpCmy2akLSmv07ya7b3ufViocKsPKltemdACOyRzAMKHuRk0QwAQSJWt06YElBBnR6uOPp0IlIMJaOqT_ZpQtEzcfZtjuX3DqEFanS0_WFV69ZQbEwZLXIYMN-x_xbvAh0jPqM/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://irvan-efendy.blogspot.com",
    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'/>

*pada bagian ini home_page: "http://irvan-efendy.blogspot.com" , ubah sesuai URL blog kalian.

Kalo udah semuanya, SAVE.  dan lihat hasilnya.. :)

Inspirasi dari: Blog Kang Ismet