Cara Membuat Notifikasi Komentar Ala Google Plus

Laba-Laba Blog - Hampir seharian saya tidak ngepost sama sekali dan pada malam hari ini saya ingin ngepost serta ingin berbagi informasi yang telah saya dapat. Pada malam ini saya akan membahas tentang dunia blogger yaitu Cara Membuat Notifikasi Komentar Ala Google Plus. Bagi para pengguna blogger sudah pasti tau tentang notifikasi yang sedang saya bahas serta sudah tidak asing lagi, postingan ini saya dapat dari blog kang ismet dan baru di publish sekitar dua bulan yang lalu. Postingan ini baru beberapa orang saja yang mempostingnya karena postingan ini agak sedikit rumit. Pada widget ini memiliki beberapa kelebihan diantaranya adalah kita dapat mengetahui siapa saja yang telah mengomentari postingan kita serta widget ini agak sedikit memberatkan blogger anda. Berikut ikutilah langkah-langkah dibawah ini.

1. Masuk ke blogger.
2. Pilih template.
3. Pilih edit html.
4. Cari kode </head>.
5. Salin kode dibawah ini kemudian pasangkan tepat diatas kode tadi.

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

6. Cari kembali kode ]]></b:skin> atau </style>
7. Salin kode dibawah ini dan pasangkan di atas kode tadi.

 /* 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/AVvXsEjEOH589p2Zu04kp8bhqEmF0mJwZyyDyXe0lAmcwiaUAh1kuFXZNbWrtbQQ9dwO40KGSzCRsEiKLCY8vJcrVYwYIPS9tv6dFnejJHNIagIxyd3KSVe7d4NE_mHn90GJrXxVxO28NmcRwFk/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/AVvXsEhjDI8vzkk2BVstr1FtAoeS0SixBINPXUci7SL5FcdxBFbrXyaNsKlX-ydqyaSM_mC3s2V7vdDZvRiW6_QB-eGH79MzyNpNujoWWUbCP-_41q_4HV3Mg7muye4ZUlNTdpxhwPleaOPVJE8/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/AVvXsEjpxgQ3y_OyO8FbQQ1WXh_3t8Lhov1ymR1xdTC15gAtiZ1ee-Tk-dMjQF_My_RiCdFK1kUCCyoVf5WE5KFjiyy7aUD1aFGrN2ao0gzzgsNAkQ3ZRW8VnP5v09xkk2JaVwV4RoTU2DZsyv0/s80-c/gravatar.png);
}

8. Carilah kode </body>
9. Salin kode dibawah ini dan pasangkan kembali kodenya diatas kode tadi.

 <div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_0CPzhGO5tZ3A5oepToTa4b0Rp0qbkPJZFANkdgUiXR7MDqpd99d8r5Z7W757z-rwKhJCuudjrja2FzgLZ0JdzYMGJBZ9xakNyNkgIhsiegKC46P5tgrR0F3TzcKu6Op5RQ32lzQ8728/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfQisTZsHBmRgyD1PHoUYA9mhaJRPBYkrrpaqxwH1-diMD-D4IrW56e8v4RxTeKlN5jyFHGW4qKdYfjX2wkhW6PaEZtZQfox5mB_IYrh3P1DijKqRz-pr1l2UBSIERh60UkZeMucdih5w/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://muhammadagielk.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'/>

10. Simpan.
*) Ganti kode yang berwarna merah dengan alamat website anda.

Sumber: http://blog.kangismet.net