Membuat Notifikasi Komentar Ala Google Plus

Cara Membuat Notifikasi Komentar Ala Google Plus - Kali ini saya mau share lagi nih sobat tentang notifikasi komentar, Widget ini selain tampilannya yang simple juga berfungsi untuk pemberitahuan komentar terbaru di blog kita, dengan memasang widget ini kita tidak perlu lagi repot-repot, repot apa ya gak ngerti aku. :p
Langsung saja simak berikut ini.

Cara Membuat Notifikasi Komentar Ala Google Plus

1. Sobat Masuk ke Template => Edit HTML
2. Cari Kode ]]></b:skin> atau kode  </style>
3. Taruh Kode CSS berikut ini tepat 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:25px;
  right:126px;
  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:300px;
  position:fixed;
  top:62px;
  right:0;
  z-index:9999;
  background-color:#422929;
  padding:60px 20px 10px 20px;
  color:#0D8A80;
  box-shadow:0 4px 15px -4px rgba(0,0,0,.4) !important;
  text-align:left;
  border:5px solid #580606;
  background-clip:padding-box;
  display:none;
}
#cm-container:before {
  content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi0jktO7cxUYxBoAgWJ8qgG9BYAHruJODW7O0wDsQrsLm9Aafouw5PUsbBUbCmOKinRZJv_UFGXzhGcw0didD2rNlPFFq7kZa_VaNaSQ5Ml5Lr5oge27hncUws-p2F8c5PmiNlkGyyT-A/s1600/arrow-notif.png');
  position:absolute;
  top:-19px;
  left:200px;
}
#cm-container:after {
  content:"Komentar Terbaru";
  position:absolute;
  top:22px;
  left:150px;
  text-align:center;
  font:normal 14px Arial;
  color:#fff;
}
.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: #422929;
  margin-bottom:10px;
}
.cm-text {color:#E61919;}
.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/AVvXsEh-fdtonZlnIFe8Pbg5N9soqzlpHQyqA_nYJocLWSUbZwT9gC-EWI_jCIJFaOW6wrI5EhvTJMiyqd0ea6WJJAYQsDntKFRIljba6ze-jxNzGkjpHUpQ_nak7adGFMuLCr_BXKFK2CF7ytw/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/AVvXsEghGLSnWNFE8OLU7YnRifLqUSIyuL-HNthAo7G-bAEBp8i7VVx5pTN7krCTjwDYferq4U9hCP79-fkfnEh0Ws0I_mcESnkqbY5FE_kBaoby3hpnvEju0KJfcRkJ0KYYQYt7XCRsMqeGCUg/s80-c/gravatar.png);
}

4. Silahkan sobat cari lagi kode </body>
5. Taruh Kode dibawah ini tepat diatasnya.

<div id='cm-container'/>
<div id='notif'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0_ZcuDYkU9uzjRMLoJl25DF7qsyvieo0nykgvGGO_IRRmzKb3tVe0we8HDkI-_HPNzIEZrQutskqnPQyliSrRpIdohLorUPqNWiUZdrhvxQj_Hjju8EycaqJxnoqCcCami0Opxt7u-vQ/s1600/lonceng.png' title='Notifikasi'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdZfQziN138Ek3Gtebubbw83hJex6AYDdlA2bnn1oA5F-8Lta9vqudntyknlfYIINxHhi0Mkwev3Qr_mqQ5F9JwDRwtbxT3sCkcve2YvaUtxFE1sitH1pQEU_zPq3mWTPLunXalJbQ6sI/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://tipsblogbaru.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='http://yourjavascript.com/1858374111/aab-notif-koment.js' type='text/javascript'/>

Terakhir simpan template sobat dan lihat hasilnya.

Note:

1. Ganti warna BIRU dengan URL blog sobat. 
2. Jika didalam Template sobat belum terdapat jQuery, pasang kode dibawah ini tepat diatas </head>

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

INGAT ! abaikan script diatas jika sudah terdapat script jQuery di template sobat.
Sekian dulu untuk postingan Cara Membuat Notifikasi Komentar Ala Google Plus.
Semoga Bermanfaat . . .

Source Code: http://blog.kangismet.net/2013/11/notifikasi-komentar-ala-google-plus.html