Membuat Notifikasi Komentar Ala Google Plus

Membuat Notifikasi Komentar Ala Google Plus 

Notifikasi Komentar ala Google Plus- Ini saya dapatkan dari guru besar blogger indonesia, siapa lagi jika bukan KANG ISMET ! Notifikasi Komentar ala Google Plus ini juga sudah saya gunakan di blog saya, bisa anda cek dibagian atas ada gambar lonceng, dan begitu di klik sudah berjejer komentar komentar di blog ini :)


Langkah Pertamax
Simpan kode berikut diatas </head>

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

Cara ini dapat anda lewati jika template anda sudah terpasang jquery.

Langkah kedua
Sisipkan kode dibawah ini tepat diatas ]]></b:skin>

/* 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/AVvXsEi6-568UNssasQnfVfjlFcNeCzl1bs3Le9MjEGKnpvcmV4KjgdB4uSkYmrmK2Qn4IoDtcvDD8j4Tl1hUT5sriZ2-z7snpIVLIgrhWiu86PwORZktY-s3j7RFaAEjGM31xxrR_C_wyVh2ow/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/AVvXsEj4Wc5HVV_zNFcLgdoBEFUUqfp_YHyZyOO0TWzlwqJUYcDbi3qDKnpsDFwFISDMjRWUGQQwTDPe3wRWDgeq_ST6mM8J-ES_yG0HFjC39oKfwTwvY7U1Ek9ZffkVbd-f3sBUINLk5dv-3vw/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(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/s80-c/gravatar.png);
}

Langkah Ketigax! Simpan Kode berikut diatas </body>

<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8NFCx5OP6u48S2yMIs2N8p35EDd5NC7oIe2XkyxSig3TkPia4951sbSOw7rBcugKrPY6zjktQzX_Odl_qh3hqmeA06ig8Lu0kzqxtLVlwzOJk1m0JoZdywWnqoiLSJNqfn-TW6csH7mw/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx2LjYD3sdgzkak2llodQo8RPp7z5QaDoJ9VcIhkOM8eA0dQXc6dfDy-yKOdIkXKFzQtWXyVA_QTpUhW2Nph5IXlJR_BB82HMzyF8mtJZgvy2duhosWdj4KGiDn4kkYNt-kGuvzT8tjio/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://newbanie.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'/> 

 Note : Ganti url Homepage nya (http://newbanieblogspot.com) dengan url homepage blog anda

Langkah Keempax Save Template!
Nah mudah sekali bukan Cara Membuat Notifikasi Komentar Ala Google Plus cukup dengan copy paste dan sedikit pengeditan jadi deh.

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

Tweet