Cara Membuat Notifikasi Komentar Di Blogger Seperti Google Plus

Cara Membuat Notifikasi Komentar Di Blogger Seperti Google Plus - Blogger Update. Notifikasi atau pemberitahuan bukannya hanya ada difacebook atau google plus, tetapi ada juga ada di blog sekarang. Kegunaan anda memasang notifikasi komentar di blog sudah pasti karena mempermudah untuk melihat siapa yang berkomentar di blog kita. Contohnya kayak yang ada di blog ini yang berlambang lonceng. Tampilahnnya seperti ini :

Langkah-Langkah Membuat Notifikasi Komentar Di Blogger Seperti Google Plus
1. Buka Blog Anda >> Edit Tempalate.
2. Cari kode </head>, lalu masukan kode dibawah ini diatas kode </head>

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

3. Lalu masukan kode dibawah ini diatas ]]></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/AVvXsEiKiQLHGxvZtn1lWz560ENnU2OuWYmf0kLZaC-Ai9wozf51pN-qg5nRTMUekEu_gxauBCqqlM_0dmIAqy0crd6p8S2gF-dJ1TluR5BgMeLv8D8oRAuCj6CD139gCJ1bESSqGwJApYse9iM/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/AVvXsEj5-0RGwA3IgqC3i9sIsMMzmUP_rl2tiNtw786Z4Pa7Dg6d1SpxbHFBG3WuHhGBEhVR8oyWHnsnvJzyFuvvhSfXQV5f38q3GX_lU5V-X38njgB90drV_idgwc25GRTJG0mJxhCR2I6ip14/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. Lalu masukan lagi kode dibawah ini tepat diatas kode </body>

<div id='cm-container'/> <div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWZkFteFcbjBitR8CtEVvgHrOfOfxArbGzMPH0aA0E4vjTyY3WyaMOSWQ2rO8qukgsxXZSNJsjG_Ny51bJD65gpdPlS2wkWTzmWUKI7q-L2beshKZT0dNgGCCnB_KE5Ehn6rf6LRnasdI/s1600/lonceng.png'/></div> <div id='cm-total'/> <div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5uCByUFR_ztOPYkw_ldTrj4JGiWH2jUOeLBF7b-vM4qy9OqdqReVVeUrRSl9Bu1ZjzC5H8a8b56xLHRD-GJm5dQRs2xlGjShAtld2Tb2KcOa0yy80AVkNvc6HLQpU8n0x2u0Wk7SKwic/s1600/delete4.png' title='close'/></div> <script> //<![CDATA[ var originalTitle = document.title; var cm_config = { home_page: "http://seo-powers.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'/>

5. Simpan Template

Jika ada pertanyaan langsung saja komentar dibawah ini. Sekian dari saya Mochammad Fikri yang menuliskan artikel tentang Cara Membuat Notifikasi Komentar Di Blogger Seperti Google Plus. Simak juga artikel saya Cara Pasang WIdget Lintas.me atau Cara Setting Robot.txt atau Apa Itu Google Adsense? atau Cara Membuat Link Sumber Otomatis Ketika Artikel Di Copy Paste

Dilarang untuk meng-copas artikel ini kecuali menuliskan sumbernya