Cara Membuat Notifikasi Komentar Ala Google Di Blog


Sobat blogger, sama seperti tutorial-tutorial sebelumnya yang ada di blog ini, tetapi untuk kali ini bukan berasal dari template yang sedang saya pakai ini, melainkan saya dapatkan dari blognya Mbah Dinan (Bengkelblogger) dan script aslinya milik Kang Ismet (Blog Kang Ismet).
Coba sobat perhatikan notifikasi komentar yang ada diblog ini pada bagian atas sebelah kanan navigasi bar, sudah dilihatkan..? nah bagaimana cara memasangnya diblog, gampang sob.. sebenarnya fungsi dari notifikasi komentar ini hanyalah untuk menunjukan jumlah dan siapa saja yang sudah berkomentar diblog kita, dengan syarat masih menggunakan form komentar asli bawaan blogger ya, karena jika sobat menggunkan form komentar seperti disqus, maka percuma saja, karena ga akan berfungsi.
Jika tertarik untuk memasangnya diblog milik sobat inilah beberapa tahapan yang perlu sobat ikuti. Serta untuk demo silahkan sobat clik tombol notifikasi diatas.
Catatan: Backup dulu Templatenya sebelum memulai semua langkah-langkah ini !
Cara Membuat Notifikasi Komentar Ala Google Di Blog
Cara Membuat Notifikasi Komentar Ala Google Di Blog

Cara Membuat Notifikasi Komentar Ala Google Di Blog

Langkah Ke-1: Masuk ke menu Template>>Edit HTML Tambahkan Kode Css berikut sebelum kode </head> ,
 
<style type='text/css'>
#cm-total{position:fixed;top:20px;left:890px;width:950px;text-align:left;z-index:9999;cursor:pointer;max-height:100%}.total-counter{background-color:#ffac1e;color:#fff;padding:1px 4px;font-family:'open sans',arial,sans-serif;font-size:12px;border-radius:5px;font-weight:400}#notif{position:fixed;top:19px;left:870px;z-index:9999;height:22px;width:19px;color:#fff;opacity:.8;cursor:pointer;transition:all 0.5s ease}#notif:hover{opacity:1}.close-notif{display:none}#cm-container{width:345px;height:600px;position:fixed;top:52px;right:0;z-index:9999;color:#000;text-align:left;background:#fff;display:none;transition:width 0.5s;overflow:auto}#cm-container:after{content:none}.cm-outer{margin:0 auto;padding:0;text-align:left;font-size:12px;font-family:'open sans',arial,sans-serif;box-shadow:0 0 3px 1px rgba(0,0,0,0.3)}.cm-outer ul{margin-bottom:5px}.cm-outer li{padding:9px 30px 30px 10px;list-style:none;clear:both;position:relative;background-color:#fff;border-top:1px solid #ddd}.cm-text{color:#333}.cm-outer{margin:0 0 5px}.cm-header{margin:4px 0 8px 0;font-size:12px;font-weight:400!important}.cm-header a{color:#dfa872;text-decoration:none;font-family:'open sans',arial,sans-serif;font-size:12px;font-weight:400;text-transform:uppercase;transition:all 0.5s ease}.cm-header a:hover{color:#efd5bb;text-decoration:none}.cm-outer .cm-content{overflow:hidden}.cm-content{margin-right:90px}.cm-outer img{display:block;float:left;background:#8fa2cb url('http://4.bp.blogspot.com/-G-9yhzSt2Mw/UoWcB4bdn4I/AAAAAAAAGE4/tzIixYewCsU/s80/anon80.png') no-repeat 50% 50%;overflow:hidden;border-radius:100px;position:absolute;top:10px;right:15px;border:4px solid #4b5464;box-shadow:0 0 3px 1px rgba(0,0,0,0.1);transition:all 0.5s ease}.cm-outer img:hover{border:4px solid #626d81}.cm-footer{margin-top:7px}.cm-footer a{color:#8892a5;text-decoration:none}.cm-footer a:hover{color:#ff0000;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)}#cm-scroll{width:100%;height:600px;overflow:auto;position:relative}.apalah-ini{float:none;padding:20px;}.apalah-ini a:first-child{margin:0 0 0 350px;;}.apalah-ini a:last-child{margin-right:0;}.apalah-ini a i{height:28px;width:28px;text-align:center;line-height:28px;background:#333333;color:#fff;border-radius:50%;margin:0 2px;font-size:14px;z-index:999;}.apalah-ini a:hover{text-decoration:none;color:#000;opacity:.7;}
</style> 


Langkah Ke-2:  Tambahkan kode HTML dibawah ini sebelum kode </body>

 <div id='cm-container'></div><div id='notif'><i class='fa fa-comments-o'></i></div><div id='cm-total'></div>
<div class='close-notif'><img alt='close' src='http://2.bp.blogspot.com/-d-5BS0YCkho/UOKe2UIw0rI/AAAAAAAAC4w/md_iYNVHaHk/s20/delete4.png' title='notifikasi'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
home_page: "http://kyleandkelsey.blogspot.com/",
max_result: 50,
t_w: 60,
t_h: 60,
summary: 30,
new_tab_link: false,
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').slideToggle("slow");});$('.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='//cdn.rawgit.com/antoncabon/file/master/notifikasi.js' type='text/javascript'></script>  


Langkah Ke-3: Silahkan ganti url http://kyleandkelsey.blogspot.com dengan url blog sobat.

Langkah Ke-4: Terakhir Simpan Template sobat dan lihat hasilnya.

SELESAI !

Untuk sebagian template perlu dilakukan pengaturan ulang tata letak tombol notif nya, agar lebih rapih supaya tidak mengganggu tombol yang lain.
Silahkan mencoba dan selamat berkarya, terimakasih.
Previous
Next Post »

5 komentar

Click here for komentar
Awan Irawan
admin
14 Agustus 2015 00.54 ×

kepada yang mau mencoba mohon jangan lupa untuk backup dulu sebelum memulai langkah_langkahnya.

izin nyimak mas :)

Reply
avatar
Antonius SP
admin
14 Agustus 2015 00.55 ×

silahkan mas... makasih sudah berkunjung..

Reply
avatar
14 Agustus 2015 01.41 ×

gampang juga ya mas, tapi itu kode nya panjang banget yak?nanti takut lupa kalo mau dicopot laginya.heuheu

Reply
avatar
Antonius SP
admin
14 Agustus 2015 01.45 ×

caranya biar ga lupa kasih kode seperti ni sebelum kode pada html template mas... kan kalo mencarinya gampang :)

Reply
avatar
Antonius SP
admin
14 Agustus 2015 01.46 ×

<!-- Notifikasi Percobaan aja -->

Reply
avatar
Thanks for your comment
close