Cara Membuat Recent Komentar Seperti Google Plus

-Cara Membuat Komentar Seperti Google Plus-

Ramai pengunjung yang mencoba mencari tutorial Notifikasi Komentar seperti google plus, karena saya rasa widget ini sangat membantu untuk melihat komentar terbaru. dengan hanya menambahkan kode HTML. baiklah makho akan menjelaskan cara membuat Komentar seperti google plus, simak baik-baik.

Pertama

Sahabat masuk ke blogger masing-masing buka template dan pilih edit HTML.

Kedua

cari kode </head>

Copy Kode di bawah ini pastekan tepat diatas kode </head>

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

Jika sudah terdapat kode yang mirip kode diatas, maka lewati saja langkah ini.

Ketiga

Cari kode ]]></b:skin> atau </style>

Copy kode dibawah ini lalu paste tepat di atas kode tadi ( ]]></b:skin> / </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/AVvXsEjuaHM_8ar34QGEI7qBQWpeot2eu154L-t-bWNCHzygeN2b9gs3aAz5pgTL2-NAyd5OMn5-mLswBv4m7g1JU3kCHUf4eVss8xtQyoFyAhXSOuTndSBEK62H4DK4v_kAcH-0qP40jXEbyCo/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/AVvXsEiZfyPzIXi7mPD4xh1hneyXAA_fzEf6g6dnPqG497tZJxoxM5gm331yPosQ4OXCR6PGfxN8ABAY8HbI3KRvKdJ25_kzQS5ZGBwui2rzvoLaUyd8_ZMYGsGIVnKJi3kVqjNPRVyMceBWkYw/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);
}

Keempat cari kode </body> lalu copy kode dibawah paste diatas kode </body>

<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRsdcHhbaU200W1d58tksihRRKJbfBoLe7dLTNrq_7sUguwxcxorLGfSEm3VMSWy4wCTK34MoFrdloZLfXEA5hPsV-mH5u9s4TFyMqDlq4amH9640-rLUZjcbBTtKNYuGIXY-BHFwVXB8/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR3irzjWWtTSiCe5rhWGvclfbi5fgNk2pg95f0wXiNSga_YUodz_1kV-xkViyEkNSpqS2KU2n82HFVieW_dNHONZZaUHYsOHElhVV7hvc3nHqBEEJDvKiIrDBEOXEdwbiMgfe7WJtDSCA/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://makho-manda.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'/>