Membuat Lonceng Notifikasi Komentar di Pojok Kanan Atas Blog

Di pojok kanan atas dasbhor blogger anda , jika anda perhatikan dengan baik , ada sebuah notifikasi komentar google plus yang berbentuk lonceng , sebetulnya tidak hanya pemberitahuan komentar deh , melainkan ada juga pemberitahuan tentang kabar terbaru dari teman atau follower google plus anda yang membagikan sesuatu kepada public.

Hal ini menginspirasi Kang Ismet untuk menerapkan Pemberitahuan Komentar Google Plus untuk memasangnya di Blogger , sehingga nanti jika ada seseorang pengunjung yang telah selesai berkomentar maka terdapat notifikasinya. dan tentunya hal ini sangat bermanfaat bagi kita supaya dapat lebih cepat merespon komentar - komentar yang diberikan oleh pengunjung terhadap kita.

Awalnya widget Notifikasi Komentar Seperti Google plus ini hanya dipakai khusus untuk kang ismet saja , namun setelah ada yang mengclone widget tersebut , akhirnya supaya berkah di share sekalian deh kepada sahabat blogger . Untuk demonya silahkan sobat lihat gambar dibawah ini :

Inilah Cara Membuat Notifikasi Komentar Mirip Google Plus

Seperti biasanya , silahkan sobat masuk ke dasbhor akun blogger , pilih menu template yang berada di tab kiri => Edit html

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

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

Simpan CSS 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-z1wPQj-htL34CJnzusP91t-q0vgq-gXZIpzBxz36Ix-HrlDzzO0w4PcnatOsW4hBERDA8ZqTrk2Zw3QlW4hhoFawbhQBG4UUZCXOLNR7UWGVerUCxfbRnTejN7vVwjOWk1yAF6nT8LA/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/AVvXsEiW9eOctrp5vm-7sIJ-Yiw-gpjW0UzEe0tbu6SLS3W7pOpHV5RJsp4k_arYnffYlJPR_w0XyH30rCEEZzmZY3Jd4vE7CyX9pg72Gq9p4ed-_i4fe_5PHjDf_hCf4TMFHr7GRjzA1H2cgKk/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);
}

Supaya CSS diatas work , silahkan simpan kode ini di atas </body>

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

Silahkan ganti yang di tandai warna kuning dengan laman blog anda
Terkahir silahkan simpan template dan lihat hasilnya
Done .....

Gimana bro Langkah -langkah Membuat Notifikasi Komentar Layaknya Google Plus diatas ? sangatlah mudah bukan ? jika sobat tertarik dengan widget tersebut dan ingin memasangnya di blog sobat agar terlihat lebih cantik dan profesional silahkan ikuti tutorial diatas dengan baik , Apabila ada yang ingin ditanyakan silahkan komentar dibawah , jika saya bisa menjawab akan saya jawab , jika tidak saya kasih solusinya nanti.

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

Mawardi Teko

Membuat Lonceng Notifikasi Komentar di Pojok Kanan Atas Blog

Inilah Cara Membuat Notifikasi Komentar Mirip Google Plus

2 komentar untuk "Membuat Lonceng Notifikasi Komentar di Pojok Kanan Atas Blog"

Menu Halaman Statis