Recent Comments Blogger Ala Google Plus

Cara Membuat Notifikasi Komentar Di Blog Ala Google Plus - Halo sobat, kembali saya update artikel lagi heheh kali ini saya update artikel tentang Tutorial Blog yaitu cara membuat Recent Comment, Namun ini bukan Recent Comment biasa karena Recent Comment yang biasa kalau saya share udah terlalu mainstream ckckckck... Recent Comment ini dari Blog Kang Ismet, Recent Comment ini seperti Notifikasi Google Plus yang pojok kanan atas kita itu loh.. atau sobat bisa melihat di blog ini (Jika masih memasang) yang berbentu gambar balon chat, Recent Comment ini bukan hanya penambahan gambar saat diklik saja melainkan jika ada Komentar masuk diatas gambar Notifikasi akan menampilkan jumlah komentar terbaru yang masuk seperti layaknya Google plus.

• Login dahulu Blogger
• Masuk Dashboard lalu klik Template dan klik Edit Html.
• Masukkan Kode dibawah ini tepat diatas </head>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
  Jika sudah ada abaikan saja Jquery Frame work di atas..
• Kemudian masukkan CSS dibawah ini tepat diatas  ]]></b:skin> atau <style type='text/css'>
  

  /* 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/AVvXsEjkVVRJQIwV_77mFEvFo7PVIJxWRHYKk_qAEOWwoT99hfh96zEs_V0zFORcnhSl6DakBJyESzrMsuKzrZcYwLg5AAboJD9ju91BvbqWz2A7kMLwE_PYGtECb-fkyaXjUQcFR44yORNcnME/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/AVvXsEieME8_Jty1YIvTLOq5oetpMFw2dQnjdA19vbtpwqV_cbFXVWWK0tipP_AiKxb56Nn0Vq8LWfeHtlVQP9A9c-CGkpEE2YdlBqj0bGvQJXCGpW2M8Yay9kymcOEyjQBIbNq9DcZswIcgrr0/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/AVvXsEiQCBD_fk8Kt3v7Us-5IYYlKdPyOCoqiDBLMCd0KLmxyVrc1XMZYARcQVtbouEVVPYF-85rqCuzkX5G4TmFE7z2a3lumeUofXXH34jPQIuGIyfud6KmECbsfkxpv3F5c5czQpESUoguqSo/s80-c/gravatar.png);
  }

• Langkah berikutnya masukkan kode dibawah ini tepat diatas </body>
  

  <div id='cm-container'/>
  <div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ_K1_KwXvMHOsVIyZB3Dv6GxUH6QaKdzwFrVji4o9a3m3UQr2W76e0iDqfaQh2WN9v485Bzi2ULSL_X3TwA06EjeOh6MFeUOeXUhNuy33Yefy4xlbOuMs833y1DbQaJk5Yt7nt-rZ0XA/s1600/lonceng.png'/></div>
  <div id='cm-total'/>
  <div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSqAXAStxD7FBe6hHL6-Kwrq_MK1qhkSNBlMc_8dOXqs06yc-8OzRKion80LVVU2_bgapEQVMQFJM2lZZPL69wX7oI4bQ75iUpMXzh-ml5BEigYF1VyPv6tmeG6gBm4Cf4opZENOJP0Hg/s1600/delete4.png' title='close'/></div>
  <script type='text/javascrip'>
  var originalTitle = document.title;
  var cm_config = {
  home_page: "<data:blog.homepageUrl/>",
  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 = '&lt;strong class=\'total-counter\'&gt;'+total+'&lt;/strong&gt;';
  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'/>

  Keterangan : max_result: 6, adalah jumlah komentar yg di munculkan, ganti value (angka 6 lebih banyak/sedikit)
• Kemudian klik 'Save template'

Sekian artikel hari ini yang dapat saya sampaikan semoga artikel yang dapat saya sampaikan bermanfaat bagi sobat semua.
Selamat mencoba Jika ada yang ingin dipertanyakan silahkan berkomentar dibawah artikel ini..

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