Friday 22 November 2013
- Login dahulu Blogger
- Masuk Dashboard lalu klik Template dan klik Edit Html.
- Masukkan Kode dibawah ini tepat diatas
</head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
Lewati langkah ini apabila sudah terdapat jQuery pada template sobat.
- Kemudian masukkan CSS dibawah ini tepat diatas
]]></b:skin>
/* 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/AVvXsEhnJY3PKAMDNWiFpEmtblRnGwaFuwl0AZ-aQN1a0iwSOpFt3gI0EV3oN9szmE-To3UZnzBwlsksjI32fI9Rvk_ULcXPCWOgbBbIW-G2qHxb-kp2uUzgNmwxmARp9mrvtPGgJwinIqvKKro/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/AVvXsEjEDGDD8rBNzYwCQzYAoJIFu8gWrXCsPi_hIPBidFTWJNWbMP2zrB9UL8uu2mnxEI8oU636XxWuLfIkk90pfHZHdHrfzJ8ELU0rqR2akALYJL5wDIaeyTYPeQ2UkO0DxkQxkLu45HLg2p4/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/AVvXsEgq4ZgG1Bsl36m2DezbBQiSeCFbpwVd6RxvjPenvhEyr5X41Cj5KhPf7VJut8h8Yb_7cf_Jj_aTs5HP2Biyh3QO94mH3NgiwVuveGKyl2-OG6c0piXBdZh6Q3Y95nnU3-zuVd623dincFg/s80-c/gravatar.png);
}
- Langkah berikutnya masukkan kode dibawah ini tepat diatas
</body>
<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicROsoybiCjNJVfxyQxvqemYbOP9vEjyKtS23iEnreCxCe66GiLmNcNZWDlQURDo2H_CrfaUArCQU-zFA3PvT2OeVdVgkzZ40AprKXz9-3oX1EkIhABuhCJTuhXKh9RShxBbYHGNzKNrQ/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiBvcg_hbTm6PlFx8paZUhqMhzhl4IUIGNM82Yqf2HvwLyHKMtM4XSSBwRwrdPdpGKljt-LkzDeK9zFRcE4lv3sqHr_oS_YDl-Od_TB5q4B9EVCW15hyZE0t6vQ4RLr7SegNBbgEy7hdc/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
home_page: "http://www.g-bloog.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'/>
Keterangan
Tulisan yang saya beri warna silahkan sobat atur sendiri. Ganti Url Blog yang berwarna merah dengan Url Blog sobat, untuk max_result:6, adalah jumlah komentar yang akan ditampilkan.
- Kemudian klik simpan, Selesai.
Sekian artikel hari ini yang dapat saya sampaikan semoga artikel yang dapat saya sampaikan bermanfaat bagi sobat semua. Selamat mencoba ^_^ Jika ada yang ingin dipertanyakan silahkan berkomentar dibawah artikel ini :)
Sumber Script:http://blog.kangismet.net/2013/11/notifikasi-komentar-ala-google-plus.html
14 comments
Keren (Y)
Oke dah gan tutornya, gmn cara mindah2in lokasinya?
#cm-total {
position:fixed;
top:14px;
hapus position:fixed kmudian htmlnya trserah mau letakkin dimna
ea..
Mantap Vrooh ,, Gw Coba Ya :D
Nice postnya , http://testerandega.blogspot.com/
Manteb gan, sip sip sip,
Biar tandanya gak pindah gimana?
pas kita scroll ke bawah dia juga ikut soalnya
tinggal hapus position:fixed trus htmlnya pindahin ke tpt yg diinginkan, lalu atur marginnya biar sesuai dengan letak yg diinginkan.
Bagus banget trik nya..
thanks ini yg saya cari, kunjungi balik blog saya biar gak GoBlog :D
http://dhaimaru.blogspot.com/
keren bermanfaat gan..
koen balik ya.. http://www.kasgame.blogspot.com/
wah kenapa tidak tampil ya gan komentarnya? padahal ada 1 komentar yang saya coba buat
perintah ganti url blog udh diganti???
Gunakanlah bahasa yang sopan
Tidak mengandung SARA (Agama, Suku, Dll)
Tidak menyertakan link aktif.
Jika melanggar syarat diatas komentar akan saya anggap SPAM
Konvert KodeMember AktifJoin This Blog