www.riofumioru.com-hai, sobat! Sudah lama nih admin yang paling blaem- blaem dan gurih- gurih enyoy tidak posting. OK! Langsung aja! Tutorial yang kita bahas adalah
Cara Membuat Notifikasi Komentar ala Google Plus. Tutorial ini berbeda dari tutorial
recent comment yang biasanya. Ini seperti pemberitahuan
facebook. Mau tau? Liat gambar dibawah ini atau bisa dilihat di menu blog
Rio Fumioru yang diatas. Tinggal di klik langsung nongol deh. :v Anda penasaran? Sama, saya juga. Yuk, di baca caranya.
Preview Notifikasi Komentar ala Google Plus
- Masuk ke Blogger.
- Setelah masuk, lalu klik Template dan Edit HTML
- Langkah pertama adalah copy dan paste kode dibawah ini tepat diatas kode </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 di template blog sobat. Versi berapapun itu.
- Langkah kedua, copy dan paste CSS dibawah ini diatas kode ]]></b:skin>
/* Notifikasi Komentar by www.riofumioru.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS1bxHEkTUb59ajAH9vyMUWT5x9nwgX1TAAr8hermcCc2EoxvJBxmzq73Obfy0rBPEF-SusXuemvIhMe6I7qU1pv-KbfL1hjkRP_JzUyaaGVy_KRI94RQG6ItR2N_N1FAv35LwlFv0YeQ/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/AVvXsEiE02t84HTs5S_5NyEb7gBEZ2mKBuwu9xpOi4qE3qXB-a1MetdYhPwjisykCpoU2KBe7EriT3mJjJWxjkGPjKP0t6Kv3pQaxaPqbKWmXu3iDSRQ0CfZD2jQsy17eI09aTNnNnccLWu5SLk/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/AVvXsEiE_sZFOPGQ8FMkZhvnr8X8PB7Mrn5lO2XWywiYcm8KNWo5PRc1ERRCfRbwE_YzeC83aKwu3XKK6sDEKzNw8_pzQtf818aoXNyuRIORknVC6ExBYCkB_TyB8aQwjyhhOBS53CvVuuwYrOI/s80-c/gravatar.png);
}
- Dan langkah terakhir, letakkan kode ini diatas kode </body>
<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU2IddZdo0dTGAMWkVJLTwOFaqN_Eioqv-LHg0I0nSdgqJQHGiE8fqV8mLRM8YcVB6SviK51DzSXG93t8IB1ufOGM2Wf3di1Staf0vQuLvfC41mdq1583MUuuHgzEu89-ti8Rzdt-JUgM/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdfOtpvGU459mXnPwL-KOlnVqKEIuIufeYLXVbUywH5lo6N9FPXKbDOYLX4Aga-YzRjeux9qYdpwNo-bHNKRa1Trv0t4lTg3wOBbo72Yu18uj3BkroSMR9xXMy21wt6kzahoDq0Dghv70/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
home_page: "http://www.riofumioru.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'/>
- Selesai! Selamat di blog sobat sudah terdapat "Notifikasi Komentar ala Google Plus".
Penjelasan
- Tulisan yang berwarna biru diganti dengan link/ url blog sobat.
- Tulisan yang berwarna hijau diganti dengan jumblah dengan komentar yang ingin sobat tampilkan.
- Sudah jelas? Apabila ada pertanyaan, silahkan tanya di komentar. :)
source:http://blog.kangismet.net/2013/11/notifikasi-komentar-ala-google-plus.html
