Archive Pages Design$type=blogging

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

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.

COMMENTS

BLOGGER: 5
Loading...
Nama

Animasi Blogger Button Css Javascript jQuery Sider Sosial Media Syntax Highlighter Template Tips Tutorial Windows 10
false
ltr
item
Simple Tutorial: Cara Membuat Notifikasi Komentar Ala Google Di Blog
Cara Membuat Notifikasi Komentar Ala Google Di Blog
http://1.bp.blogspot.com/-pxi9EArgKVM/Vc2aUhb7NEI/AAAAAAAAAbc/MRIGS0A0Q4I/s640/chat-comment.jpg
http://1.bp.blogspot.com/-pxi9EArgKVM/Vc2aUhb7NEI/AAAAAAAAAbc/MRIGS0A0Q4I/s72-c/chat-comment.jpg
Simple Tutorial
http://mirandahardy.blogspot.com/2015/08/cara-membuat-notifikasi-komentar-ala.html
http://mirandahardy.blogspot.com/
http://mirandahardy.blogspot.com/
http://mirandahardy.blogspot.com/2015/08/cara-membuat-notifikasi-komentar-ala.html
true
4419251694985783704
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago