Membuat Notitikasi Komentar Blog Seperti Google Plus

Membuat Notitikasi Komentar Blog Seperti Google Plus-Notifikasi komentar diBlog ala google plus memang keren karena anda dapat mengetahui siapa yang berkomentar tanpa harus membuka blogger.com,agar blog terlihat keren sih kata teman saya karena itu teman saya request untuk tutorial pembuatan Notitikasi Komentar Ala Google Plus.

Langsung ke tutorial Membuat Notitikasi Komentar Blog Seperti Google Plus

1. Anda masuk ke dasboard bagian template blog anda
2.Masukkan code JQuery ini diatas </head> , jika sudah ada JQuery pada template anda maka lewat step      ini.

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

3.masukkan CSS ini diatas code ]]></b:skin> atau </style>

/* Notifikasi Komentar ----------------------------------------------- */#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/AVvXsEhXF_bQm60b2EeptKeDzJatHqN_n8zvCU9sEiMfe2nNirUm79q_kk45w46GaF92NqC2aPb318FXY5ZniJ1IXQnFGcwfs5JYJjyZ8V9DndXoADhC2T0KGKBjMK__h_vLpTJLkiVOgwhh0pA/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/AVvXsEjYjylbmyOzG9LfpGJjDYfG8oR_wxkkA-dLr3n1n8DarQO_LNCs0uvjbv4ZIdnz-r0U6SZVJFl6ugNRsQ6LgnCihl3bvhgIhcAz51SkLlcJFMsx6gJ-wpLBf0TcBooHN5Yyla4V1hrEGME/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=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;] { content: url(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/s80-c/gravatar.png);

4.Simpan Code ini diatas </body>

<div id='cm-container'/><div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhptJBe50OrAreAxix-2xxP_0CUXOVPbeDwt9L8VsfJi9_FQtv-FUf27sgSVHkYqVe_GOu3eM3Fu_qtTGC3nz1BeI5xx3OJO6JqY1An1hNrlS0eci3KW5PKBrkoZx10CK6LS63SeBAYC4/s1600/lonceng.png'/></div><div id='cm-total'/><div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghZErsY_mlpjqcWefRY1BlTmPeyyLv07Y5ez-NkBHPmDnMqmV1morOfaXT3RuQuTULzveXKNmX-Uxc5geoFJCYylEVSemPKgZ9hAr-zY8v8OQTT1tTVazrWGFO90PWve-CYwyrmHWVw9I/s1600/delete4.png' title='close'/></div><script>//<![CDATA[var originalTitle = document.title; var cm_config = { home_page: " http://sagga-us.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>'; 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'/>

5.Save template anda dan coba lihat blog anda..

jika anda kesulitan mungkin bisa didiskusikan bersama dibagian komentar artikel ini :) .

Source Code : http://blog.kangismet.net/2013/11/notifikasi-komentar-ala-google-plus.html

Tweet

Subscribe to receive free email updates: