Cara Terbaru Membuat Notifikasi Komentar Blog Google Plus

Oleh Melinda Chuby

Cara Mudah Membuat Notifikasi Komentar Ala Google Plus Seperti Blognya Kang Ismet di Pojok Kanan Atas – Hallo sobat para pecinta blogger anda ingin membuat Notifikasi Komentar? Bagaimana cara membuat Notifikasi Komentar berbentuk lonceng? Jika sobat ingin membuatnya ikuti penjelasan yang sudah disiapkan dari kemarin-kemarin.
Artikel Terkait :
Cara agar blog cepat terdeteksi google

Cara Terbaru Membuat Notifikasi Komentar Blog Google Plus

4.mshcdn.com/

Apa itu Notifikasi Komentar digunakan untuk memberitahukan kepada pemilik blog atau pengunjung untuk kabar dan informasi terbaru yang ada di blog tersebut, orang pertama yang membuat script seperti ini adalah kang ismet dia terinspirasi untuk membuat Pemberitahuan Komentar Google Plus untuk memasangnya di Blogger dan merancangnya secara apik, jika nanti anda berkomentar di blog maka secara ajaib akan muncul pemberitahuan di gambar lonceng tersebut yang akan memunculkan angka, gimana sobat unik bukan nah untuk demonya bisa lihat gambar di bawah ini.

Tutorial Membuat Notifikasi Komentar Mirip Google Plus

1. Silahkan sobat login ke blog dank e menu dasbord anda

2. Pilih template lihat di sebelah kanan klik edit HTML

3. Simpan jQuery dibawah ini di atas </head> , karena widget ini tidak bisa tanpa jqery

4. 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='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);
}

5. Supaya CSS diatas berfungsi , 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://kupukblog.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'/>

6. Selanjutnya silahkan simpan template anda dan lihat hasilnya

Keterangan :

Nah untuk kode CSS yang ke lima ada tulisan http//kupukblog.blogspot.com silahkan ganti dengan alamat blog sobat

Gimana sobatku mudahkan Langkah -langkah Membuat Notifikasi Komentar Layaknya Google Plus diatas ? semoga anda bisa melakukanya dengan benar dan teliti karena ketelitian adalah penting sekali dalam menerapkan kode CSS ini, jika anda ada masalah silahkan berkomentar dengan baik dan saya akan menjawab sebisa saya.

Baca juga artikel selengkapnya cara mudahmembuat contact form di blogspot