Cara Membuat Notifikasi Komentar Seperti Google Plus

Malam minggu ini ane mau berbagi bagaimana caranya buat notifikasi komentar atau recents comment di blogger dengan tampilan seperti notifikasi di google plus. Tau kan? pasti tau lah.. Contohnya kaya yang ada di blog ini, coba liat di pojok kanan atas, ada icon lonceng. Itu adalah icon notifikasi / pemberitahuan jika ada komentar terbaru di blog hanivinside.NET ini. Tampilan nya seperti ini :

Cara Membuat Notifikasi Komentar Seperti Google Plus

nah, untuk membuat Notifikasi Komentar Seperti Google Plus caranya :

STEP 1
copy script jQuery ini dan paste diatas </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript">
*tapi kalo sebelumnya udah ada jQuery di template blog kalian, STEP 1 bisa di skip.

STEP 2
Copy CSS ini dan paste 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/AVvXsEg_uPRd9eXF2Mn63QsqTuHNF9eVqnjfr84ptz8PVmkxXgz3lsbfSSF8GOkWwP7YJS1uLTJi6bJQQDCUIJkbnG7Vi7tphpmzWS447GRP_ghTO1jgEAWRXwC16I0aDU9dD8zOrepclqSEnHQ/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/AVvXsEiO_GCuexHz6w6hYqv2gKYoW6UG4gWEzSqXp8Jq4I5DFHcnByQW4RVuLJ3YBPdZ-onEfx0dgTNGujNsLAKYUATWIwlyCVtn-sGedf0c8PgrS-aT_d0fyHZp9OkdnbGsh6VcAdtWFSYITIU/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/AVvXsEiGP0_ZM1wzHX22TQXww5Q11XerFlv-dNb-5RnHauoQ7R1hvuRl-MaeWxV09PHHQyk6DQ3U5At0nGGjehyjgeXuMufapGZyWonq0wsZ9pzCq3DX1LkuOyFQPJDMtiulqYt67RcJdRVRrIw/s80-c/gravatar.png);
}

STEP 3
Copy kode ini diatas </body>
<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji0sWmhO0jI6yazm43uNuIOs0N5j8UFzmWSZZuqtwgLuvf9O8IKv9RbbTc_VJaJ07YrEec83OShZNsTrZnOVeFTJ8EzHUsEjXVjxfonjHxuFvXxhBK03EtlD8DIloFVgy2LmhpBcifvoc/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFhpA-8EMjbNcNH3IRdE2KGrEKPl2rzNHCMS6YVrfk7RPJX2pAdjg7vmBpPzsvi4Hcg4JhH8DxbvOsRWhtAULJkKS_-hLilEuwAYNgY5bdLMLY6mhRRzggILhpvMDsnT5raRHxB4EvuuQ/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://www.hanivinside.net",
    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'/>

*pada bagian ini home_page: "http://www.hanivinside.net" , ubah sesuai URL blog kalian.

Kalo udah semuanya, SAVE.  dan lihat hasilnya.. :)


Referensi : Blog Kang Ismet
Previous
Next Post »

38 komentar

Tulis komentar
Muhammad Faiq
AUTHOR
8/2/14 15:36 delete

Thanks infonya gan.. Nice Blog..
Ditunggu kunbalnya
www.ashidiqfaiqq.blogspot.com

Reply
avatar
abcdefghaniv
AUTHOR
9/2/14 02:46 delete

terima kasih atas kunjungan nya. :)

Reply
avatar
Eka Prazetya
AUTHOR
3/3/14 01:48 delete

tnkz infonya,, visit back ya tersenyumuntuku.blogspot.com

Reply
avatar
15/3/14 22:39 delete

ikut tutornya bro

Reply
avatar
Didit Riadi
AUTHOR
27/3/14 13:56 delete

wah keren gan ,di coba peraktekin dulu
http://si-kudil.blogspot.com/

Reply
avatar
11/4/14 11:44 delete

Cara Membuat nya Diam Seperti di Blog ini Gimana ?
Punya Saya Kalo di Scrool dia juga ikut turun

Reply
avatar
abcdefghaniv
AUTHOR
11/4/14 13:09 delete

letak kan di div yang tepat. yang letaknya statis.

Reply
avatar
22/4/14 20:59 delete

Keren tutorialnya gan, sangat membantu.
Comeback ya : http://catatan-lingga.blogspot.com/

Reply
avatar
abcdefghaniv
AUTHOR
23/4/14 00:43 delete

oke bro, salam blogger (y)

Reply
avatar
Unknown
AUTHOR
26/4/14 09:32 delete

Manteb gan, sangat bermanfaat, tapi di blog saya ga aku pasang :) komback yaa

Reply
avatar
Anonim
AUTHOR
10/5/14 08:18 delete

Sngat mmbantu untuk blogger pemula sperti say gan,nice..

Reply
avatar
Kitab Maop
AUTHOR
8/7/14 06:04 delete

Wah ini lebih mudah dan gampang, makasih gan atas share nya :)

Reply
avatar
Unknown
AUTHOR
19/7/14 18:11 delete

nice info bro sangat membantu.. visit http://www.portalbugs.net/

Reply
avatar
Zhey
AUTHOR
22/7/14 11:20 delete

gan, cara ngubah warna nya gimana -_-

terlalu Transparant nih di Template ane,,, plis bantu gan :D

Reply
avatar
abcdefghaniv
AUTHOR
22/7/14 11:23 delete

warna apanya bro ?

Reply
avatar
Zhey
AUTHOR
22/7/14 11:24 delete

Warna Lonceng nya gan

Reply
avatar
Zhey
AUTHOR
22/7/14 11:31 delete

ini gan mirip dengan web agan,,,


Ngikuti header...??

Reply
avatar
abcdefghaniv
AUTHOR
22/7/14 11:35 delete

ente download gambar loncengnya, trus edit warnanya sesuai dengn blog ente, trus upload gambarnya, copy url gambarnya. buat gantiin yg dr punya ane.

Reply
avatar
Zhey
AUTHOR
22/7/14 11:40 delete

Lalu untuk di header gimana?

Reply
avatar
abcdefghaniv
AUTHOR
22/7/14 11:43 delete

headernya kenapa ?
maen warnanya aja, sesuaiin sama header.

Reply
avatar
Zhey
AUTHOR
22/7/14 11:48 delete

bukan, ini loh header ente...


Home | Contact | ABOUT..... *Lonceng*

nah buat lonceng nya disitu gimana?
header ane sama kayak ente.

Reply
avatar
abcdefghaniv
AUTHOR
22/7/14 12:34 delete

taro di dlm div nya header

Reply
avatar
Unknown
AUTHOR
23/7/14 02:28 delete

jquery nya di perbaiki dulu mas ada yang kurang satu

Reply
avatar
abcdefghaniv
AUTHOR
26/7/14 12:46 delete

bilang aja bro, jquery yg mana yg broken. ntar ane perbaiki

Reply
avatar
Unknown
AUTHOR
28/9/14 10:01 delete

ngga nongol mas
siomponk.com

Reply
avatar
abcdefghaniv
AUTHOR
28/9/14 11:17 delete

apanya yg nongol bro ?

Reply
avatar
21/11/14 15:16 delete

nice min Artikelnya
min Mau nanya nih
cara membuat Kotak Admin disamping nama Perancang Blog Gimana ?

Reply
avatar
abcdefghaniv
AUTHOR
21/11/14 15:19 delete

maksudnya disamping kotak perangcang gimana bro ? sebelah mana itu
bisa kasi screenshoot/contohnya?

Reply
avatar
24/1/15 21:16 delete

Bro Kok ane jadi , tapi pas di klik gak respone apa2 ? tolo0ng di cek demonuji.blogspot.com di tunggu min lagi build template mandiri ni :)

Reply
avatar
abcdefghaniv
AUTHOR
26/1/15 13:57 delete

bisa kok, ane cek di blog ente pas ane klik muncul komen nya.

Reply
avatar
2/3/15 00:14 delete

Terima kasih gan atas Infonya !
Langsung dicoba

Reply
avatar
Bang izal
AUTHOR
4/1/16 13:59 delete

siang om,,,saya udah pasang, dan udah ada gambar lonceng dan notif angka jumlah komentar yg masuk,,,,,tapi pas loncengnya diklik cuman keluar layar hitam doang,,,,gak ada komentarnya,,,itu kenapa ya om?

Reply
avatar
Bang izal
AUTHOR
4/1/16 14:05 delete

mohon di cek di bangizaltoy.blogspot.co.id om,,,,,terima kasih

Reply
avatar
abcdefghaniv
AUTHOR
5/1/16 09:32 delete

mungkin karena ada dua div notif (notif dan notif2), coba pake satu aja.

Reply
avatar
Daniel
AUTHOR
10/1/16 17:22 delete

Mohon dibalas admin..
Jumlah notifnya ikut nongol di judul blognya (ditab)
Cara inlangin nya gimana :D

Reply
avatar
abcdefghaniv
AUTHOR
11/1/16 08:36 delete

coba diatur lagi penempatan div notif dengan div headernya

Reply
avatar

- Kritik dan saran sangat saya nantikan untuk kemajuan blog ini.
- Silakan report, jika ada link yang mati.
- Mohon untuk berkomentar sesuai dengan tema postingan.
- Dilarang berkomentar yang mencantumkan LINK AKTIF.
ConversionConversion EmoticonEmoticon