بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ اارَّØِيم
Cara Membuat Notifikasi Komentar Di Blogger Seperti Google Plus - Blogger Indonesia. Notifikasi atau pemberitahuan bukannya hanya ada difacebook atau google plus, tetapi ada juga ada di blog sekarang. Kegunaan anda memasang notifikasi komentar di blog sudah pasti karena mempermudah untuk melihat siapa yang berkomentar di blog kita. Contohnya kayak yang ada di blog ini yang berlambang lonceng. Tampilahnnya seperti ini :
Langkah-Langkah Membuat Notifikasi Komentar Di Blogger Seperti Google Plus1. Buka Blog Anda >> Edit Tempalate.2. Cari kode </head>, lalu masukan kode dibawah ini diatas kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
3. Lalu masukan kode dibawah ini diatas ]]></b:skin> atau </style>
#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/AVvXsEjWP-5aT0IbyQs0ol7emacSaI8ItZTHp_R92DKJRTRFPq98P1WlaSdgn-lNF42yhVGQcpKP33YOqNpayiHqzodSIiFpuwCQndwKUDQb3CkHOcqO9Z9EfYuj5nLuLT-bbCE87umRhQ24X1E/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/AVvXsEiKoIK_YPV49mco2QGU78YZgeYlrntivgcogLPugIf82OKm7lVEAdlQ66Joai6jqKFpPqzLJIonFZ3ySgW_h3XH3LZQkkKrO-_Gc4h72-CRAKS26Gk_5L8kZSVY8zd_UZnI2vjKGomL5RI/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);
}
4. Lalu masukan lagi kode dibawah ini tepat diatas kode </body>
<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG5fMNeSZSLcyoqS8KY_VhjNcZx2qxieRFmqQHRLjj25JEfvjjq8qp9iZjr-wtZZj8ZTLaQdruWVEi-SZ-Ohi0uIq-IzIYkG0UswJjOjYm5Bwux06K7-ieXglQLAFj-ZZg8aNlAWzuM54/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI5YjU8kVeYI5QY6B7wzeEuMEjufUsz4PozOj7MRiUl_9ffMOo8GO5Up8c8qW_PtWqHIWw1u0v7lGIW0w8crnmws7453DIWfB9NU0MnOWcSe9Wg16xgpK849M8Dm-_8gfJiBS6kk3jHjo/s1600/delete4.png' title='close'/></div>
<script>
var originalTitle = document.title;
var cm_config = {
home_page: "http://hyperindonesia.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'/>
5. Simpan Template
Note : Ganti Tulisan Warna Hijau Dengan Link Blg Kalian.
Jika ada pertanyaan langsung saja komentar dibawah ini. Sekian dari saya Rifky Umami yang menuliskan artikel tentang Cara Membuat Notifikasi Komentar Di Blogger Seperti Google Plus.
