» » » » Komentar Terbaru Dengan Sistim Notifikasi
, , Edit

Komentar Terbaru Dengan Sistim Notifikasi

Recent Comments

Widget ini adalah widget yang pertama kali saya temukan di blog DTE, kelebihan widget ini, dapat memunculkan pemberitahuan saat ada komentar baru masuk, seperti layaknya google plus atau juga facebook.
Kali ini aku akan berbagi widget ini dengan tampilan yang sudah dimodifikasi,

Langkah Pemasangannya Pada Blogspot

1. Copy kode dibawah ini dan letakkan diatas kode ]]></b:skin> atau </style> 

#show-total {
  position:fixed;
  top:8px;
  right:288px; /*Atur Posisi Counter -jumlah- Komen*/
  z-index:999;
  cursor:pointer;
  float:right;/*posisi counter Right or Left*/
}
  .total-show {
    background-color:#f1c40f;color:white;padding:2px 6px;font-size:11px;border-radius:4px;font-weight:bold;
  }
#notif {cursor:pointer;}
#notif:before {
/*Gambar lonceng pertama*/
  content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLyDUMUM9y2VsqFhWEbdh6RnT84EWBnZj1Keb5L4nv9Vb8-N5cZIPlFSnyTpessZxiqI7WUKS-1ME-G3sIBTZWQ6VYjL-Zx0XRpxeVjpDQbXmBjIKVJXTn1Y7jE-Drcl37VQvDLLdlNNw/s1600/lonceng2.png');
  border:1px solid #b6b5b5;
  padding:5px 6px 0 6px;
  border-radius:3px;
  display:block;
  position:fixed;
  top:15px;
  right:298px;
  opacity:.5;
  z-index:999;
  transition:all 0.4s ease-out;
}
  #notif:hover:before {
  opacity:1;
}
  #notif2 {cursor:pointer;display:none}
#notif2:before {
/*Gambar lonceng kedua ketika active or di klik */
  content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLyDUMUM9y2VsqFhWEbdh6RnT84EWBnZj1Keb5L4nv9Vb8-N5cZIPlFSnyTpessZxiqI7WUKS-1ME-G3sIBTZWQ6VYjL-Zx0XRpxeVjpDQbXmBjIKVJXTn1Y7jE-Drcl37VQvDLLdlNNw/s1600/lonceng2.png');
  border:1px solid #b6b5b5;/*garis bawah pada komentar*/
  padding:5px 6px 0 6px;
  border-radius:3px;
  display:block;
  position:fixed;
  top:15px;
  right:298px;/*atur posisi lonceng (harap atur posisi lonceng pertama juga jika ingin merubah ini dan sblik nya) ubah left untuk di kiri*/
  opacity:.5;
  z-index:9997;
  transition:all 0.4s ease-out;
}
  #notif2:hover:before {
  opacity:1;
}
#cm-wrapper {
  width:300px;
  position:fixed;
  top:61px;
  right:-381px;
  z-index:999;
  background-color:#192028;
  padding:15px 13px 25px 15px;
  color:#666;
  font-family: Arial, Sans-serif;
  border-top:8px solid #ff6c60;
  transition:0.5s ease;
}
#cm-wrapper:before {
/*posisi segitia di atas notifikasi*/
content:"";
width:0;
height:0;
position:absolute;
top:-24px;
left:6px;/*ubah right untuk di sebelah kanan*/
border:8px solid transparent;
border-color:transparent transparent #ff6c60;
}
#cm-scroll {
width: 100%;
height: 560px;
overflow: auto;
position: relative;
}

#comments-container {
  color:#666;
  font-family: Arial, Sans-serif;
}

#comments-container.cm-active {
position:fixed;
right:0;
top:61px;
}
.cm-outer {
  margin:0 auto;
  padding:0;
  font-size:11px;
  text-align:left;
}
  .cm-outer pre {background-color:#141414;font-size:11px;color:#7c7c7c}
.cm-outer li {
  padding:7px 10px 12px;
  list-style:none;
  clear:both;
  position:relative;
  border-top:1px solid #28313b;
  border-bottom:1px solid #111;
  margin-right:10px;
}
.cm-outer code {
 color:#a6a658;
    font-size:11px;
}

  .cm-outer li.selected {
    border-left:4px solid #fffe8c;
}
  .cm-outer li:first-child {
  border-top:none;
}
  .cm-outer li:last-child {
  border-bottom:none;
}
.cm-text {color:#999;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 0 8px 50px;font-size:12px;font-weight:normal !important;}
.cm-header a {color:#168980;text-decoration:none;font-size:12px;font-weight:bold}
.cm-header a:hover {color:#e6e6e6;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-left:50px}
.cm-outer img {
  display:block;
  float:left;
  background:#8fa2cb url('http://img1.blogblog.com/img/anon36.png') no-repeat 50% 50%;
  overflow:hidden;
  border-radius:100px;
  position:absolute;
  top:10px;
  left:0;
  border:3px solid #3d464f;
}
.cm-footer {margin-top:7px;}
.cm-footer a {color:#168980;text-decoration:none;}
.cm-footer a:hover {color:#e6e6e6;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/AVvXsEh-MMZ44i994bGVUR6bZN2l5yAKC5HBh2e7ILCp4FjkuS02N5g2DXypAIHMBR3xwdhfc8QlhwAd7ut1RAciPt_KoSWuFAUgKHkA9vvsZsF6FHBUU-AuzqLec0XlhVUIttflAbRWXY7B-fM/s80-c/gravatar.png);
}

.bg_hitam{
        display: none;
        position: absolute;
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: #000;
        z-index:99;
        opacity:.30;
}
img.cm-smiley  {
  float:none;
  position:relative;
  display:inline-block;
  width:12px !important;
  height:12px !important;
  top:2px;
  border:none;
  border-radius:2px;
  background:none;


2. Cari kode </body> dan letakkan kode berikut diatasnya


a<div id='notif' title='Notifikasi'/>
<div id='notif2' title='Notifikasi'/>
<div class='bg_hitam' id='bg'/>
<div id='cm-wrapper'>
<div class='flexcroll' id='cm-scroll'>
<div id='comments-container'/>
</div>
</div>
<div id='show-total'/>
<script type="text/javascript">
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://ngudang.blogspot.com",
    max_result: 18,
    t_w: 50,
    t_h: 50,
    summary: 9999,
    new_tab_link: false,
    ct_id: "comments-container",
    new_cm: " Komentar Baru!",
    interval: 30000,
    alert: true,
    alert: function (total) {
        document.getElementById("show-total").innerHTML = '<strong class=\'total-show\'>' + total + '</strong>';
        document.title = '(' + total + ') ' + originalTitle;
    }
};
$('#notif').click(function () {
    $("#cm-wrapper").slideDown('fast');
    $("#bg, #notif2").show();
    $("#notif").hide();
});
$('#notif2').click(function () {
    $("#cm-wrapper").slideUp('fast');
    $("#bg, #notif2").hide();
    $("#notif").show();
});
$('#bg').click(function () {
    $("#cm-wrapper").slideUp('fast');
    $("#bg, #notif2").hide();
    $("#notif").show();
});
document.getElementById('notif').onclick = function () {
    document.title = originalTitle;
    $('#show-total').hide();
};
document.getElementById('show-total').onclick = function () {
    document.title = originalTitle;
    $('#show-total').hide();
    $("#cm-wrapper").slideDown('fast');
    $("#bg").show();
};


eval(function (p, a, c, k, e, r) {
    e = function (c) {
        return (c < a ? '' : e(parseInt(c / a))) + ((c = c % a) > 35 ? String.fromCharCode(c + 29) : c.toString(36))
    };
    if (!''.replace(/^/, String)) {
        while (c--) r[e(c)] = k[c] || e(c);
        k = [function (e) {
            return r[e]
        }];
        e = function () {
            return '\\w+'
        };
        c = 1
    };
    while (c--) if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]);
    return p
}('5 F={19:"E://16.2W.2Q",1e:15,1l:Y,1W:Y,1i:2v,1R:T,1M:"1f-2F",11:" 2N 2O!",1x:2U,V:1v,},W={18:I(g,f,j){5 i,h;C(j){i=3e 3f();i.3h(i.3m()+(j*24*1E*1E*3r));h="; 3u="+i.3w()}1r{h=""}l.22=g+"="+f+h+"; 3x=/"},1n:I(f){5 e=f+"=",h=l.22.1d(";"),j;12(5 g=0;g<h.B;g++){j=h[g];3t(j.3s(0)==" "){j=j.13(1,j.B)}C(j.3q(e)==0){17 j.13(e.B,j.B)}}17 3p},3o:I(b){1C.18(b,"",-1)}},G=(W.1n("G"))?W.1n("G"):0,3n=l.8;12(5 i O F){F[i]=(3k(y[i])=="3g")?F[i]:y[i]}I 1g(N){5 6=N.S.6,w=34(N.S.2Z$2V.$t,10),n="",A=G,4=F;5 2P=w-A>Y?\'Y+\':w-A;C(A<w){C(y.V===1v){V((w-A)+y.11)}1r{C(y.V===T){l.8="("+(w-A)+y.11+") "+l.8}1r{y.V((w-A),y.11)}}}n=\'<1z v="m-2M">\';12(5 i=0;i<6.B;i++){12(5 j=0;j<6[i].o.B;j++){C(6[i].o[j].H=="2E"){o=6[i].o[j].x;2C}}5 1H=o.1I("/")+1,1J=o.1I("."),8=o.1d("-").2x(" ").13(1H,1J)+"&1L;";z=6[i].z[0],Z=z.Z.$t,1O=z.1P$2w.K.k(/\\/s[0-9]+(\\-c|\\/)/,"/s"+4.1l+"$1").k(/E\\:\\/\\/1k.2s.L\\/2r\\?1Y\\=2q(.*?)q\\=/i,"").k(/\\.(2l|2k|2g|2f|1p)(.*?)$/i,".$1"),1q=(z.26)?z.26.$t:"#2R",u=6[i].X.$t.k(/^.*?16\\-([0-9]+).*?29\\-([0-9]+)/,"E://1k.2a.L/2e-2c.g?2b=$1&27=$2"),r=6[i]["2h$O-2i-2j"].1Y.1d("1o/")[1],d=6[i].X.$t.k(/^.*?16\\-([0-9]+).*?29\\-([0-9]+)/,"E://1k.2a.L/2c-2m.g?2b=$1&27="+r+"&2n=$2"),20=6[i].1P$2o[1].2p,p=("p"O 6[i])?6[i].p.$t.k(/<i H="1m">(.*?)<\\/i>/U,"<1m>$1</1m>").k(/<i H="1j">(.*?)<\\/i>/U,"<1j>$1</1j>").k(/<i H="2t">(.*?)<\\/i>/U,"<a v=\'2u\' x=\'$1\'>\\{o\\}</a>").k(/:D/U,"<1h K=\'E://3.1Q.1K.L/-2y/2z/2A/2B/1G/2D.1p\' P=\'\' v=\'m-1D\'/>").k(/:\\)/U,"<1h K=\'E://1.1Q.1K.L/-2G-Q/2H/2I/2J/1G/2K.1p\' P=\'2L\' v=\'m-1D\'/>"):"",1c=(4.1R)?\' 1B="1A"\':"";p=(p.B>4.1i)?p.13(0,4.1i)+"&1L;":p;n+="<1y>";n+=\'<M v="m-2d"><a x="\'+1q+\'" 8="\'+Z+\'"\'+1c+\'><1h P="2S..." 2T="1w:\'+4.1l+"1u;1s:"+4.1W+\'1u;" K="\'+1O+\'"></a><J v="z"><a x="\'+1q+\'" H="2X">\'+Z+\'</a> 2Y <a x="\'+o+\'" 8="\'+8+\'"\'+1c+" H=>"+8+"</a></M></J>";n+=\'<M v="m-p">\';n+=\'<J v="m-1a">\'+p+"</J>";n+=\'<M v="m-30">\'+20+\' <a x="\'+d+\'" 31="32.33(1C.x,&#39;35&#39;,&#39;36=1,1w=37,1s=38,3a=3b,3c=3d&#39;);17 T;" 8="1Z 1X">1Z</a> <a x="\'+u+\'"  8="1V 1X" 1B="1A">1V</a></J> </J>\';n+="</M></1y>"}n+="</1z>";l.1U(4.1M).3i=n;W.18("G",w,3j);G=w}(I(){5 14=l.3l("14")[0],7=l.1N("7"),4=F;7.1F="1a/1t";7.X="m-S-7";7.K=4.19+"/28/1f/1o?P=N-O-7&23=T&21-1T="+4.1e+"&1S=1g";14.25(7);3v(I(){5 R=l.1N("7");R.1F="1a/1t";R.X="m-S-7";R.K=4.19+"/28/1f/1o?P=N-O-7&23=T&21-1T="+4.1e+"&1S=1g";5 1b=l.1U("m-S-7");1b.3y.3z(1b);14.25(R)},4.1x)})();', 62, 222, '||||co|var|entry|script|title||||||||||||replace|document|cm|skeleton|link|content||||||class|total|href|cm_config|author|oldCount|length|if||http|cm_config_defaults|tt_cm|rel|function|span|src|com|div|json|in|alt||newScript|feed|false|ig|alert|_cookie|id|50|name||new_cm|for|substring|head||blog|return|set|home_page|text|oldScript|nt|split|max_result|comments|showRecentComments|img|summary|code|www|t_w|pre|get|default|gif|profile|else|height|javascript|px|true|width|interval|li|ul|_blank|target|this|smiley|60|type|s1600|dash|lastIndexOf|dot|blogspot|hellip|ct_id|createElement|avatar|gd|bp|new_tab_link|callback|results|getElementById|Hapus|t_h|komentar|source|Balas|date|max|cookie|redirect||appendChild|uri|postID|feeds|post|blogger|blogID|comment|header|delete|bmp|png|thr|reply|to|jpeg|jpg|iframe|parentID|extendedProperty|value|imglanding|url|google|linku|allow|9999|image|join|WeTjMT8JDhg|UKhVHlZ88II|AAAAAAAADPI|b1gpiAvIkCc|break|icon_smile|alternate|container|2Z7Cwe04x|UH9THzWWJII|AAAAAAAACtA|ChwawyzYsDI|smile1|smile|outer|Komentar|Baru|totalComments|net|nope|Loading|style|30000|totalResults|kangismet|nofollow|pada|openSearch|footer|onclick|window|open|parseInt|_cf|scrollbars|470|250||left|355|top|135|new|Date|undefined|setTime|innerHTML|7000|typeof|getElementsByTagName|getTime|doc_title|del|null|indexOf|1000|charAt|while|expires|setInterval|toGMTString|path|parentNode|removeChild'.split('|'), 0, {}))
//]]>
</script>

3. Silahkan ganti url yang saya mark dengan url blog kamu
4. Simpan Template

5 Responses to "Komentar Terbaru Dengan Sistim Notifikasi"

  1. Anonymous17 May, 2014 23:01

    ^_^

    ReplyDelete
  2. Marda Ridhovin08 June, 2014 13:10

    wah makin canggih aja nih, berarti makin menarik ya komentarnya dengan ada pemberitahuan langsung disetiap ada komentar baru di blog

    ReplyDelete
  3. Unknown28 December, 2014 12:04

    ka tampilan notifikasi saya bermasalah...saya minta tolong lihat ka..
    http://samsulbahriblog.blogspot.com/

    ReplyDelete
    Replies
    1. Rifan hidayat29 December, 2014 09:21

      bermasalahnya kenapa ?

      itu aku buka baik baik saja kok

      Delete
    2. Rifan hidayat29 December, 2014 09:28

      mungkin css recent commentnya terbungkus oleh tag kondisional, soalnya aku lihat pada homepage nya baik baik saja, tapi pada halaman item tampilannya jadi berantakan

      Delete

Subscribe to: Post Comments (Atom)