Notifikasi Komentar Ala Google Plus

Membuat Notifikasi Komentar Ala Google Plus - Setelah beberapa hari absen posting, saya akan bagikan bagaimana cara membuat notifikasi ala Google Plus. Jujur, banyak sekali permintaan tutorial ini dan sengaja saya pending mengingat lumayan rumitnya memahami tutorial asli notifkasi ini di blog DTE.

Ternyata setelah saya perhatikan, banyak pencuri yang ngintip source code blog ini. Kenapa saya katakan pencuri? karena hasilnya persis sama dengan notifikasi milik saya. Kalau pun menggunakan tutorial langsung dari DTE, saya rasa tidak akan semirip yang saya punya. Daripada nambah lagi orang yang berdosa, saya bagiin aja deh    :P

Sebelum melangkah pada tutorial, silahkan liat dulu screenshoot plus demonya.

• Demo

Langkah 1 : Simpan jQuery di atas </head>

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

Lewati langkah ini apabila sudah terdapat jQuery pada template sobat.

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/AVvXsEivMP4Ef8SaunFumBL8_05sRwV-kDg4SktvGajHtTiwI7PkgUxOA3T3EJQzk6p-6YYTlAHhDa1x2RiaNKIaLksRmBKEBoieFH0hfmuR92JpC7BPERzDYl4XWoJQEuyQWYlmBGJN-Nrna7M/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/AVvXsEjIUtC7SKF1uxtEliKfpG3503b03sAUb8Luno5T3PP1pwxktKrfpavkQTW3AhzXJBBt4e_DOdOy4vFA_Ug5Z8iWPbAjGiuZTcBBlTKJLbNmpL8agUUPgLv39ZtAqSgwKytKxF0ZheeNGsg/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/AVvXsEjb1yP1fk4oddgHMuzLZzW1LQLTjqSwDU0GLriSivYi542k6iM0JKjiWoUjXK90GUssBdRahJW5fCSpq0E1Et1pT2OSHhm482z1A3sbckVrS83cMdnv3eju4wYmKfvtlhPNpZA0qE0KMHo/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/AVvXsEjpuipFs7EKN5wOOo5hE9D3PNpUBRZd0Lt6EossSs1gv4-xecZgKTWBDMNXIMQ1hW0SD-OzElI5jN3D3yDgvcBrUHxuKWmZs5G-ag6E8ZfN8QXSrePGGOUGcs_atj1m07k-AlIOXqehtpw/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnGQs8tL4dfcTEirnqpeD51M3D3bspM660zoUqNDot-mcrVeexWkVoXXSBcLlQxLDKjFZGeU40W2MyJg6JNEfOEaB2ydZJQj430tt6qqrbs0WgJnmAe9zHoTPFp2qRRbMvTLWyEDuRLjc/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'/>

Untuk memindahkan posisi Notifikasi, silahkan pelajari CSS Position dan Valuenya

Apabila ada pertanyaan silahkan didiskusikan di kolom komentar. Jangan ngintip lagi ya.. HARAM :D

Resource : http://www.dte.web.id/2012/11/recent-comments-widget-for-blogger-with.html