Cara Membuat Notifikasi Komentar Ala Google Plus

Demo

Selamat Malam Sob,Biasanya Orang Bikin Recent Comment Kurang Memuaskan Karena Ada Yang Bilang Kurang Bagus Atau Apalah Gitu,Sekarang Saya Akan Memberi Cara  Membuat Notifikasi Komentar Ala Google Plus,Biar Percaya Lihat SS Di Atas Atau Lihat Versi Demonya.Ikuti Cara Cara Di Bawah Ini.

1. Masuk Ke Blogger
2. Klik Template >> Edit HTML
3. Cari Kode </head> Biar Lebih Cepat Klik CTRL + F Taruh Kode Dibawah Ini Tepat Di Atas Kode </head>, Bila Ada Kode Ini Di Template Anda Lewati Langkah Ini

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

4. Cari Kode ]]></b:skin> Taruh Kode Di Bawah Ini Tepat Di Atas Kode ]]></b:skin>

#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/AVvXsEidKlEmHORTMSHQ7Fyycmw7_6GWkbfzOfoFQrY0Wvy_J1kiGx8xvjEMcnVvzyFsPSTgECa8n0FMj2qSiOb28fMGlT7ZxeB-xAx3rVc3qr1l318miC7kvCD20_U3VnuIU6gTDshCnQfCWuM/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/AVvXsEhnqU4Kll3IzIeyAMITi41CAQL9uZABgGa56_F9jH_fs5Hmh9KIiBaK9xvv8T1OGyqzJMAzzrJt5wUureu_IZeCYDJfPFJOOARxh-EE6vQV8xw6-QXrRthr9c9b0K5kDYzlO95xgUnPMZg/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/AVvXsEjEFZOcxssfZrHC8sQCxtBHKtFyyagFd18whdS059B7fyrdMY1_vvirjhpe0VxFXD-iz5ubf9AO-u3WPyUZ52B7ePmaw9pUQdX3Fe5Rg6bk8Me_FsWQrkL-Xr7anbm2Yxzbyr2MI2ZnzwA/s80-c/gravatar.png);
}

5. Cari Kode </body> Letakkan Kode Di Bawah Ini Tepat Di Atas Kode </body>

<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUlNwhe6bcR7SjYT7kukO2_0MM7q7moZjgvhyIVvUcS4U9JAxmJJWpHjUIKWX6n9nXVzafi0-_pcdR5F0A_27FelCbbuOVBcTM_wJhpRH0rSJQ40cNbzvmQzyYF4NJwYXD4WJMuVaWE6c/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBXLtvSYrigrYvePxJA6DAJSCdhDL-usvyXzySs2BMIN_Pm4flTyJienG0Oc7VuQz3diyxpOXC1RAMjL2EVvfper-FejdroccXCEr4YIJQSnYJuycudsTRduupXLTFTyf2-QcUtHUchJ4/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://46004600.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://46004600blogspotcom-blog-blcommunity.googlecode.com/svn/Notifikasi.js' type='text/javascript'/>

6. Klik Simpan Template
7. Tinggal lihat Hasilnya Deh