YANG BIKIN KURUS: NOTIFIKASI KOMENTAR ALA GOOGLE PLUS

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

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/AVvXsEjQ3yyei9mQ1h7UGOWQn1Rkqx01JJkFG09CdZtmmxmcaj0beF7qkc4L0E7A6BFEsPi2LR634TL0hCBHjnEY9sreqicMB1YpFzutc8Jl_aWgUVmGt2zdNeSjA_kN4Z0rG4jeNqkUaOt3ZEE/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/AVvXsEioDHiMSRDT0xeh3d8CfaTF0Eh8h-QWyV1qQZhaKZoRTX6pmlZuo3VEKM-2bOns0d9gWr88PKPF9xYEGBJgWaqGYSPxn4RbTWX0LboqmHDsHW_aKj75UaWOqfL5T11VnevfxEKX12Rx82w/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(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/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/AVvXsEhJPIQemrLUQH3OiFjPVRdgsK2OUxfUuch_tlgK7CV2pHEVTjDoMB9TIYNpH5tZtmF1r2_lG-fNbmGHVL9EkoPYGQjEKH4Yn8NTXdZ4eBxpqwR4rs03sWOUL8R__92IXA763W1_5Id0eSY/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh1OrekQMEkIU_v26PAbIpvBJQ_mkqdSG2k13aluJZRrD8YzS9jwzOpNfhnc6Fo7VdgvDANoT025HURMqsQs3cAYFBP4l4cF-tShbpuqF5YdfFPZzqd6clgyB8PwJWzm8o6wBx0VFbyvQ/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'/>

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

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

Resource : http://blog.kangismet.net/2013/11/notifikasi-komentar-ala-google-plus.html

NOTIFIKASI KOMENTAR ALA GOOGLE PLUS

Artikel Terkait info