Cara Membuat Notifikasi Komentar Di Blog Ala Google Plus

Cara Membuat Notifikasi Komentar Di Blog Ala Google Plus - Halo sobat, kembali saya update artikel lagi heheh kali ini saya update artikel tentang Tutorial Blog yaitu cara membuat Recent Comment, Namun ini bukan Recent Comment biasa karena Recent Comment yang biasa kalau saya share udah terlalu mainstream ckckckck... :D Recent Comment ini dari Kang Ismet, Recent Comment ini seperti Notifikasi Google Plus yang pojok kanan atas kita itu loh.. atau sobat bisa melihat di blog saya yang berbentu gambar balon chat, Recent Comment ini bukan hanya penambahan gambar saat diklik doank melainkan jika ada Komentar masuk diatas gambar Notifikasi akan menampilkan jumlah komentar terbaru yang masuk seperti layaknya facebook. Singkat waktu langsung saja yuk sob.

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/AVvXsEg_zSIQ6LbuK_si2HMq4WHutwDBaGsH6NcqWIxwJc8TqaXAtBTt27bqrJOnhsMUZam5mgLNv87l8rKTwYA_5cvVeZq_OoauNHpfMploGSJTsSqqhWwftdmqUmHTl1rBkOTzaUQb3Ww2AQM/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/AVvXsEjErWY0UP4ebG-WSXdz4yFd2SIWs6ibGYn3pHJoIIZXiayITC0CkcwmRjcgbo5UsDg7JZMP45VcNafwcL-QSxb06FpS4XmUzNlfeNh48xrWJuHdKzq4KQuZYtG3KzfaadhBR0H5xRFFfyg/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/AVvXsEiyyn7AO6AnSrKev1267uCrYADIOwgS_WjJg5_CfxsWuUVKnHAbJjPEvSJAbigFZuHenP03Likb8SFTrZsemzAx6mRkAR7VcK0xNUjNVXzVsL2NeJQOUh5_eHypmJ-XzWfexkpVHCymQXU/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/AVvXsEjBxMA3QuQSA3psod152i1ioXPktmqj0CI2dvwFHojEg_cM7hzNnfHg8xI_2PCNWItIDsldWECQa_Q4Oe2fPYHRztACjWxyexRT4R7JrWxO12ZAEkSLTvmjKP72xcO1XwEzYzyKRzpYzi8/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_1kqjU4eXuu1_YdXe61nq8tfuijZwYeFAh6PDVUMZVGU6AsjvYf0M_nCcLtgtglk7sl4w54uTJiAC16C5U9gfGJG7oo3mQy2DGndwYrTFej2li3jx5998cxCDWiwUoORgJn56SFFbYhE/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
home_page: "http://www.klikzfajri.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

Title : Cara Membuat Notifikasi Komentar Di Blog Ala Google Plus
Description : Cara Membuat Notifikasi Komentar Di Blog Ala Google Plus - Halo sobat, kembali saya update artikel lagi heheh kali ini saya update artike...

Postingan Populer

Cara Membuat Notifikasi Komentar Di Blog Ala Google Plus

Keterangan