Tips dan Trik Membuat Notifikasi Komentar Mirip Google Plus

Tips dan Trik Membuat Notifikasi Komentar Mirip Google Plus - DarkMLDC sebelumnya udah membahas Cara Membuat Konten Dikunci Dan Terbuka Jika Di Like, Tweet, Tips dan Trik Membuat Notifikasi Komentar Mirip Google Plus G+ . Sudah pada tahu belum apa itu notifikasi ? . bagi yang belum tau Notifikasi / Notifikasion adalah pemberitahuan Sedangakan komentar ya tetap komentar Jadi notifikasi komentar adalah Pemberitahuan komentar . Dan demonya bisa agan klik gambar lonceng di menu atas blog ini . tapi itu udah ane edit bang jadi gak kaya google plus lagi tampilanya .

Langsung saja buat

• Letakan Jquery dibawah ini diatas kode </head>

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

• Kedua Letakan lagi CSS dibawah tepat diatas kode ]]></b:skin>

/* 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/AVvXsEh3bpHLsapOpgVcPwedPK8s4nWFUkaGfRXcu2Ne23Vt0gBbUzDEPWiUDjSjCfL3qKGt-SgfTZSY2Hm21xTyUvJLEvlrxEtZwm4__INQKOk-9ai8KB2CvqRywZlvq-e5b0N9na3k-X_E7qA/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/AVvXsEhHx02xqzNqLWD9GmV8D2rLbsnWkTidhktVpBr1vB7xoNlc_jQP7WFZszvpeer82rtL1PRkH7VsK4NoglJxXXFsT-cf4KrRgihjA4fR0-WnCt8mSUEEQYsSRVR2QYS15Wy5jlTki4zJheA/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='http://img1.blogblog.com/img/openid16-rounded.gif'] {content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1GG59yAaa7rmHz-ydLMtDnUWn8YL4vA5u0iNUGIy7PIYoMf7aJBvyDKBTI_Qe2EiBhqHnJbwqNYmLesQ2Dk1SUpJzvzQOAyhmpGBfOVU45XwJMAekqFYmwxsg7L2t3Nk3cgGsbY2QQFY/s80-c/gravatar.png);} 

• Ketiga kalian letakan lagi code dibawah ini , tepat diatas code </body>

<div id='cm-container'/><div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7jdsEe2dm2cfxMom5zMeBz4-OYykD8i1KVaAz3e-OzeCABQbuQ_m0E1o2bfHyE9Bk2D1PPTG5k7lWozSxCzfqoWf2a6Z5vIqxvlXPQ8iyyK2C2YP5EFTEjFKO7Vz9cRo4PEc0BaZ3SE8/s1600/lonceng.png'/></div><div id='cm-total'/><div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha3tiiJjyrISdWNNzK3eObyENDMXERQUmoSbCGZmHCpQzjCpzyw7U1qcEEYBQYrbEcRhEFaF1D3575hdGuTyMAFt0NwtbY7eCz7rysRo9mjCwRQs_MM0BCP-cVLQGTkmOnKLzLpfLS4Wc/s1600/delete4.png' title='close'/></div><script>//<![CDATA[var originalTitle = document.title;var cm_config = { home_page: "http://tipdantrik-jitu.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'/>

• Terakhir simpan , dan lihat hasilnya

Sekian posting mengenai Membuat Notifikasi Komentar Mirip Google Plus jika ada pertanyaan silahkan berkomentar .

Resource : http://www.dte.web.id/2012/11/recent-comments-widget-for-blogger-with.html