Notifikasi Komentar Seperti Google Plus

Notifikasi Komentar Seperti Google Plus

Notifikasi Komentar Seperti Google Plus

Friday, January 24, 2014

Notifikasi Komentar Seperti Google Plus

Filled under:
Print Friendly and PDF Translate

Cara Membuat Notifikasi Komentar Seperti Google Plus
nah, untuk membuat Notifikasi Komentar Seperti Google Plus caranya :

STEP 1
copy script jQuery ini dan paste diatas </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript">

*tapi kalo sebelumnya udah ada jQuery di template blog kalian, STEP 1 bisa di skip.

STEP 2
Copy CSS ini dan paste diatas ]]></b:skin> atau </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('http://3.bp.blogspot.com/-wlYmBEpUtGE/UoVyl3GpUZI/AAAAAAAAGEQ/LDeklWh3CNI/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('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);
}

STEP 3
Copy kode ini diatas </body>

<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='http://1.bp.blogspot.com/-wrJzEwB1V3U/UoQktvRDCxI/AAAAAAAAGEA/jYcRiXTyOFg/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='http://2.bp.blogspot.com/-d-5BS0YCkho/UOKe2UIw0rI/AAAAAAAAC4w/md_iYNVHaHk/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
home_page: "http://www.minannu.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'/>

*pada bagian ini home_page: "http://www.minannu.com" , ubah sesuai URL blog kalian.

Kalo udah semuanya, SAVE.  dan lihat hasilnya.. :)

2 comments:

  1. garcinia cambogia extract I do believe all of the ideas you have introduced for your post.
    They’re very convincing and can definitely work. Nonetheless, the posts are very quick for newbies.
    Could you please extend them a little from subsequent time?
    Thank you for the post. garcinia cambogia extract

    my site garcinia cambogia reviews

    ReplyDelete
  2. I have fun with, cause I discovered just what I was looking for.
    You've ended my 4 day lengthy hunt! God Bless
    you man. Have a nice day. Bye

    my weblog: download minecraft

    ReplyDelete

 

Copyright © 2014. "MASTER MUNYIL". Designed by: BigsMaster