Cara Membuat Icon Lonceng Notifikasi Komentar Di Blog

Pernah anda melihat sebuah icon lonceng yang berfungsi sebagai pemberitahuan notifikasi suatu akun? Pastinya ya. Icon lonceng dapat sering dijumpai pada akun social media seperti google karena hampir semua akun google menggunakan sebuah icon lonceng untuk sebuah pemberitahuan adanya notifikasi baru pada setiap akunnya seperti Google+, Youtube dan lainnya. Apalagi hampir setiap orang menggunakan produk layanan atau akun dari google, terutama pengguna smartphone yang berisikan semua produk dari google.

Dengan kemungkinan besar semua orang pasti pernah menjumpai karena hampir setiap orang sekarang demam internet apalagi untuk seorang blogger yang hampir semua layanan akun google memilikinya atau akun lainnya karena hampir semua menggunakan icon tersebut untuk logo adannya sebuah pemberitahuan baru.

Icon Lonceng Notifikasi juga dapat di pasang di sebuah blog untuk notifikasi sebuah pemberitahuan adanya komentar, artikel baru dan lainnya. Dengan adanya Icon Lonceng Notifikasi ini maka anda dapat melihat sebuah notifikasi adanya pemberitahuan yang baru lansung dari blog atau website  anda. Dan sudah banyak blog yang memasang icon lonceng pemberitahuan seperti ini dapat anda jumpai.

Bila menurut anda blog atau website yang anda kelola membutuhkan Icon Lonceng Notifikasi ini untuk sebuah pemberitahuan baru yang dapat langsung di tinjau, dapat anda terapkan di blog anda dengan menambahkan kode HTML Icon Lonceng Notifikasi dibawah ini, dan dapat anda ikuti langkah-langkahnya sebagai berikut cara memasangnya. semoga bermanfaat dan dapat digunakan dengan benar, terimakasih,..

Cara Membuat Icon Lonceng Notifikasi Komentar Di Blog

• Login ke Blogger
• Kemudian pilih menu Tema dan Edit HTML
• Cari kode ]]></b:skin> gunakan tombol Ctrl+ F mempermudah pencarian
• Copy kode dibawah ini dan pastekan diatas kode ]]></b:skin>

/* LONCENG NOTIFIKASI KOMENTAR THOPADS */
#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/AVvXsEiUOvQdzdxpxYkAgX1lQaIm7SjvrVNRiNaTJ3YtBknjuNU56Iaczzo3WyQ5JMHorm4Aoa2AEQLbf8vxmboPAcPTd509qRfrpbyjvnTrenZIK_clSOVN6f2obgajEkFjQiWEXQfh4-wdcFc/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/AVvXsEhgarHKjeI5Qq8ThfABoan2A12JQdlWXszz9rZETEOLwwxM0uuUvlcP_6-3N3WRexwi4dsL81z5L8KxOZ2TEubfkzYIHVFVDgW24QI3LKrPOqDiARMRyFW7yYH4NuaNvuykIPFKJOPl4gc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNRDiV4r77jNsn6T-ckdLdigevfqSwtAFhxEGQvulMdiE53d4STUq7Pli_Gb8OwJrQzmhSVrPEi0qwgs8-eAw0xpCpvUuGcwtztIX4YDy8qoHFhMTUre0l26h_uoZtJXrVPBau2Ri1f-Q/s80-c/gravatar.png);
}

• Selanjutnya copy kode dibawah ini dan pastekan diatas kode </body>

<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSji1DNbvckmPyde0qulUV-KboaVlcUvMXvjH0XT5HsBsTKG0q5eMWvEuQL-THy03murJ2yXXpXuH8rcVapGqigApkcl0rb5c654o3aYDNUDL2bcWPyOEb5B8D20iv-toW5arAczFfnjQ/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdWqA19N2CpuYIrS4KxK41EyMLTJ-P8R0p-aYhgCrMWtO0fRqiuodw0_TXqyw_whn4pTvvNXZlk5FmN5G9ZQT5SriBNR9sazsBhOQLrjGqPwCIU-sUZVzGlc7fM8NCKCWFgawbvUnwY9E/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'/>

• Langkah terakhir copy kode dibawah ini dan pastekan diatas kode </head>

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

• Kemudian Simpan Tema dan lihat hasilnya