Memasang Notifikasi Komentar Google Plus Di Blogger

Memasang Notifikasi Komentar Google Plus di Blogger - Admin akan membagikan bagaimana cara Memasang Notifikasi Komentar Google Plus di Blogger. Cara ini banyak di temukan di google yang pertama kali aku temukan di DTE dan +Kang Ismet .

Dibawah ini screenshoot atau citra ihwal Notifikasi komentar ala google plus

Demo

Untuk cara Pemasangannya

1. Simpan isyarat JQuery dibawah ini sempurna diatas isyarat </head>

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

Lewati langkah di atas bila template anda sudah ada jquery
2. Copy isyarat CSS berikut dan pastekan diatas isyarat ]]></b:skin> atau </style>

/* Komentar Notif */ #show-total { position:fixed; top:1px; /* jarak dari atas */ right:280px; /* kalau ingin kesebelah kiri tukar right menjadi left */ z-index:9999; /*pengaturan always top*/ cursor:pointer; float:right; } .total-show { background-color:#FF0000; /*warna total komentar*/ color:white; padding:2px 6px; font-size:11px; border-radius:4px; font-weight:bold; } #notif {cursor:pointer;} #notif:before { content: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3xeky3lSQUHu6IDGGBO01JsfxOx7OUrKzCbi6Wx3cd-462zPfzv3-Mf_RxRQtqy8Zqj73YLiz1OLN64AsRrvtNnIeWdh8nOjPbrEXrcCxD-S_xantUSmMFpsetAGfQSihmOrr_uxwWLY/s1600/lonceng.png&#39;); display:block; position:fixed; top:12px; right:300px; opacity:.5; z-index:9997; transition:all 0.4s ease-out; } #notif:hover:before { opacity:1; } #notif2 {cursor:pointer;display:none} #notif2:before { content: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3xeky3lSQUHu6IDGGBO01JsfxOx7OUrKzCbi6Wx3cd-462zPfzv3-Mf_RxRQtqy8Zqj73YLiz1OLN64AsRrvtNnIeWdh8nOjPbrEXrcCxD-S_xantUSmMFpsetAGfQSihmOrr_uxwWLY/s1600/lonceng.png&#39;); display:block; position:fixed; top:12px; right:300px; opacity:.5; z-index:9997; transition:all 0.4s ease-out; } #notif2:hover:before { opacity:1; } #cm-wrapper { width:310px; position:fixed; top:50px; right:-381px; z-index:9999; background-color:#222; padding:15px 13px 25px 15px; color:#d35400; font-family: Arial, Sans-serif; border-top:8px solid #d35400; transition:0.5s ease; } #cm-wrapper:before { content:&quot;&quot;; width:0; height:0; position:absolute; top:-24px; right: 303px; border:8px solid transparent; border-color:transparent transparent #d35400; } #cm-scroll { width: 100%; height: 600px; overflow: auto; position: relative; } #comments-container { color:#666; font-family: Arial, Sans-serif; } #comments-container.cm-active { position:fixed; right:0; top:61px; } .scrollgeneric { line-height: 1px; font-size: 1px; position: absolute; top: 0; left: 0; } .vscrollerbase { width: 5px; background-color: #111;border-radius:2px; } .vscrollerbar { width: 5px; background-color: #599b29;border-radius:2px; } .hscrollerbase { height: 10px; background-color: #111;border-radius:2px; } .hscrollerbar { height: 10px; background-color: #444;border-radius:2px; } .scrollerjogbox { width: 10px; height: 10px; top: auto; left: auto; bottom: 0px; right: 0px; background-color: gray; } .cm-outer { margin:0 auto; padding:0; font-size:11px; text-align:left; } .cm-outer pre {background-color:#141414;font-size:11px;color:#7c7c7c} .cm-outer li { padding:7px 10px 12px; list-style:none; clear:both; position:relative; border-top:1px solid #333; border-bottom:1px solid #111; margin-right:10px; } .cm-outer code { color:#a6a658; font-size:11px; } .cm-outer li.selected { border-left:4px solid #fffe8c; } .cm-outer li:first-child { border-top:none; } .cm-outer li:last-child { border-bottom:none; } .cm-text {color:#999;} .cm-outer {margin:0 0 5px} .cm-header {margin: 4px 0 8px 60px;font-size:12px;font-weight:normal !important;} .cm-header a {color:#d35400;text-decoration:none;font-size:12px;font-weight:bold} .cm-header a:hover {color:#e6e6e6;text-decoration:none;} .cm-outer .cm-content {overflow:hidden} .cm-content {margin-left:60px} .cm-outer img { display:block; float:left; background:#8fa2cb url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_uQ09d1mjBtXs1HUKxjBMG-tUkzPXxq-MOkJwam7WKC0dWRv-5VouWqlS2xV9NVjN3S246GKnfiAnfc7ezvrzu9OH8aQYLB1UXT04t_9C7S30rL1EHe4LNwjRpqa0V-jZctHGiKLXzcw/s1600/anon5.png&#39;) no-repeat 50% 50%; overflow:hidden; border-radius:100px; position:absolute; top:10px; left:0; border:3px solid #3d464f; } .cm-footer {margin-top:7px;} .cm-footer a {color:#d35400;text-decoration:none;} .cm-footer a:hover {color:#e6e6e6;text-decoration:none;} div.cm-header img[src=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;] { content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiplXQdL6FpdZTA8YqtgBlcLrkhbz1vT6zcmOLN5c9rYa06k0NWNQVdoVAqsR19qi8_mU5QYR-FPHn_AlA_vGwYcPA6gdqRvpZnySMHjb1LrDuBIp-OtV6fuxRrZNLIz8WmfpydQvCDdOo/s80-c/gravatar.png); } .bg_hitam{ display: none; position: absolute; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: #000; z-index:99; opacity:.30; } .sticky { position:fixed; top:42px;/* jarak dari atas*/ z-index: 100; } .comments .thanks-comment{ position:relative; margin:10px 0; padding-left:40px; font-style:italic; font-size:16px; quotes:&quot;\201C&quot;&quot;\201D&quot;&quot;\2018&quot;&quot;\2019&quot; } .comments .thanks-comment:before{ content:open-quote; position:absolute; top:0; left:0; margin-top:15px;font-size:4em;color:#d80556}

3. Letakkan isyarat berikut di atas isyarat </body>

<div id='notif' title='Notifikasi'/> <div id='notif2' title='Notifikasi'/> <div class='bg_hitam' id='bg'/> <div id='cm-wrapper'> <div class='flexcroll' id='cm-scroll'> <div id='comments-container'/> </div> </div>   <div id='show-total'/> <script type='text/javascript'> //<![CDATA[ var originalTitle = document.title; var cm_config = {     home_page: "http://www.mawanmi.web.id",     max_result: 18,     t_w: 50,     t_h: 50,     summary: 9999,     new_tab_link: false,     ct_id: "comments-container",     new_cm: " Komentar Baru!",     interval: 30000,     alert: true,     alert: function(total) {         document.getElementById("show-total").innerHTML = '<strong class=\'total-show\'>'+total+'</strong>';         document.title = '(' + total + ') ' + originalTitle;     } }; $('#notif').click(function(){$("#cm-wrapper").css({right: "0px"});$("#bg, #notif2").show();$("#notif").hide();});$('#notif2').click(function(){$("#cm-wrapper").css({right: "-381px"});$("#bg, #notif2").hide();$("#notif").show();});$('#bg').click(function(){$("#cm-wrapper").css({right: "-381px"});$("#bg, #notif2").hide();$("#notif").show();});document.getElementById('notif').onclick = function() {document.title = originalTitle;$('#show-total').hide();};document.getElementById('show-total').onclick = function() {document.title = originalTitle;$('#show-total').hide();$("#cm-wrapper").css({right: "0px"});$("#bg").show();};setTimeout(function() {$('.myframe').each(function() {$(this).replaceWith('<iframe class="myframe" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');});}, 5000);$(document).ready(function() { var stickyNavTop = $('#HTML7').offset().top; var stickyNav = function(){var scrollTop = $(window).scrollTop();     if (scrollTop > stickyNavTop) { $('#HTML7').addClass('sticky');} else {$('#HTML7').removeClass('sticky'); }};stickyNav();$(window).scroll(function() {stickyNav();});}); setTimeout(function() {         $('.jsfiddle-demo').each(function() {         $(this).replaceWith('<iframe class="jsfiddle-demo loader" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');     }); }, 5000); //]]> </script> <script src='https://googledrive.com/host/0B8zY82qas755NGNtcURKUXJkYjA' type='text/javascript'/>

yang ditandai warna merah ganti dengan blog anda http://www.mawanmi.web.id