Cara Membuat Notifikasi Komentar Seperti Google+ di Blog

Cara Membuat Notifikasi Komentar Seperti Google+ - Selamat pagi pagi sahabat SMJ-Sharing, setelah sekian lama tidak posting artikel, sekarang akhirnya bisa posting kembali. Pada postingan kali ini saya akan membahas mengenai Cara Membuat Notifikasi Komentar Seperti Google+ di Blog.

Notifikasi Komentar ini sendiri sangat bermanfaat sekali, tidak lain fungsinya adalah untuk melihat para pengunjung yang berkomentar di blog kita dengan mudah, hanya dengan mengklik icon lonceng notif komentar saja tanpa harus kita login ke blogger dan sebagainya. Langsung saja disimak tutorial dibawah ini.

Lihat juga :

Cara Membuat Kotak Iklan di Blog

Cara Membuat Notifikasi Komentar Seperti Google+

Login ke Blogger
Klik menu Tata Letak
Tentukan dimana kalian ingin memasang kotak iklannya
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukan kode ini diatas kode ]]></b:skin>

#cm-total{position:fixed;top:14px;right:0;width:188px;text-align:left;z-index:9999;cursor:pointer}.total-counter{background-color:#d11919;color:#FFF;font-family:Arial,Sans-serif;font-size:11px;border-radius:5px;font-weight:700;padding:1px 4px}#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;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;padding:60px 20px 10px}#cm-container:before{content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_GMClp7h7jAkTkFaHC21riAmC2Q8EzXtd3nP9WE8dbX2EUvDQMkuyRb9q1UAA5eNj3SuACDRb66Rs9JJBXdCNJ6RyUA7tMzUS1Mpst2p1vU-rsi-uJSsWZtcvjx43dCE1MIPGGYGp6AM/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{font-size:11px;text-align:left;font:normal 12px Arial;margin:0 0 5px;padding:0}.cm-outer ul{margin-bottom:5px}.cm-outer li{list-style:none;clear:both;position:relative;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.2);background-color:#FFF;margin-bottom:10px;padding:9px 10px 14px}.cm-text{color:#797979}.cm-header{font-size:11px;font-weight:400!important;margin:4px 0 8px 90px}.cm-header a{color:#262626;text-decoration:none;font-size:14px;font-weight:700}.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/AVvXsEiKCOrJoxlbAjoNADXW1GC7d7ExxZOGH-BU6b_NJDzl1U5I-u8TEiSxeVBU2z8rHQL_NAkI0abDCEsHnNUSwIofGv8JnA1sj9d8F2zoY8gZwEpIih6PsgdavClzj3BVzmjQiGzLh3de_go/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}div.cm-header img[src='http://img1.blogblog.com/img/openid16-rounded.gif']{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQdA8EUW7xNyjiMrlna-3nyOhbGoviqnXgfxKDV-2QOAVlDo7sB7uwGH08yQXytFBr-wAyGT2jGmlKwwXXfs8M807k2_PYa-BoYJS_or7zB4GgS16onGTvNv9hv8I776dJbhc7XaDVfRA/s80-c/gravatar.png)}.cm-header a:hover,.cm-footer a:hover{color:#74a2c3;text-decoration:none}

7. Selanjutnya Letakan kode berikut diatas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

8. Letakan kode berikut di atas kode </body>

<div id=cm-container/><div id=notif title=Notifikasi><img alt=notifikasi src=http://1.bp.blogspot.com/-wrJzEwB1V3U/UoQktvRDCxI/AAAAAAAAGEA/jYcRiXTyOFg/s1600/lonceng.png/></div><div id=cm-total/><div class=close-notif><img alt=close src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4d6aeM7KyjRO6DRiXM394iwmijOUtbpcrTVL_y-HJt9Wa6bDcte5tgDboDN3NEAXr153nCd2iYGvvoypc8PXuZwS_6Q8BoTJ05RJWH0dHLnQKbRCBoVli4y_jYeNHRofnn02ZhMEOH54/s1600/delete4.png title=close/></div><script>//<![CDATA[var originalTitle = document.title;var cm_config ={home_page:http://uzumakiramadan.blogspot.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>;documenttitle:( 0 total 0 ') ' 0 originalTitle});document.getElementById(notif).onclick = function(),;document.getElementById(show-total).onclick = function(){documenttitle:originalTitle}</script>

9. Selanjutnya tinggal klik Simpan

10. Kemudian tinggal lihat blog kita.

Sekian sedikit artikel yang saya bagikan mengenai Cara Membuat Notifikasi Komentar Seperti Google+ di Blog ini. Semoga artikel ini dapat bermanfaat bagi para pembaca. Jangan lupa share dan tinggalkan komentarnya.