Cara Membuat Comment Notification Ala Google Plus

Prikinymous - Halo sobat, Selamat Hari Raya Idul Adha untuk semua umat muslim. Di hari ini tampilan Prikinymous sudah ganti, bagaimana menurut sobat semua ?. Oke untuk kali ini saya curhatnya cuma sedikit saja, kehabisan materi. Setelah kemarin saya share Cara Memasang Banner Iklan SWF di Blog, sekarang saya post kembali dengan Blog. Penasaran ? langsung di intip saja ya !

Cara Membuat


  1. Copy code jQuery berikut di atas </head>

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

 2. Kemudian simpan code CSS berikut 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/AVvXsEiMqTjLyK7e-fLhl2e2_nJ-26HxEPjy8gu8aS1RGXDbwXhidXzvyJH-Tl6VsCoV9BNrgZSUdpfD5_EG_FTj_th2sorqZLcSZlT5qY5DnfXYzSFB1nAW2fyKG3Ep8p002J1mmjtNFz336Zc/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/AVvXsEiZQPOAMTDlZ9fXLjcWN2MsB7NK_WLe6ZsldgGUV8OFFUUpq9kRzArFkECsreFc_4srvpkMoTiwp_QFO02g5JjT258e7B284coAnY0SAqzuYUOG0a-C3B-VZNbPt3O_DiPF0yFcwaujV2E/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/AVvXsEijuiESD-duIzXBLium1rkqo8l1SXw8dgkQmLK7VlJdH8RR3ypxO9nrMkzRP9rx09qJynDjeis46k3pbog334JmYEiOeV03bb0hdBGYMACTlojXGqBgpEIhTQ4iomphYgNeiVztZs9_nZo/s80-c/gravatar.png);
}

  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/AVvXsEh09u7yOS7FnLBBdDOI9QeHOKvAdU3sbNK8X8JDNw3fqo-Bs45PTSUOCTquMNuXf_6x5VNSFXLqM1e0AypKQOFKdT7XYZDh3Zgk-DSdmB1ldNysMz14YVb63O2SYLNyErJcc6TM3iv0kP0/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFl9dIVi1h5SfJwLcolXd1AGA6736vLJDoR49HiBNkQYKBjBocnmx28TfVjhAKc1_StpIQ0sAp7OZAc_4cZBQKenVXH8xGTCrgqPmkfr6Q8jgmD8LzYPDVA8svWQAtHlhscwP1BdhN8tU/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://prikinymous.blogspot.com",
    max_result: 6,
    t_w: 80,
    t_h: 80,
    summary: 40,
    new_tab_link: true,
    ct_id: "cm-container",
    new_cm: " Comment Notification !",
    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'/>

  4. Silahkan ganti code yang berwarna biru dengan URL Blog sobat, selesai !

Cukup sampai sini dulu Notifikasi Komentar sudah bisa terpasang. Untuk mengubah posisi Notifikasinya bisa kunjungi Artikel ini. Semoga Bermanfaat !

Sumber.

Tweet