Cara Membuat Notifikasi Komentar Seperti Google Plus

Malam minggu ini ane mau berbagi bagaimana caranya buat notifikasi komentar atau recents comment di blogger dengan tampilan seperti notifikasi di google plus. Tau kan? pasti tau lah.. 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 hanivinside.NET ini. Tampilan nya seperti ini :

nah, untuk membuat Notifikasi Komentar Seperti Google Plus caranya :

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> 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/AVvXsEg_uPRd9eXF2Mn63QsqTuHNF9eVqnjfr84ptz8PVmkxXgz3lsbfSSF8GOkWwP7YJS1uLTJi6bJQQDCUIJkbnG7Vi7tphpmzWS447GRP_ghTO1jgEAWRXwC16I0aDU9dD8zOrepclqSEnHQ/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/AVvXsEiO_GCuexHz6w6hYqv2gKYoW6UG4gWEzSqXp8Jq4I5DFHcnByQW4RVuLJ3YBPdZ-onEfx0dgTNGujNsLAKYUATWIwlyCVtn-sGedf0c8PgrS-aT_d0fyHZp9OkdnbGsh6VcAdtWFSYITIU/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/AVvXsEiGP0_ZM1wzHX22TQXww5Q11XerFlv-dNb-5RnHauoQ7R1hvuRl-MaeWxV09PHHQyk6DQ3U5At0nGGjehyjgeXuMufapGZyWonq0wsZ9pzCq3DX1LkuOyFQPJDMtiulqYt67RcJdRVRrIw/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/AVvXsEji0sWmhO0jI6yazm43uNuIOs0N5j8UFzmWSZZuqtwgLuvf9O8IKv9RbbTc_VJaJ07YrEec83OShZNsTrZnOVeFTJ8EzHUsEjXVjxfonjHxuFvXxhBK03EtlD8DIloFVgy2LmhpBcifvoc/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFhpA-8EMjbNcNH3IRdE2KGrEKPl2rzNHCMS6YVrfk7RPJX2pAdjg7vmBpPzsvi4Hcg4JhH8DxbvOsRWhtAULJkKS_-hLilEuwAYNgY5bdLMLY6mhRRzggILhpvMDsnT5raRHxB4EvuuQ/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://www.hanivinside.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'/>

*pada bagian ini home_page: "http://www.hanivinside.net" , ubah sesuai URL blog kalian.

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


Referensi : Blog Kang Ismet