Recent Comment Blogger Ala Google Plus

Recent Comments Blogger Ala Google Plus -  Apa kabar sobat Tutorial? Bertemu lagi kita diblog saya yang sederhana ini :) untuk saling bertukar informasi sesama blogger. Pada artikel kali ini saya akan berbagi tips blogger tentang Bagaimana Cara Membuat Recent Comment Blogger ala Google Plus.

Cara Membuat Notifikasi Komentar Di Blog Ala Google Plus - Recent Comment ini seperti Notifikasi Google Plus yang ada dipojok kanan atas kita itu loh.. Pasti anda sudah tidak asing lagi melihat Notifikasi Google+ tersebut. atau sobat bisa melihat di blog ini (Jika masih memasang) yang berbentu gambar balon chat, Recent Comment ini bukan hanya penambahan gambar saat diklik saja melainkan jika ada Komentar masuk diatas gambar Notifikasi akan menampilkan jumlah komentar terbaru yang masuk seperti layaknya Google plus.

Baiklah, mungkin anda sudah tidak sabar ingin mencoba tips kali ini, silahkan ikuti langkah-langkah dibawah ini :

1. Login Ke Blogger
2. Masuk Dashboard lalu klik Template > Edit HTML
3. 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'/> 

Note! Jika sudah ada abaikan saja Jquery Frame work di atas.

4. Kemudian masukkan CSS dibawah ini tepat diatas  ]]></b:skin>

 /* Notifikasi Komentar
http://semua-tutorialku.blogspot.com
------------------- */
#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='
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);
} 

5. Langkah berikutnya masukkan kode dibawah ini tepat 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 type='text/javascrip'>
var originalTitle = document.title;
var cm_config = {
home_page: "<data:blog.homepageUrl/>",
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 = '&lt;strong class=\'total-counter\'&gt;'+total+'&lt;/strong&gt;';
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 : max_result: 6, adalah jumlah komentar yg di munculkan.
6. Kemudian klik 'Save template'

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. Sampai jumpa.

Source: http://blog.kangismet.net/2013/11/notifikasi-komentar-ala-google-plus.html