Notifikasi Komentar Ala Google Plus
0 views
Membuat Notifikasi Komentar Ala Google Plus - Setelah beberapa hari absen posting, saya akan bagikan bagaimana cara membuat notifikasi ala Google Plus. Jujur, banyak sekali permintaan tutorial ini dan sengaja saya pending mengingat lumayan rumitnya memahami tutorial asli notifkasi ini di blog DTE.
Ternyata setelah saya perhatikan, banyak pencuri yang ngintip source code blog ini. Kenapa saya katakan pencuri? karena hasilnya persis sama dengan notifikasi milik saya. Kalau pun menggunakan tutorial langsung dari DTE, saya rasa tidak akan semirip yang saya punya. Daripada nambah lagi orang yang berdosa, saya bagiin aja deh :P
Sebelum melangkah pada tutorial, silahkan liat dulu screenshoot plus demonya.
Langkah 1 : Simpan jQuery di atas
Langkah 2 : Simpan CSS ini di atas
Langkah 3 : Simpan kode ini di atas
Apabila ada pertanyaan silahkan didiskusikan di kolom komentar. Jangan ngintip lagi ya.. HARAM :D

Ternyata setelah saya perhatikan, banyak pencuri yang ngintip source code blog ini. Kenapa saya katakan pencuri? karena hasilnya persis sama dengan notifikasi milik saya. Kalau pun menggunakan tutorial langsung dari DTE, saya rasa tidak akan semirip yang saya punya. Daripada nambah lagi orang yang berdosa, saya bagiin aja deh :P
Sebelum melangkah pada tutorial, silahkan liat dulu screenshoot plus demonya.

Langkah 1 : Simpan jQuery di atas
</head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
Lewati langkah ini apabila sudah terdapat jQuery pada template sobat.
Langkah 2 : 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('http://3.bp.blogspot.com/-wlYmBEpUtGE/UoVyl3GpUZI/AAAAAAAAGEQ/LDeklWh3CNI/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('http://4.bp.blogspot.com/-G-9yhzSt2Mw/UoWcB4bdn4I/AAAAAAAAGE4/tzIixYewCsU/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(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/s80-c/gravatar.png);
}
Langkah 3 : Simpan kode ini di atas
</body>
<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='http://1.bp.blogspot.com/-wrJzEwB1V3U/UoQktvRDCxI/AAAAAAAAGEA/jYcRiXTyOFg/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='http://2.bp.blogspot.com/-d-5BS0YCkho/UOKe2UIw0rI/AAAAAAAAC4w/md_iYNVHaHk/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
home_page: "http://blog.kangismet.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'/>
Untuk memindahkan posisi Notifikasi, silahkan pelajari CSS Position dan Valuenya
Apabila ada pertanyaan silahkan didiskusikan di kolom komentar. Jangan ngintip lagi ya.. HARAM :D
Resource : http://www.dte.web.id/2012/11/recent-comments-widget-for-blogger-with.html
397 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
malahan ngadon kaluar dinu tab na kang =.="
bagai mana ngatur jarak yang ada pada gambar, sudah ane utak atik gk nemu juga,
http://prntscr.com/24psdd
#cm-container{
....
....
padding:60px 20px 10px 20px;
....
}
1. bagaimana membuat scroll pada rec koment
2. tolong liat gambar nya mas
3. mengganti background
http://prntscr.com/24iben
terima kasih jawabannya mas
.cm-outer{
....
....
height:570px;
overflow:auto;
}
mengganti background :
#cm-container {
....
....
background-color:#e5e5e5;
....
}
Please bantuannya .. aldhinya.com.
akang belajar bikin template dlu dmana ?
cara membuat postingan kayak kang ismet pada gambar itu bgaimana ya kang ismet :)
mampir ke blog baru ane yah : http://unduhdroid.blogspot.com
Maaf kang kalau penempatanya bagaimana ya? maksud saya apa bisa kita atur untuk posisinya... nuhun kang.. :)
terus we nga restart .. ieu ge anggo F8 kang ..
Kang saya kira itu iklan GA gak taunya :D
kang ari nyandak script di blog sanes eta teh kasebat mencuri sarupaning maok sanes kang? :( .. atuh abi teh geuning curaling nya pami kitu mah ..
Tapi summary nya gak muncul.
Saya coba scripnya pindahkan ke blog lain oke ngak ada masalah. Kira kira apanya ya Kang??
#notif {
....
top:20px;
right:180px;
.....
.....
}
Urang acak2 kang :)
Ijin Bookmart Dulu Deh kang.. Kapan-kapan Dicoba..
Nice Post kang..
#notif:before {
top:73px;
right:150;
{
Hapunten yeuh sayah mulungan wae.. sanes te kreatip tapi emang hente :)
Oya bang,, klo mau dibuat tidak floating,,, kode apa yg mau ditambahkan/hilangin ?
Ninggalin jejak heula kang....jumatan dulu. :)
.cm-outer::-webkit-scrollbar{width:5px;background:#aaa}
.cm-outer::-webkit-scrollbar-thumb{background-color:#666;border-radius:3px}
kurang ajib brooo....ngan hurup wungkul mah :D
jieun deuiiii :P