Cara Membuat Notifikasi Komentar Google Plus Di Blog

Cara Membuat Notifikasi Komentar Google Plus Di Blog - Selamat sore... Saat ini, saya akan bagi tutorial blogger lagi yang sering bahkan banyak digunakan oleh para blogger atau pembangun blog untuk blog mereka. Tutorial yang saya maksud adalah Cara Membuat Notifikasi Komentar Seperti Google Plus Di Blogger.

Nah, buat para blogger khusus nya seperti sobat mungkin, yang kemungkinan banyak sekali pengunjung sehingga blog sobat dibanjiri komentar. Pasti nya sobat senang dengan hal seperti itu. 

Kalau blog sobat sudah banyak komentar nya, pasti nya sobat senang dan bisa pamer kepada pengunjung sobat karena sukses nya sobat dalam mengelola blog dengan cara mengikuti tutorial ini. 

Cara membuat notifikasi komentar ala google plus di blog akan muncul recent comment, tapi seperti google plus dalam hal tampilan. (Baca juga: Cara Membuat Recent Comment Dengan Avatar Di Blog)

Entah apa tujuan para blogger memasang notifikasi komentar ala google plus di blog ini. Mungkin, para blogger yang dibanjiri komentar bisa pamer kepada pengunjung yang lain. Tapi, saya sarankan untuk blog sobat yang mungkin sedikit komentar atau hampir tidak ada yang berkomentar di blog sobat, saya sarankan untuk tidak memasang tutorial ini. :v tapi jangan tersinggung. Mungkin blog sobat tidak ada pengomentar mungkin karena kotak komentar nya di hilangkan. (Baca juga: Cara Menghilangkan Kotak Komentar Bawaan Di Blog)

Kebanyakan, para blogger memasang notifikasi komentar ala google plus di blog bersebelahan dengan tombol follow dan dashboard. Jadi, sobat saya sarankan untuk baca dan ikuti tutorial Cara Memasang Tombol Follow Blog Dan Dashboard Di Blog

1. Login Blogger
2. Template
3. Edit HTML
4. Cari kode

 </head> 

(agar lebih memudahkan untuk mencari, klik kolom edit HTML, kemudian tekan secara bersamaan pada keyboard Ctrl+F)
5. Setelah ketemu, copast kode jQery dibawah ini. Letakkan kode dibawah ini tepat DIATAS kode </head>

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

*Keterangan: kode diatas merupakan kode jQuery. Jika kode jQuery sudah terpasang di blog sobat, maka tidak perlu dipasang lagi. Tanpa kode jQuery, widget ini tidak akan bisa tampil. 
6. Cari lagi kode

]]></b:skin>

atau kode

</style>

7. Paste kode dibawah ini tepat DIATAS salah satu kode tersebut.

/* 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/AVvXsEiTiI0236NNLV7d3BKW37UsPXCrbsbuxn03QxxIW0F6adWuV00dJSFhyZ0w5BJ9INBVNmdNVqf4jen9AjjrO72Vkyk28LUkG3JU3cNiL40AivpxuSI8qKDvDPZRH1XoZ81QwQv3QWqSh1o/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/AVvXsEihowg2YZE4prRkJWuKX1C2v_WMbsgRxQsjrYwguaPuO8Ddq1JPXGANO9MkKKaU-XXtIkkBOVmtCy950-eHdb7LbFtx2LRSzcegU3CdAPUPwBRlESxlx3XWKt6myMApKSMhaAKrHZX6F9w/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/AVvXsEiMFYuJxYuFlUV7NUspBe0SuSImYL1C2JgdVxYsAZkfFbIesye8iSZPT_WuolgLCWb28M0kSQztayx4yX58TYAa2jDjClEX3kiEAUuiLZzJ6srKZPocdWxY9Qtc63cVw5ToYHTUz6YRxLw/s80-c/gravatar.png);
}

8. Masih ada lagi. Cari kode

</body>

9. Copy kemudian paste kode dibawah ini kemudian letakkan kode berikut tepat DIATAS kode </body>

<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTvxY5OR6P8OCk9yD894Cd3IkK1dGHhboLlppN3xh_OGfrRH_BA1-5XEozpTLhpNyxnFlpIIebj3g9_SMrpAkFcwDD7PyKbZ4_QNeTFFZXjJCVmqrDw7kG5pnbATOkc2Z49ttoOw47Xds/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqW6PdzNmMn-RMWNASeRWR7uP7R_EUZBuaw5hxJnB4LqyxoLOQtb6CuaNDMgrJNawT8AMqZSDOYB4omHsOEZs46ZRVBGXI3ipNJmBuhCtIPFA2WGfgv5G6_sDSc_Qr3agSxUToab8jGWU/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'/>

10. Simpan


Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ

Tutorial Blogger

Judul	Cara Membuat Notifikasi Komentar Google Plus Di Blog
Deskripsi	Cara membuat notifikasi komentar seperti google plus di blog dapat menunjukkan bahwa blog Anda dibanjiri oleh komentar pengunjung Anda.
Author	Google
Author Rating	92%/ 100% Suara Dari 2457 votes