Cara Gampang Menciptakan Notifikasi Komentar Ala Google Plus

Di pojok kanan atas dasbhor blogger anda , kalau anda perhatikan dengan baik , ada sebuah notifikasi komentar google plus yang berbentuk lonceng , sesungguhnya tidak hanya pemberitahuan komentar deh , melainkan ada juga pemberitahuan wacana 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 kalau ada seseorang pengunjung yang telah selesai berkomentar maka terdapat notifikasinya. dan tentunya hal ini sangat bermanfaat bagi kita supaya sanggup lebih cepat merespon komentar - komentar yang diberikan oleh pengunjung terhadap kita.

Awalnya widget Notifikasi Komentar Seperti Google plus ini hanya digunakan khusus untuk kang ismet saja , namun sesudah ada yang mengclone widget tersebut , kesannya supaya berkah di share sekalian deh kepada teman 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 sajian template yang berada di tab kiri => Edit html
2. Simpan jQuery dibawah ini di atas </head> , alasannya widget ini tidak sanggup 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSYpPCGaUELR0JxOcfGGjoPi02Eisd3QR-uY3li7Jc-C1itjz-OIUVFOq2THgN6dj-Jql4Add9YC_e2KjIYySVnP5YOlqPcdN1g0oA9V7McbegKOfEFsXs8_h196rDYv1UjK0kXA6gkV0/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/AVvXsEixlvofuBidS-_3W6XxGdYUh7cuOOHfWl1aI2H7EDvmw7FO0rHQWnm9s5-hJllZeTj4pP5zCBKw4DhOOGiF7e9z8Cd6DJW0LbLMr_W09CjKzSqzetZyzsK_1z95GPY8Rf8zN_TezP6bkyM/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/AVvXsEjwW2ZqTMZAWbvNsqIWYDJLF8YkR7bpokAr_fzFShGQMasqq02dl6R45qpbG9e6oairJNwaQCv3N0HEJusVJYvPdzg31XJu5MtG41WNaXQOumeVgAiVvzUYNAFm6FeF5oVY-dMShyWFDpw/s80-c/gravatar.png); }

4. Supaya CSS diatas work , silahkan simpan arahan ini di atas </body>

   <div id='cm-container'/> <div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN5sd4LVsYy4vZB92nNMQ2lv5cc1KFcRoq0iq81S68RSTvgXlhOPvH8-lCMaVEDxMANqOU-U9N9t6opB0_A32xYdgP3FZ_Ig1UGcwUj8s5csZc9M1J3N3hc2z9QEScGfRyUpTKkoP07PA/s1600/lonceng.png'/></div> <div id='cm-total'/> <div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_LLBLbUoFS-A2Tq2jS19d9LegNefiOcOqp0Pv2_OvkZ5516bWxu1SgwzRud1fLNueyXadHpBsG00D6YK01bfC_nwBsmox6tKB_lWA6mQe5SkdKFICSeuUyBuv-IfqSERRIZZLTZ2gO-Q/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 gampang bukan ? kalau sobat tertarik dengan widget tersebut dan ingin memasangnya di blog sobat biar terlihat lebih manis dan profesional silahkan ikuti tutorial diatas dengan baik , Apabila ada yang ingin ditanyakan silahkan komentar dibawah , kalau saya sanggup menjawab akan saya jawab , kalau tidak saya kasih solusinya nanti.

Bagikan Artikel ini