Cara Membuat Notifikasi Komentar Blog Mirip Google Plus

Cara Membuat Notifikasi Komentar Blog Mirip Google Plus itu tidaklah sulit, Anda hanya membutuhkan 4 langkah praktis untuk bisa membuktikanya. Notifikasi ini sangat berguna bagi Anda dan sekaligus juga akan memperbesar peluang dapat backling internal serta mendapat komentar lebih banyak.

Karena pada saat pengunjung blog Anda mengomentari salah satu Artikel Anda, maka semua pengunjung akan otomatis mendapat pemberitahuan tersebut layaknya pada jejaring sosial Google Plus, twitter dan facebook. Sehingga dimata pengunjung, Anda sebagai pengelola blog akan terlihat lebih profesional. Selain itu, Notifikasi ini juga sudah saya tambah dengan scrool sehingga memungkinkan untuk menambah jumlah komentar yang ditampilkan dan juga akan mempermudah navigasi pengunjung ketika membaca semua komentar hanya dalam satu kali klik.

Baiklah untuk memulai mempraktekkan tutorial tersebut, silahkan Anda simak dan terapkan langkah-langkah dibawah ini.
Langkah 1: Cari kode </head> dan simpan jQuery ini tepat di atasnya.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
Catatan: Jika Anda sudah menyimpan JQuery pada template, maka lewati saja langkah diatas

Langkah 2: Cari kode <data:post.body/> dan simpan javascript dibawah ini dibawahnya.
&lt;script type=&#39;text/javascript&#39;src=&#39;http://siget.wap.sh/droid.js&#39;&gt;&lt;/script&gt;
Jika kode <data:post.body/> ada 3 buah, maka taruh javascript tersebut dibawah <data:post.body/> yang kedua atau ketiga.

Langkah 3: Simpan CSS dibawah ini di tepat diatas ]]></b:skin> atau </style>
/* Notifikasi Komentar
----------------------------------------------- */
#cm-total {
  position:fixed;
  top:12px;
  right:-85px;
  width:188px;
  text-align:left;
  z-index:9999;
  cursor:pointer;
}
.total-counter {
  background-color:blue;
  color:white;
  padding:1px 4px;
  font-family:Arial,Sans-serif;
  font-size:11px;
  border-radius:5px;
  font-weight:bold;
}
#notif {
  position:fixed;
  top:18px;
  right:100px;
  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:425px;
  position:fixed;
  top:60px;
  right:0px;
  z-index:9999;
  background-color:blue;
  padding:10px 0px 0px 0px;
  color:red;
  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('http://4.bp.blogspot.com/-nsYnxLy9geM/U4XBTSJjzSI/AAAAAAAAAzQ/iO5mAih8Hlk/s1099/LINCIP.gif');
  position:absolute;
  top:-14px;
  left:330px;
}
#cm-container:after {
  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;
height:570px;
overflow:auto;
}
.cm-outer ul{
  margin-bottom:5px;
}
.cm-outer li {
  padding:1px 1px 14px;
  list-style:none;
  clear:both;
  position:relative;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  background-color: orange;
  margin-bottom:1px;
}
.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('http://4.bp.blogspot.com/-G-9yhzSt2Mw/UoWcB4bdn4I/AAAAAAAAGE4/tzIixYewCsU/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 4: Cari tag penutup </body> dan simpan kode dibawah ini tepat diatasnya
<div id='cm-container'/>
<div id='notif' title='Pemberitahuan komentar'><img alt='Pemberitahuan komentar' src='http://1.bp.blogspot.com/-wrJzEwB1V3U/UoQktvRDCxI/AAAAAAAAGEA/jYcRiXTyOFg/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'/>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://www.kangsigit.com",
    max_result: 40,
    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'/>
Sampai langkah 4 Anda sudah berhasil membuat Notifikasi Komentar Ala Google Plus
Silahkan Anda rubah kode-kode berwarna biru sesuai dengan lebar dan tinggi widget template Anda. Ganti juga www.kangsigit.com menjadi alamat domain utama Anda.
Jika masih ada pertanyaan silahkan Anda tanyakan pada kolom komentar.
Dan jika Anda masih penasaran seperti apa tampilan komentar diatas, bisa Anda lihat Demonya Disini.
Setelah Anda mengunjungi Blog tersebut, silahkan Anda klik gambar lonceng.

Tawaran..
Jika Anda berminat mendownload Template DroidPlussNotifikasi Ala Google Plus and Kangsigit, silahkan Download Disini
Jika Anda membutuhkan TOOLS pengecek kode warna seperti #5886a7 silahkan Anda kunjungi situs ini.
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini