Cara Membuat Notifikasi Komentar seperti Google Plus

Oleh Unknown

Jumat, 17 Juli 2015

Bagikan :

Tweet

KLUMEUM - Cara Membuat Notifikasi Komentar Seperti Google Plus - Oke gan kali ini saya akan memberi tahu agan bagaimana cara membuat notifikasi komentar seperti google plus :D. Notifikasi komentar ala google plus ini memang menarik untuk dilihat para pengunjung maupun bagi pemilik blog itu sendiri. Sebelum memulai bagaimana bentuk dan manfaat notifikasi itu sendiri, saya akan menjelaskan isi dan manfaat Google plus itu sendiri terlebih dahulu.

Google Plus merupakan layanan tersendiri yang diberikan oleh google bagi pemilik akun gmail agar memiliki rasa nyaman. Google plus dapat membantu kita dalam berbagai kerja dan tugas, Google plus juga dapat terhubung dengan sebuah permainan yang biasanya terdapat di Google playstore. Google plus juga terhubung dengan gmail dan youtube. Dengan google plus kita dapat terhubung oleh orang di seluruh dunia ini. Sama halnya dengan Facebook, di Google plus ini anda dapat mengupdate status dan menyebarkan suatu hal yang kalian sukai ke semua orang, mislakan video yang terdapat di situs youtube dan sebuah artikel di blog.

Selain itu, Google plus dapat dijadikan sebagai wadah promosi untuk sebuah blog, channel youtube, maupun yang lainnya. Mungkin begitu saja isi dan manfaatnya, kali ini akan saya kembalikan lagi ke topik utama yaitu "Cara Membuat Notifikasi Komentar Seperti Google Plus"

Oke kita mulai saja ke tutorialnya gan :

1. Pasang kode script di bawah ini di atas </head>

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

Apabila di template sobat sudah ditemukan kode script dibawah ini maka lanjut ke tutorial nomor 2

2. Simpan kode di bawah 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:25px;
  right:110px;
  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/AVvXsEjliDrvhuDCOR2bpRyAy0t3M7umOy3LVz8usAtlWO7ivDNU69us8u7DW5jsJdmwolf41jH62e-C2_0CgcYAor_9zrZZS_XHgNujENzKiW2ZgLulxjOiFq56K1lwaVvN1b7_WmFfjOXxhl8/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/AVvXsEgVIWSCiiub0SU19gUm-xryP9nHxb4Il_OSu78okiAS8zLVsaC-TUtqSUacX-BBO_E8GnuBneXiSaGE9aYjmFX66LnYGUV7CFvm8mdYnOVfjr6sXOeDn8lgrZllnwvJk5e5juZfU_e2WY4/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/AVvXsEg7T7yu6dg-CZElTF0868aIl0eR8K8jd1zJNmUE8ZRU-H5PLCdC0l6pc_0I43_GF7NcIUuhilsOnPTI682kWDuDfJTMj2VloHhxUto6AUy_MHrprD68EC_wHpEse4t6F2mJIaJS2zP_5ZE/s80-c/gravatar.png);
}

Warna Hijau : Edit angka ini untuk menyesuaikan letak gambar lonceng berada

3. Simpan kode di bawah ini diatas </body>

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

Warna Merah : Ganti sesuai link blog agan
Warna Biru : Ganti sesuai berapa komentar yang agan inginkan untuk ditampilkan
Edit sesuai selera kalian karena saya tidak bisa membahasnya satu persatu :)

Oke simpan template dan silahkan dinikmati hasilnya gan :D thanks ya kalau udah praktek sampai jumpa di artikel selanjutnya dan jangan lupa untuk selalu komentar dan share :)

Sumber : Blog Kangismet

Tag : Blogger