Notifikasi Komentar ala Google Plus |
Tutorial Instalasi
Biasakan Login Blogger.Pergi ke Template > HTML.
Copy + Paste kode JQuery berikut, diatas </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
Jika sudah mempunyai JQuery di blog ente, lewatin langkah diatas.
Selanjutnya, simpan kode CSS berikut, diatas kode ></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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj60KN13VLLBnLi2UcMhBAetjFO68w3CTEE-Lj_HFBl0IcjZKCVNXslD5F4lkFsEs94fLBTYCfCbXyt1E0JDmviV_jZcX6ZQt3nUHSvDmoUjlmGab7B4p-29SgPhZmZy_mWuTtzz716R1M/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/AVvXsEg-763N9TBAn94b6Gsk5r-WLweZscOwRR8eZPodKFZG3unI3DfGanJm7YRRYyZbeV1oL0olTvBaJAbR6IZcKdqSti2X2nsUC7VVnDP4u2BwOi4ovARc1y0AP666sdthXQUNdMg-TBghLxs/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(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/s80-c/gravatar.png);
}
Simpan kode berikut, diatas kode </body><div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6p3JOqQZ-65wk980xhvBO-QFUREDYuj_hP7gXN2pEs2QQle2xoESbLO5soSvvXv1kjdfZS0s-KuLZYJ6EjI_wbYiI3iXj_hkYMacZt-kyOv_8t1XBGHxmq2CnLzdGvntEwJSYWBJuddM/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXZOxwYUq8BviiKFplbDrO13uBMVc-fYJRSemAl7rp373dAaiZ2niZDJlHYAWMbuKsOSRK0AAFj91GZOSSWOeVQ-sX4_w5HbNvuq1QOzInewybTe5GCNUY-mSoM2vcVm-U8kHgVOxRxzA/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
home_page: "http://hentongsekai.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'/>
Untuk memindahkan posisi CSS, silahkan pelajari di artikel berikut > CSS Position dan Value <Berikut ini Demo :
Judul | Notifikasi Komentar Ala Google+ Plus Keren |
Deskripsi | Notifikasi Komentar ala Google Plus Jumpa lagi bro, ini ane mau posting 'Cara Membuat Notifikasi Komentar ala Google Plus', ini ... |
Author | Unknown |
Author Rating |
4/5 Suara Dari 777 Ulasan
|
Post a Comment Blogger Facebook Disqus
Pergunakan fasilitas yang dapat membantu anda pada halaman blog ini.
1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktif tidak akan berfungsi.
5. Diijinkan menyebarluaskan artikel, Harus disertakan Sumbernya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Contact Us "
7. Bergabung dengan kami untuk menjadi member Klik "Join to Blog "
8. Bila komentar anda mengandung code HTML silahkan anda konversikan terlebih dulu
silahkan klik " Konversi Kode "