Cara Mudah Membuat Notifikasi Komentar Ala Google Plus

Di pojok kanan atas dasbhor blogger anda , jika anda perhatikan dengan baik , ada sebuah notifikasi komentar google plus yang berbentuk lonceng , sebetulnya tidak hanya pemberitahuan komentar deh , melainkan ada juga pemberitahuan tentang kabar terbaru dari teman atau follower google plus anda yang membagikan sesuatu kepada public.

Hal ini menginspirasi Kang Ismet untuk menerapkan Pemberitahuan Komentar Google Plus untuk memasangnya di Blogger , sehingga nanti jika ada seseorang pengunjung yang telah selesai berkomentar maka terdapat notifikasinya. dan tentunya hal ini sangat bermanfaat bagi kita supaya dapat lebih cepat merespon komentar - komentar yang diberikan oleh pengunjung terhadap kita.

Awalnya widget Notifikasi Komentar Seperti Google plus ini hanya dipakai khusus untuk kang ismet saja , namun setelah ada yang mengclone widget tersebut , akhirnya supaya berkah di share sekalian deh kepada sahabat blogger . Untuk demonya silahkan sobat lihat gambar dibawah ini :

Tutorial Membuat Notifikasi Komentar Mirip Google Plus

1. Seperti biasanya , silahkan sobat masuk ke dasbhor akun blogger , pilih menu template yang berada di tab kiri => Edit html
2. Simpan jQuery dibawah ini di atas </head> , karena widget ini tidak bisa tanpa jqery

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

3. Simpan CSS ini di atas ]]></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('http://3.bp.blogspot.com/-wlYmBEpUtGE/UoVyl3GpUZI/AAAAAAAAGEQ/LDeklWh3CNI/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('http://4.bp.blogspot.com/-G-9yhzSt2Mw/UoWcB4bdn4I/AAAAAAAAGE4/tzIixYewCsU/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(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/s80-c/gravatar.png);
   }

4. Supaya CSS diatas work , silahkan simpan kode ini di atas </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='http://2.bp.blogspot.com/-d-5BS0YCkho/UOKe2UIw0rI/AAAAAAAAC4w/md_iYNVHaHk/s1600/delete4.png' title='close'/></div>
   <script>
   //<![CDATA[
   var originalTitle = document.title;
   var cm_config = {
       home_page: "http://masyadi.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. Terkahir silahkan simpan template dan lihat hasilnya
6. Done .....

Gimana bro Langkah -langkah Membuat Notifikasi Komentar Layaknya  Google Plus diatas ? sangatlah mudah bukan ? jika sobat tertarik dengan widget tersebut dan ingin memasangnya di blog sobat agar terlihat lebih cantik dan profesional silahkan ikuti tutorial diatas dengan baik , Apabila ada yang ingin ditanyakan silahkan komentar dibawah , jika saya bisa menjawab akan saya jawab , jika tidak saya kasih solusinya nanti.

Ditulis oleh Mas Yadi pada tanggal

Tweet