Cara Membuat Notifikasi Komentar Ala Google Di Blog

S obat blogger, sama seperti tutorial-tutorial sebelumnya yang ada di blog ini, tetapi untuk kali ini bukan berasal dari template yang seda...

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

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4EJP3tjxVlxX8olStKEC8Ji1HeCc2BEk-l65JTdlz02lUsBdRF_7vZ8yq8G6L0RWhIik9xnqoKrxMNTmCUSIZDVUS8Yt37PUX40aQOeC4xvcgKq7O4pBf3QGCN4mqjwmb2KV5qCqQ_Pg/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOJLuNdIiaHLCBxmhmvNEbb_966zXoGKrCNl6fYY0p_NpNva0EZGDuse1_yi8GFN-XMZiEv8DWL_VC6mP0RurIGbp34IYPcUvLpgcwnCzg7wofw_7thkqaII8DRRCCgx6OKOaXelIrr88/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjemlftJSRgr0XF2jHCWmUc6UjkFY_-UWaBEjfCKZCO4myKOgrNjw9OW-RJrJrK40VWTUt1VY6jzIM_jyUY6yeTNvsfjMtGWUBfeWwAHTkHqVIli4ZWI4xtYYoBQ5FZmZtdryZqg_uPA8/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.