Cara Membuat Notifikasi Komentar Ala Google Plus




Cara Membuat Notifikasi Komentar Ala Google Plus

Cara Membuat Notifikasi Komentar Ala Google Plus


 Ada sebuah notifikasi komentar google plus yang berbentuk lonceng letaknya di sebelah kanan atas pojok , fungsinya dari notifikasi komentar google plus adalah pemberitahuan tentang kabar terbaru dari teman atau follower google plus anda yang membagikan sesuatu kepada public.

Pemberitahuan Komentar Google Plus, bagi anda yang ingin untuk memasangnya di Blogger , sehingga nanti jika ada salah seseorang pengunjung yang telah selesai berkomentar maka akan terdapat  sebuah notifikasinya di blog. dan ini tentunya sangat bermanfaat sekali bagi anda agar dapat lebih cepat merespon komentar yang diberikan oleh pengunjung terhadap kita.

 Notifikasi Komentar Mirip Google Plus

  1. Silahkan Anda masuk ke dasbhor akun blogger , kemudian pilih menu template yang berada di tab kiri => Edit html
  2. Lalu anda simpan jQuery dibawah ini di atas </head> , karena widget ini tidak bisa tanpa code jqery
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
  3. Dan anda simpan CSS di bawah 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=&#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. Nah agar  CSS diatas work , maka silahkan anda salin 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://mizipedia.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. Yang terakhir silahkan anda klik simpan template dan bisa anda lihat hasilnya
  6. Selesai.
Mudah bukan  Cara Membuat Notifikasi Komentar Google Plus diatas, Jika ada yang ingin di tanya kan, langsung saja berkomentar di bawah ini. komentar anda akan saya balas secepatnya. Selamat mencoba dan sukses.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect