Pada halaman ini akan dibahas mengenai Cara Membuat Notifikasi Komentar Mirip Google Plus di Blog. Semua informasi ini kami rangkum dari berbagai sumber. Semoga memberikan faedah bagi kita semua.
Hai Sahabat blogger kali ini admin akan share bagaimana Cara Membuat Notifikasi Komentar Mirip Google Plus .
Nah kelebihan dari widget ini adalah loading blog lebih ringan di banding dengan Notifikasi Komentar Avatar atau Recent Coment Avatar ,
Disamping kelebihan loading yang ringan kelebihan lain nya adalah tampilan blog menjadi lebih simple dan keren ,
nah langsung saja , simak baik-baik cara nya
pertama anda masuk ke Dasbord Blog => Template => Edit Html
kedua cari cari kode ]]></b:skin> atau kode </style> untuk mempermudah pencarian bisa tekan ctrl+f setelah itu copy kode ]]></b:skin> atau kode </style> .
ketiga copy kode di bawah ini setelah itu paste di atas ]]></b:skin> atau kode </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:25px;
right:126px;
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:300px;
position:fixed;
top:62px;
right:0;
z-index:9999;
background-color:#422929;
padding:60px 20px 10px 20px;
color:#0D8A80;
box-shadow:0 4px 15px -4px rgba(0,0,0,.4) !important;
text-align:left;
border:5px solid #580606;
background-clip:padding-box;
display:none;
}
#cm-container:before {
content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzZnPQ7GxAEuG2GYiZI-6L0xJKEjzzmB-x_HN5byk7PViwSsoWfhCsTnGNzVyV0NdynevatiBlO2Oiy6Oj-ZXSb1TepVkGlsbfF7D9VPZv5KX3XiIBRuZnCG2TPADqRxu1IMIUs_QsqEI/s1600/arrow-notif.png');
position:absolute;
top:-19px;
left:200px;
}
#cm-container:after {
content:"Komentar Terbaru";
position:absolute;
top:22px;
left:150px;
text-align:center;
font:normal 14px Arial;
color:#fff;
}
.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: #422929;
margin-bottom:10px;
}
.cm-text {color:#E61919;}
.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/AVvXsEh0KoMrYfACSqkhsd1Z2i-ctHni76O0bTZ7itFSZKWGeXjwAYTuq_G_QDQcyahRYPUYuNvVXnz6fQoe8a2OBo9DJ3GfwRUfaSOAkFzggg0TDLoZ44lqg3FFFHLvZarBvVaG42EZe4gc57Y/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3SgBYJDVdpQ4J5QfqwvvPmM-tlK6SjCEmSCXfNhGdzgTkDhOMOlrwFDsJob7439kYWY4ommnRmHxpXeci3Xb5WofT630Qn9lAjjmj-_1Is8y9aUn99csD7rcTb2REkwdkIkkj0NHKn-I/s80-c/gravatar.png);
}ke empat cari kode </body> dan paste kode di bawah ini di atas </body>
<div id='cm-container'/>
<div id='notif'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEA1GGyGv77yZp08lya0hphKcZdWanTNzg8p-IOUSCX28p-DtxU4ubnoSpJYl81h4Al4u0YtqKDHfWam2wrQX6rOOPYkNC5_n2R3vWqVxRFVHnVpTstB_q1_-SirNABbbpLS398eKK1f0/s1600/lonceng.png' title='Notifikasi'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpo1GbQKhn5peIHkl3ozzPGGtIkVPZpm05Iv83I7o7UAo0uLRHZ4kHwRL5WcF_4F2fynAzG2EBvWFJDmyt4KNjVtpRJgv0i4BrGUQwFPOYJBGSJeslZVZ2GRWJZUm6gzGDI0BwAGGVJSk/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
home_page: "https://sepilnyepil.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='http://yourjavascript.com/1858374111/aab-notif-koment.js' type='text/javascript'/> NB : gantihttps://sepilnyepil.blogspot.com/ dengan url blog anda
Setelah itu klik simpan dan lihat hasil nya
oke sekian dulu tutorial dari Cara Membuat Notifikasi Komentar Mirip Google Plus .
semoga bermanfaat , kalo ada yag ingin ditanyakan bisa tanya di komentar . .
Tidak ada komentar:
Posting Komentar