Widget Recent Comment dengan Sistem Notifikasi
Pembaharuan 22 April 2013: Mengintegrasikan widget dengan cookies, menambahkan opsi summary
dan menyingkirkan opsi tt_id
.
Widget ini bukan widget recent comment biasa yang biasanya Anda temukan di blog-blog lain, karena widget ini memiliki kemampuan untuk memberitahu kepada administrator bahwa terdapat komentar baru yang telah masuk.
Demonya bisa Anda lihat di sini, namun efeknya hanya akan terlihat apabila terdapat (paling tidak) satu komentar baru yang masuk di blog ini:
Untuk memasang widget ini, pertama-tama tambahkan sebuah elemen halaman HTML/JavaScript. Salin kode ini kemudian letakkan di dalam formulirnya:
<style scoped="scoped">
.cm-outer {
margin:0 auto;
padding:0;
font:normal normal 11px/normal Arial,Sans-Serif;
border:1px solid;
border-top:none;
}
.cm-outer li {
margin:0;
padding:7px 10px 12px;
list-style:none;
clear:both;
border-top:1px solid;
}
.cm-outer .cm-header {margin:0 0 5px}
.cm-outer .cm-content {overflow:hidden}
.cm-outer img {
display:block;
float:left;
margin:2px 10px 2px 0;
border:4px solid black;
background:#8fa2cb url('http://img1.blogblog.com/img/anon36.png') no-repeat 50% 50%;
overflow:hidden;
}
</style>
<div id="comments-container">Loading…</div>
<script>
var cm_config = {
home_page: "http://nama_blog.blogspot.com",
max_result: 7,
t_w: 32,
t_h: 32,
summary: 9999,
new_tab_link: true,
ct_id: "comments-container",
new_cm: " Komentar Baru!",
interval: 30000,
alert: true
};
</script>
<script src="//dte-project.googlecode.com/svn/trunk/recent-comments-script-with-notification.js"></script>
Ganti kode yang Saya beri tanda dengan URL blog Anda kemudian klik Simpan. Hasil maksimal akan terlihat saat terdapat komentar baru yang masuk.
Konfigurasi Widget Lanjutan
Ada beberapa hal yang harus Anda ketahui mengenai konfigurasi lanjutan widget ini:
Opsi | Keterangan |
---|---|
home_page | Ganti nilainya dengan URL halaman muka blog Anda |
max_result | Digunakan untuk menentukan jumlah komentar yang akan ditampilkan pada widget ini |
t_w | Digunakan untuk menentukan lebar avatar |
t_h | Digunakan untuk menentukan tinggi avatar |
summary | Digunakan untuk menentukan jumlah karakter komentar yang ditampilkan |
new_tab_link | Jika bernilai true , seluruh tautan yang ada di dalam widget ini akan terbuka di tab/jendela baru saat diklik |
ct_id | ID kontainer daftar komentar (abaikan jika tidak perlu) |
new_cm | Label teks yang akan muncul setelah jumlah komentar (Misalnya: 2 Komentar Baru!) |
interval | Lihat deskripsi di bawah |
alert | Lihat deskripsi di bawah |
Opsi: interval
Digunakan untuk menentukan interval penyegaran feed komentar. Menggunakan satuan milidetik. Nilai 30000
artinya bahwa feed komentar akan disegarkan selama setengah menit sekali untuk memeriksa apakah terdapat komentar baru yang masuk atau tudak. Jika terdapat komentar baru yang masuk, maka widget ini akan menampilkan pesan bahwa komentar baru telah masuk.
Opsi: alert
Ini cuma opsi untuk menentukan gaya pemberitahuan pesan. Jika bernilai false
, widget ini akan menampilkan pesan masuknya komentar baru pada title bar peramban seperti gambar 1. Sebaliknya, jika bernilai true
, notifikasi akan muncul pada kotak peringatan seperti terlihat pada gambar 2:
Pembaharuan
Sekarang Anda bisa menampilkan teks notifikasi pada elemen HTML tertentu dengan cara mengubah nilai opsi alert
menjadi sebuah fungsi seperti ini:
var cm_config = {
...
alert: function(total, label) {
// Lakukan sesuatu dengan `total` dan `label`
}
};
total
berfungsi untuk menampilkan total komentar baru, sedangkan label
berfungsi untuk menampilkan nilai pada opsi new_cm
. Sebagai contoh, buat sebuah elemen HTML seperti ini. Elemen ini akan digunakan sebagai penampil/kontainer teks total komentar:
<div id="show-total"></div>
Setelah itu, sisipkan teks total komentar ke dalam elemen tersebut dengan JavaScript innerHTML
melalui fungsi di atas:
var cm_config = {
...
alert: function(total, label) {
document.getElementById('show-total').innerHTML = '<strong>'+total+' '+label+'</strong>';
}
};
Jika terdapat notifikasi baru, maka teks notifikasi tersebut akan muncul di dalam elemen #show-total
dan akan menghasilkan markup HTML seperti ini:
<div id="show-total"><strong>1 Komentar Baru!</strong></div>
Sebaiknya tambahkan juga atribut title
dengan pesan tertentu dan satu buah fungsi kecil pada elemen di atas seperti ini:
<div id="show-total" title="Abaikan!" onclick="this.innerHTML='';"></div>
Fungsinya untuk menghilangkan teks total komentar apabila pengguna mengeklik elemen tersebut.
Labels: Blogger, JavaScript, Widget
172 Comments:
Mas widgetnya kok kagak berfungsi ya? saya menggunakan custom domain dan dah cuba diblog saya. Tapi tak muncul pun isinya? ada apa2 setting yang perlu dilakukan sebelum menggunakan widget tersebut?
Set opsi Pengaturan Feed menjadi Penuh.
Opsi Pengaturan Feednya udah jadi penuh. Tapi masih enggak mau muncul juga isinya. Napa ya mas? Coba mas lihat di blog ku. Hanya muncul word loading saja.
Sudah diperbaiki :) Ternyata penulis komentar Anonim di dalam JSON Blogger tidak memiliki properti uri. Ini yang menyebabkan widget menjadi error. Normalnya, sebuah array penulis di dalam JSON Blogger terdiri dari cabang-cabang ini:
"author": [{
"name": {
"$t": "MRie RNie"
},
"uri": {
"$t": "http://www.blogger.com/profile/01219820975711609271"
},
"email": {
"$t": "noreply@blogger.com"
},
"gd$image": {
"rel": "http://schemas.google.com/g/2005#thumbnail",
"width": "32",
"height": "32",
"src": "//lh4.googleusercontent.com/-sRr-rd2Xxfw/AAAAAAAAAAI/AAAAAAAAARY/9lPBYFg7Tls/s512-c/photo.jpg"
}
}]
Di dalamnya terdiri dari properti name, uri, email dan gd$image. Sedangkan dalam array penulis Anonim hanya terdiri dari properti name, email dan gd$image dengan avatar berupa http://img1.blogblog.com/img/blank.gif :W
"author": [{
"name": {
"$t": "Anonymous"
},
"email": {
"$t": "noreply@blogger.com"
},
"gd$image": {
"rel": "http://schemas.google.com/g/2005#thumbnail",
"width": "16",
"height": "16",
"src": "http://img1.blogblog.com/img/blank.gif"
}
}]
Semoga bahasa Saya bisa mudah diterjemahkan ke dalam bahasa Malaysia :p
Apakah widget recent comments kayak gini bisa dibuat agar komentar dari admin ato pemilik blog tidak muncul??
jadi yang muncul hanya komentar dari pembaca..
bisa tidak mas??
apaan c ini!!!
woh ternyata pemberitahuan komentar yah...ic ic ic.
Wah lupa. Saya tidak melengkapi widget ini dengan fitur itu. Tapi karena widget ini lebih memfokuskan kepada fitur notifikasinya, jadi Saya pikir komentar admin juga harus disertakan, supaya pengunjung yang sedang melihat-lihat isi posting sambil menunggu balasan dari admin juga bisa ikut mengetahui komentar-komentar baru yang masuk.
mas klo mau menambahkan fitur kyak gitu bagaimana bentuk penulisan jsonnya??
saya mau coba menambahkannya pada widget ini :
http://hompimpaalaihumgambreng.blogspot.com/2012/04/recent-post-dan-recent-comment-pada.html
Mungkin memakai filter nama penulis. Saya kurang tahu :p
if ("MKR" in entry[i].author) { ... }
ok, saya maksud sekarang, bisa di pake nih,
tapi ini bukanya sistem notifikasi yang dipake seperti blog milik mas Tofik ?
thanks gan...langsung saya coba diblogspot saya
salam kenal dari www.okenesia.com social bookmark
mas kok di blog saya semua commentya muncul, padahal max_result: nya udah saya ganti 5 :(
mohon di lihat http://nevermore-404.blogspot.com/
Ups. Maaf, salah ketik di bagian ini:
?alt=json-in-script&redirect=false&max-result="+cm_config.max_result+"&callback=...
Sudah diperbaiki. Seharusnya max-results, bukan max-result :p
masih ga bisa juga ya ? :(
padahal udah saya ganti jadi max_results
Sudah Saya perbaiki lagi. Coba hapus semua kodenya lalu ulang lagi langkah-langkahnya.
dah bisa mas
muncul notifikasinya ketika kita berada di homepage blog saja ya mas Taufik?
Tidak juga.
wah Informasi yang cukup bagus dan Gampang dicerna ..
izin BERKUNJUNG
#Salam Sehat Republik Blogger Nusantara
THX GAN....UDAH TAK COBA DI BLOG SAYA. APAKAH BISA DITAMBAHKAN FUNGSI SCRROL GAK GAN?????GIMANA CARANYA????TRIMS
.cm-outer {
...
...
...
height:200px;
overflow:auto;
}
itulah komputer, tidak memiliki toleransi walaupun kurang tulis 1 huruf saja.. -_-
wah, ini dia yg ku cara2, terima kasih gan tutornya bermanfaat banget...
Kak taufik, kalau ada komentar trus di hapus oleh penulis setelah di terbitkan apakah notifasinya tetap akan muncul ?
Jadi error kak ?
Yang muncul cm loading gak selesai-selasai ?
Cara kerja widget ini sebenarnya cuma membandingkan antara jumlah komentar lama dengan komentar baru (feed komentar akan dimuat secara berkala dengan interval tertentu). Jika jumlah komentar yang baru saja dimuat lebih banyak dari jumlah komentar lama, maka akan muncul notifikasi bahwa komentar telah bertambah. Kalau masalah efek loading yang terjadi secara terus menerus Saya kurang tahu penyebabnya (secara, tidak ada efek loading pada widget ini). Kalau komentar yang sudah terbit kemudian dihapus oleh penulis paling cuma akan me-reset ulang perbandingan, jadi jumlah komentar lama akan berkurang satu. Selebihnya bisa dibayangkan sendiri.
Kak, jika isi komentar di ganti dengan judul posting komentar tersebut gimana caranya kak ?
Sudah ketemu caranya kak, makasih banget ?
Kak aku terapkan di blog aku, hasilnya seperti ini :
http://3.bp.blogspot.com/-_00tbInLhas/UQnDyCdXKxI/AAAAAAAAIJI/Kzni3qnznPE/s1600/Notifikasi.jpg
Codenya ini :
<style type="text/css">
#status-forum {
text-align:left;
padding:0;
border:2px solid #000;
font:normal normal 12px Arial,Sans-Serif;
box-shadow:0 0 5px green,0 0 5px #000;
-moz-box-shadow:0 0 5px green,0 0 5px #000;
-webkit-box-shadow:0 0 5px green,0 0 5px #000;
-khtml-box-shadow:0 0 5px green,0 0 5px #000;
}
#status-forum li {
padding:5px 10px;
background-color:#164407;
border-bottom:1px solid #640505;
position:relative;
overflow:hidden;
}
#status-forum li:hover,
#status-forum li:first-child {background-color:#133A06}
#status-forum a {text-decoration:none}
#status-forum a:hover {text-decoration:underline}
.accessible-hidden {
position:absolute;
top:-99px;
left:-99px;
width:1px;
height:1px;
}
</style>
<div class='accessible-hidden' id='comments-status'></div>
<div id='status-container'>Loading</div>
<script src='https://sagitasoft.googlecode.com/svn/trunk/js/Status-notifikasi.js' type='text/javascript'></script>
yang aku tanyakan kok alertnya gak berfungsi, dan jika ingin alertnya di tempatkan di lain tempat gimana,misal di atas kolom komentar ?
Maaf, semenjak kejadian kemarin aku jadi hati-hati dalam bertanya ?
Saya coba secara offline jadi kok:
http://3.bp.blogspot.com/-VOHEOB6PiJo/UQnO9o_-K3I/AAAAAAAAGrw/JuXBnmLxRAs/s1600/notifikasi-berhasil.png
Coba jangan memakai https
<script src='http://sagitasoft.googlecode.com/svn/trunk/js/Status-notifikasi.js' type='text/javascript'></script>
JavaScript sudah diperbaharui. Coba pelajari cara menampilkan notifikasi pada elemen HTML yang sudah Saya jelaskan di atas. Untuk memodifikasi widget versimu, cukup perbaharui saja pada bagian ini:
if (oldCount < total) {
if (cm_config.alert) {
alert((total-oldCount)+cm_config.new_cm);
} else {
document.title = '('+(total-oldCount)+cm_config.new_cm+') '+document.title;
}
}
ubah menjadi seperti ini:
if (oldCount < total) {
if (cm_config.alert === true) {
alert((total-oldCount)+cm_config.new_cm);
} else if (cm_config.alert === false) {
document.title = '('+(total-oldCount)+cm_config.new_cm+') '+document.title;
} else {
cm_config.alert((total-oldCount),cm_config.new_cm);
}
}
Ok, aku sudah berhasil kak, trus jika notifikasi ini di tampilkan bukan hanya untuk administrator atau semua pengunjung bisa melihatnya yang di ubah bagian mana kak ?
jos
Mas mau nanya nih..
bagaimana cara mendapatkan judul artikel yang di komentari??
dan bagaimana bentuk pemanggilan JSON lengkapnya (untuk bagian judul saja)??
seperti pada halaman notifikasi komentar mas Taufik..
Saya dapat dari sini ⇒ Son of the Better Recent Comments Gadget
mantapp..izin masang gan :D
Mantab izin pake di blog saya kang....
mantab...pembaruan dan pencerahan buat saya mas. makasih. salam blogger dan mahesa
kalau kita meletakkan widgetnya pada statis page atau halaman posting, notifikasinya tetap muncul atau tidak??
Muncul cuma di halaman posting/statis itu saja.
waduh... apa notifikasinya ga bisa dialihkan kesemua page.. ? seperti punya mas ini.. :D
kenapa yah , setiap saya memasang widget ini selalu muncul angka 78 atau 87 di blog saya , ~x(
sudah saya buktikan memang masalahnya pada widget ini , :\
maaf mas kalau sebelumnya pertanyaan saya di luar topik pembicaraan. saya mau nanya cara mengubah ukuran thumbnail avatar di komentar yang semula sumbernya pakai kode ini /s512-c/ menjadi lebih kecil. tujuannya cuma 1 yaitu untuk mengurangi ukuran file yang di download sehingga kecepatan loading blog bisa bertambah.
makasih sebelumnya mas :D
⇒ /2012/07/beberapa-pola-regex-bermanfaat.html?showComment=1353429328061#c1025875708511225499
assalamu'alaikum,
untuk mengatur jumlah karakter pada recent commentnya gimana mas?
Waalaikumsalam. Cek opsi summary pada tabel.
Sudah diperbaiki.
Trims kk atas infonya
Lapor, Mas Taufik..
hari ini tiba2 potongan komentar dari pengunjungnya gak muncul. Kenapa ya?
http://muxlimo.blogspot.com/p/blog-page_28.html#axzz2RwSTFXXT
Sekarang komentarnya sudah keluar.
Oya, pada bagian konfigurasi URL, kalau bisa jangan diberi akhiran /
// Bukan
home_page: "http://nama_blog.blogspot.com/";
// Tapi
home_page: "http://nama_blog.blogspot.com";
wah, Blogger baru aja memakai fitur ini tp mas lebih dulu, salut! :-bd
Izin pasang di Blog saya , dan salam kenal ....
Keren. Kalau menghubungkan ke halamannya gimana gan? Seperti yang di blognya mas Taufik ini. Kan kalau di klik terhubung ke halaman /p/notifikasi.html. Maaf, ane newbie gan.. Tapi Blogger sendiri kok belum kepikiran yang kyk gini ya???
www.lapseg.com
Wow exelent
Gan kok ngga Keluar yaa Seperti agan
alert pemberitahuan commentar
Jadi cuman gini aja
var cm_config = {
home_page: "http://nama_blog.blogspot.com",
max_result: 7,
t_w: 32,
t_h: 32,
summary: 9999,
new_tab_link: true,
ct_id: "comments-container",
new_cm: " Komentar Baru!",
interval: 30000,
alert: true
};
dan saya pengen seperti agan
seperti di gambar nie
saya sdah beri tanda merah di gambar nyaa
[img]http://3.bp.blogspot.com/-x4MjlSOunNo/UkEDG9jk1qI/AAAAAAAADSY/zyw34oIpAfM/s320/1.JPG[/img]
Mohon bantuan nyaa saya buat di Blog Cinema saya gan :)
http://twinsxtv.blogspot.com/
dan ini gan buat apa ?
var cm_config = {
...
alert: function(total, label) {
document.getElementById('show-total').innerHTML = '<strong>'+total+' '+label+'</strong>';
}
};
Kalau disatukan dengan Script awal agan yang di atas gmn ?
Buat elemen #show-total menjadi posisi fixed lalu beri warna merah. Kira-kira seperti ini:
#show-total {
position:fixed;
top:10px;
left:10px;
z-index:9999;
background-color:#CB1517;
color:white;
padding:2px 4px;
}
Lalu untuk penggabungannya…
...
<div id="show-total"></div>
</body>
var cm_config = {
home_page: "http://twinsxtv.blogspot.com",
max_result: 7,
t_w: 32,
t_h: 32,
summary: 9999,
new_tab_link: true,
ct_id: "comments-container",
new_cm: " Komentar Baru!",
interval: 30000,
alert: function(total, label) {
document.getElementById('show-total').innerHTML = total + ' ' + label;
}
};
This comment has been removed by the author.
Nah kalo agan kan bisa tuh langsung balas tanpa musti ke post langsung seperti
Kotak merah besar yang saya beri tanda tuh ?
bagaimana tuh gan ...
Saya cuma bisa membantu memandu cara membuat notifikasinya saja, tapi bukan panel notifikasi dan tombol balas beserta hapusnya. Tidak mungkin bisa dijelaskan di area komentar (sekalian sebagai komentar balasan untuk @TWINSX VEIVO [ADMIN]).
Untuk kasusmu, letakkan elemen #show-notifikasi di dekat #status-container misalnya seperti ini:
<div id='status-container'>
...
</div>
<div id='show-notifikasi'></div>
#show-notifikasi {
position:fixed;
top:10px;
left:10px;
z-index:9999;
background-color:#CB1517;
color:white;
padding:2px 4px;
}
terima kasih banyak mas taufik :)
Hebat Lah dikau gan ..
Love this Tutorial ...
mantep banget ... Kalau bisa Keluarkan yang baru2 yahh ??
aslii salut saya sama anda
mas taufik satu lagi pertanyaan saya apakah pembritahuan notifikasi tidak bisa diarahkan kesuatu laman blog yang menampilkan jumlah komentarnya seperti pada from komentar mas,,?
Seperti gambar nie kan
yang tanda merah besar
[img]http://3.bp.blogspot.com/-x4MjlSOunNo/UkEDG9jk1qI/AAAAAAAADSY/zyw34oIpAfM/s400/1.JPG[/img]
Lalu, apakah logika dari sistem ini adalah.
Saat tombol merah di klik, maka $('#sidebar').html(daftar_komen)
Lalu isi dari variabel daftar_komen itu datanya diambil dari apa? Apakah feed?
Dari feed.
Maaf Kang Taufik
kok ID nie
<div id='status-container'>
</div>
Kok ngga bisa yaa ?
itu guna nya apa kalau agan pakai ?
untuk id status-container
maaf jikalau ane banyak bertanya
alert: function(total, label) {
document.getElementById('show-total').innerHTML = '<a href="URL-HALAMAN.html">' + total + ' ' + label + '</a>';
}
Itu untuk kasusnya Imron Fhatoni. Punyamu tidak perlu mengikuti yang ini. Baca balasan dari Saya yang pertama saja.
Thanks for all tutor nya gan!!
sukses slalu buat css ..
ditunggu CSS dan WIdget2 lain nya yang terbaru !
Trimakasih Kang Taufik
Youre the best i ever meet :)
the one who Make Css by your ownself
Thanks so much
sangat2 terbantu untuk ini sob
alhamdulilah .. terimakasih banyak kang taufik
mas, mau tanya. Kenapa notifikasi muncul setelah buka laman yang dituju? bukan di sembarang tempat. bagaimana kalau menampilkan notif setelah 30 detik di halaman sembarang pada blog.
Misal disini, mesirr.blogspot.com . Kalau komen dan tidak muncul notif. Baru muncul notif setelah bukan halaman ini mesirr.blogspot.com/2013/10/komentar.html
Widget notifikasi ini cuma memakai kuki, jadi agak sulit.
saya coba bungkus dengan '<a href="URL-HALAMAN.html">' + total + ' ' + label + '</a>' notifikasinya bahkan ga muncul mas.. apa qira2 ya..
Mungkin simbol petiknya salah.
sudah saya ulangi beberapa kali v gagal trus..
isi komtarnya ga muncul.. yang muncul cuma nama ttl, dan thumbnailnya saja.. mhon penerangannya
check url = http://www.pabk-4you.com/#popup
Mungkin masalahnya dari pengaturan feed posting dan komentar. Coba ubah pengaturan feed komentar ke Penuh.
benar mas sekarang sudah bisa..
maaf mas mau tanya lagi kalo boleh.. mudah-mudahan ga bosen...
skeleton += '<li>';
skeleton += '<div class="cm-header"><strong><a href="' + link + '" title="' + title + '"' + nt + '>' + name + '</a>, ' + date + '</strong></div>';
skeleton += '<div class="cm-content"><a href="' + profile + '" title="' + name + '"' + nt + '><img alt="Loading..." style="width:' + co.t_w + 'px;height:' + co.t_h + 'px;" src="' + avatar + '"></a>';
skeleton += '<span class="cm-text">' + content + '</span>';
skeleton += '</div></li>';
}
skeleton += '</ul>';
kode diatas saya ganti jadi seperti ini :
skeleton += '<li>';
skeleton += '<div class="cm-header"><strong><a href="' + profile + '">' + name + '</a></strong> pada <a href="' + link + '" title="' + title + '"' + nt + '>' + title + '</a></div>';
skeleton += '<div class="cm-content"><a href="' + profile + '" title="' + name + '"' + nt + '><img alt="Loading..." style="width:' + co.t_w + 'px;height:' + co.t_h + 'px;" src="' + avatar + '"></a>';
skeleton += '<span class="cm-text">' + content + '</span>';
skeleton += '<div class="cm-footer">' + date + ' <a href="" title="Balas komentar ini...">Balas</a> <a href="" title="Hapus komentar ini..." target="_blank">Hapus</a></span> </span>';
skeleton += '</div></li>';
}
skeleton += '</ul>';
dan berhasil.. cuma saya bingung untuk mengisi url balas dan hapus komentarnya.. kira2 kalo bisa seperti apa?
mas ini apanya yang salah ya?kok gak bisa
alert: function(total, label) {
document.getElementById('show-total').innerHTML = '<a class="baru" href="p/comment.html?notification='+total+'>'+total+' '+label+'</a>';
coba gini z gan... kode diatas ganti z seperti semula.. coba yang dirubah <div id="show-total"></div>
menjadi
<a href='/p/comment.html' id='show-total'></a>
satu lagi mas maaf. untuk memunculkan notifikasi seperti di gambar demo bagaimana? sudah saya coba berulangkali bahkan saya ganti sebagian dengan script seperti komen yang mas bales buat sagitasoft sudah saya lakukan v tetep saja ga muncul . mhon bantuannya [img]http://3.bp.blogspot.com/-IlWxZXAYnw8/UJ-dDxKs7eI/AAAAAAAAFSk/8vqdk5FBJ5c/s1600/notification-1.png[/img]
var cm_config = {
...
alert: false
};
???
Kang taufik ada yang baru lagi ngga nie ?
Jikalau ada beri tahu ane okeyy ?
ane pengen di urlnya mucul angka notifnya gan
jadi kaya gini /p/comment.html+total
gan kok punya ane nampilin total komen doang ?
chek dimari http://nevermore-404.blogspot.com/p/test-page.html
ane pake ini
<a href="#" id="show-total"></a>
<script type="text/javascript">
var cm_config = {
home_page: "http://nevermore-404.blogspot.com/",
max_result: 7,
t_w: 32,
t_h: 32,
summary: 9999,
new_tab_link: true,
ct_id: "comments-container",
new_cm: " Komentar Baru!",
interval: 30000,
alert: function(total, label) {
document.getElementById('show-total').innerHTML = '<strong>'+total+' '+label+'</strong>';
document.getElementById('show-total').setAttribute('href', '/p/blog-page_25.html?notification='+total);
}
};
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/recent-comments-script-with-notification.js"></script>
thanks
kalau menggunakan kode
alert: function(total, label) {
document.getElementById('show-total').innerHTML = '<strong>'+total+' '+label+'</strong>';
}
apa yang di title bar jadi menghilang? apa bisa disatukan dengan alert: true, saya udah pasang dengan susah payah, akhirnya berhasil juga, tapi di titlr bar tidak muncul
.
alert: function(total, label) {
document.getElementById('show-total').innerHTML = '<strong>'+total+' '+label+'</strong>';
document.title ='('+ total + ') ' +document.title; // coba tambah bagian ini kang :)
}
bisa sob saya coba, pas masuk lagi 2 kali ko jadi aneh ya
[img]http://3.bp.blogspot.com/-IUIxqjp5_J4/UmP-x-71oPI/AAAAAAAAF1o/pVdbvijZVH0/s1600/alert.png[/img]
kalau dirubah gini gimana kang..... ???
document.title ='('+ total + ')' +document.title.substr(document.title.lastIndexOf(")") + 1)
kalau gak bisa juga... kita sama2 nunggu saran dr mas taufik aja.... :D
var originalTitle = document.title;
// ...
var cm_config = {
alert: function(total, label) {
document.title = '(' + total + ') ' + originalTitle;
}
};
mantep mas.. supaya hilang pas di klik pada title bar, bisa tambah class? atau ada cara lain?
document.getElementById('sample-button').onclick = function() {
document.title = originalTitle;
};
maaf di atas udah habis spacenya, kalau 2 id memiliki fungsi sama, perintahnya bisa disatukan? cntoh
document.getElementById('sample-button').onclick = function() {
document.title = originalTitle;
};
document.getElementById('notif-button').onclick = function() {
document.title = originalTitle;
};
nanya lagi mas,, notifikasi widget ini kan buat seluruh komentar dalam blog,,, misalnya cuma buat menampilkan notifikasi komentar dari sebuah halaman saja bisa nggak ya... di tunggu jawabannya..
Begini pak:
function clearNotifOnClick(elem) {
document.getElementById(elem).onclick = function() {
document.title = originalTitle;
};
}
clearNotifOnClick('sample-button');
clearNotifOnClick('notif-button');
Tidak bisa.
Bisa gak, nanti ada gambar, disampingnya ada angka komentar baru, seperti mkr site atau blognya kang ismet , lalu jika diteken gambarnya, muncul recent comment, bisa gak ? :)
Coba tanya sama yang punya =)
Mas Taufik mau nanya kalau semisal notifikasinya seperti pada dte sebelumnya misalnya notifikasinya muncul kemudian setelah di klik redirect ke halaman lain contohnya LAMAN notifikasinya bisa dibantu ngak mas taufik..?
mantap sob.. emang jagonya nih :-d
:-bd kunjungi ya http://daffa-nur.blogspot.com/
masih dalam perbaikan
[url=http://www.dte.web.id/2012/11/recent-comments-widget-for-blogger-with.html?showComment=1380011013436#c7103686503286003404]Baca ini[/url]
[url=http://www.dte.web.id/2012/11/recent-comments-widget-for-blogger-with.html?showComment=1380011013436#c7103686503286003404]Baca ini[/url]
Mas, bisa gak ya Recent Comment saya " www.mafiasitez.blogspot.com " mempunyai sistem notifikasi , coba deh liat :(
masih ada pertanyaan lagi nih.. sorry ya sob.. nanya mulu, kalau menerapkan manipulasi pada summary, sehingga tag pre, img quote tetep muncul, gimana editingnya?
Tidak bisa kalau memakai mode summary, harus memakai yang default. Lalu hapus fungsi .replace(...).replace(...) sebelum xxx[i].content.$t
udah bisa sob.. tks
Pagi kak, aku punya kendala dalam memodifikasi notifikasi versi cookie ini, yaitu jika visitor baru mengunjungi blog kita atau cookie peramban di reset maka di angka notifikasi yang tampil total angka semua jumlah komentar di blog saya kak, seperti ini screenshotnya :
http://3.bp.blogspot.com/-RWZdH43c-Qo/Unsp1kmTk5I/AAAAAAAAJN0/kBc245dGpmg/s1600/Kang+Ismet.jpg
Nah, bagaimana cara itu terjadi kak, mohon penjelasannya ?
Maaf salah ketik, bagaimana agar hal itu tidak terjadi kak ?
Atau jika pertanyaanku kurang dimengerti bisa di cek di : [url=http://www.sagitasoft.com]SAGITA COM[/url]
Mungkin ini bisa membantu kak.....
Pada baris ini :
profile = (author.uri) ? author.uri.$t : "#nope",
Coba tambahkan ini tepat dibawahnya :
u = entry[i].id.$t.replace(/^.*?blog\-([0-9]+).*?post\-([0-9]+)/,"http://www.blogger.com/delete-comment.g?blogID=$1&postID=$2"),
Kemudian di bagian ini :
skeleton += '<li>';
skeleton += '<div class="cm-header"><strong><a href="' + profile + '">' + name + '</a></strong> pada <a href="' + link + '" title="' + title + '"' + nt + '>' + title + '</a></div>';
skeleton += '<div class="cm-content"><a href="' + profile + '" title="' + name + '"' + nt + '><img alt="Loading..." style="width:' + co.t_w + 'px;height:' + co.t_h + 'px;" src="' + avatar + '"></a>';
skeleton += '<span class="cm-text">' + content + '</span>';
skeleton += '<div class="cm-footer">' + date + ' <a href="" title="Balas komentar ini...">Balas</a> <a href="" title="Hapus komentar ini..." target="_blank">Hapus</a></span> </span>';
skeleton += '</div></li>';
Ganti dengan ini :
skeleton += '<li>';
skeleton += '<div class="cm-header"><strong><a href="' + profile + '">' + name + '</a></strong> pada <a href="' + link + '" title="' + title + '"' + nt + '>' + title + '</a></div>';
skeleton += '<div class="cm-content"><a href="' + profile + '" title="' + name + '"' + nt + '><img alt="Loading..." style="width:' + co.t_w + 'px;height:' + co.t_h + 'px;" src="' + avatar + '"></a>';
skeleton += '<span class="cm-text">' + content + '</span>';
skeleton += '<div class="cm-footer">' + date + ' <a href="'+ link +'" title="Balas komentar ini...">Balas</a> <aa href="'+ u +'" title="Hapus komentar ini..." target="_blank">Hapus</a></span> </span>';
skeleton += '</div></li>';
nunggu balesan juga.. :)
coba dulu :)
Saya mengatasinya dengan membatasi jumlah maksimal 50 komentar:
var totalComments = total - oldCount > 50 ? '50+' : total - oldCount;
if (oldCount < total) {
if (co.alert === true) {
alert(totalComments + co.new_cm);
} else if (co.alert === false) {
document.title = '(' + totalComments + co.new_cm + ') ' + doc_title;
} else {
co.alert(totalComments, co.new_cm);
}
}
Alhamdulillah... udah bisa saya terapkan..
Tapi gimana ya supaya total komen 50+ itu tidak muncul di saat visitor pertama kalinya mengunjungi situs kita?
-maksud saya, pemberitahuan tentang adanya komentar hanya akan muncul saat adanya komen yang baru.. bisa gak ya..
Mas Taufik, cara menambahkan tombol balas dan Hapus pada notifikasi ini gimana? :(
Untuk kasusmu mungkin lebih baik dikosongkan saja...
var totalComments = total - oldCount > 50 ? '50+' : total - oldCount;
if (oldCount < total && totalComments < 51) {
if (co.alert === true) {
alert(totalComments + co.new_cm);
} else if (co.alert === false) {
document.title = '(' + totalComments + co.new_cm + ') ' + doc_title;
} else {
co.alert(totalComments, co.new_cm);
}
}
Tanya sama Kang Ismet...
Mas saya mau nanya, kan sususan cm-total saya seperti ini :
#cm-total {
position:fixed;
top:5px;
right:46px;
width:188px;
text-align:left;
z-index:9999;
cursor:pointer;
}
.total-counter {
background-color:#d11919;
color:white;
padding:2px 6px;z-index:99991;
font-family:Arial,Sans-serif;
font-size:11px;
border-radius:5px;
font-weight:bold;
}
Nah, saya pengen ubah notifikasi masuk (setiap ada komentar masuk) tetap di atas . maksudnya posisinya bukan fixed, tapi saya ubah positionnya ke relative atau absolute atau static atau inherit tetap malah gak muncul notif nya eh yang muncul kalo pas pake fixed, padahal saya pengen pas di scroll elemen itu tidak ikut kebawah . . mohon bantuannya di www.mafiasitez.blogspot.com :(
mas mau nanya, coba cek ke www.mafiasitez.blogspot.com .. Kok letak emoticon di punya ku seperti itu ya mas . . tidak pas di content malah di gambar avatarnya (komentarnya) klik deh .. :'( bantu yah mas
Normal-normal saja kok.
Bisa Tidak Pengaturan Interval Tersebut Tidak Merusak Elemen Yang Dimuat.
Contoh Tag Pre.
ketika telah mancapai waktu interval maka tag pre akan berantakan(mulai dari syntax hingga susunan).
ada solusi...?
Itu memakai Syntax Highlighter? Atau manipulasi elemen? Kalau masalahnya karena dua hal itu, sebisa mungkin buat agar fungsi bisa tereksekusi kembali sesaat setelah markup widget termuat ke kontainer:
function commentManip() {
// Eksekusi syntax highlighter dan manipulasi HTML komentar di sini...
}
Kemudian di dalam widget recent-comments-script-with-notification.js ...
skeleton += '</ul>';
document.getElementById(co.ct_id).innerHTML = skeleton;
commentManip(); // eksekusi fungsi di sini!
saya pake hightlight js (softwaremaniacs) mas ,
kira kira penempatannya gimana...?
function commentManip() {
if (typeof hljs != "undefined") hljs.initHighlighting();
}
Seperti ini bukan...?
skeleton += "</ul>";
document.getElementById(co.ct_id).innerHTML = skeleton;
function commentManip() {
if (typeof hljs != "undefined") hljs.initHighlighting();
}
bagaimana kalau widget ini dipadukan dengan ini ,
sepertinya bagus ,
[url=http://www.9lessons.info/2013/04/play-notification-sound-using-jquery.html]Play notification with sound[/url]
[1]. Bukan!
// Begini!
function commentManip() {
if (typeof hljs != "undefined") hljs.initHighlighting();
}
function showRecentComments(json) {
...
...
...
skeleton += '</ul>';
document.getElementById(co.ct_id).innerHTML = skeleton;
commentManip(); // eksekusi fungsi di sini!
...
...
...
}
[2]. Mungkin bisa…
// Sisipkan elemen `<audio>`
var audio = document.createElement('audio');
audio.id = "audio-notification";
audio.style.display = "none";
audio.innerHTML = '<source src="notify.ogg" type="audio/ogg"><source src="notify.mp3" type="audio/mpeg"><source src="notify.wav" type="audio/wav">';
document.body.appendChild(audio);
if (oldCount < total) {
if (co.alert === true) {
alert((total - oldCount) + co.new_cm);
} else if (co.alert === false) {
document.title = '(' + (total - oldCount) + co.new_cm + ') ' + doc_title;
} else {
co.alert((total - oldCount), co.new_cm);
}
// Nyalakan suara jika ada komentar baru yang masuk!
document.getElementById('audio-notification').play();
}
Audio Bekerja Dengan Baik ,
Namun Syntax tidak berhasil mas.
punya saya kok pas refresh emonya gak muncul lagi ya mas :(
cek di mari http://nevermore-404.blogspot.com/p/ass.html
Seperti yang Saya katakan ke Rizky Kurniawan Ritonga, fungsi manipulasi harus dieksekusi ulang setiap kali item komentar termuat lagi. Sayangnya pas Saya cek ternyata kamu memakai emotikon versi JQuery yang pernah Saya buat. Kalau kamu memakai emotikon versi Saya yang ini kamu bisa mengeksekusi fungsi manipulasi kembali dengan mudah untuk keperluan ini:
function commentManip() {
repText('comments-container');
}
sama saya juga ga bisa.. bahkan class pre nya ga terpanggil sama sekali... nunggu pencerahannya z disini..
untuk menambahkan tag pre ke gmn mas.. saya udah nyob tapi gagal..
sudah bisa mas...
mas kok loadingnya lama bgt ya?
beda sama yg saya taro di main-wrapper tanpa di hide
coba liat disini http://nevermore-404.blogspot.com/p/ass.html
terus klik recent comment,beda loadnya jauh bgt
mas saya pake spamer detected dan notifikasi ini, problemnya live link masih aja nyangkut di tambilan notifikasi ini.. harus gimana mas.. mohon bantuannya
masTaufik Nurrohman mohon saya dibantu, untuk replace link bagaimana ya? <a rel="nofollow" href="???">???</a> di replace ke div atau dimatikan link aktifnya gitu mas. Mohon pencerahannya mas..
Baca komentar-komentar yang ada di pos ini. Jawabannya ada di situ.
Thanks Ya Gan
mas taufik, sanya mau tanya
mengapa widget ini tidak berkerja ket ika ada postingan atau komentar yang dihapus oleh author blog secara permanen...???
ada solusinya mas taufik...??
gan kalo mau naruh icon notifikasinya diatas kanan blog gimana ..?
jawab yaa..!!!
Lihat disini >> 6juni2000.blogspot.com
⇒ /2011/10/css-position.html
Mas Taufik saya kan menggunakan komentar G+ untuk blog saya. Setelah saya rubah domain blog ke domain TLD notifikasi jika ada komentar baru tidak muncul seperti biasanya sebelum saya rubah domain. Adakah caranya agar notifikasi bisa kembali muncul?
Terima kasih.
Google+ itu seperti Disqus. Sekali domain berubah, komentar akan hilang semua. Bukan hilang si, cuma gagal dipanggil saja karena ID-nya berubah. Itu setahu Saya.
Kalau masalahnya adalah karena notifikasi widget ini yang jadi tidak muncul, itu ya karena mas berganti ke Google+. Widget ini pakainya JSON komentar bawaan Blogger, bukan dari komentar Google+.
Satu lagi Mas saya mau nanya masih tentang G+ nih. Di blog saya pada artikel tertentu form komentar G+ tidak muncul itu kenapa ya? Saya desain sendiri templatenya, tapi bingung.. ada yang keluar.. ada yang tidak.
Mohon analisanya di salah satu artikel saya yang tidak muncul form komen G+ nya (http://goo.gl/GBCYIF)
Coba pakai cara manualnya saja di sini ⇒ /2013/04/mengaktifkan-fitur-komentar-google.html
Kok aneh Mas ya, sama, tidak muncul juga di artikel itu. Cuma ada tulisan Add Comment.
Berarti masalahnya cuma ada di artikel itu. Mungkin karena komentarnya di-disable di bagian posting.
Terima kasih atas semua responnya, saya rasa mungkin anda perlu tau bahwa komentar G+ di blog saya sudah bisa muncul. Dan saya masih belum tau bagaimana hal itu bisa terjadi.
Setelah menggunakan cara manual dan saya kembalikan lagi, ternyata masih belum bisa muncul (seperti komentar saya yang terakhir). Tapi sekarang sudah muncul :)
kalo untuk widget ini dibuat preloader bisa nggak mas?
komentar akan muncul setelah diklik.
biar nggak nambahin beban loading blog :(
kalo ada minta clue nya aj, nanti saya pelajarin B)
Coba ganti bagian ini…
(function() {
…
})();
dengan ini…
window.onload = function() {
…
};
oke, :-bd
maaf mau tanya lagi mas
kalau mau menerapkan manipulasi pada summary, sehingga tag pre, qoute dan img bisa muncul gmna mas ?
ini script yang aku pakai
var g = d[x];
for (var t = 0; t < g.link.length; t++) {
if (g.link[t].rel == "alternate") {
n = g.link[t].href
}
}
for (var B = 0; B < g.author.length; B++) {
z = g.author[B].name.$t;
C = g.author[B].gd$image.src
}
if (z != c.adminBlog && ntotal < c.numComments) {
ntotal++;
e += "<li>";
if (C == "http://img1.blogblog.com/img/blank.gif") {
k = c.defaultAvatar
} else {
k = C.replace(/\/s[0-9]+(\-c|\/)/, "/s" + c.avatarSize + "$1")
}
j = (g.author[0].uri) ? g.author[0].uri.$t : "#nope";
e += (c.Showimage === true ? '<img class="avatar" src="' + k + '" title="' + z + '" alt="' + z + '" style="width:' + c.avatarSize + "px;height:" + c.avatarSize + 'px;display:block"/>' : "");
var q = n.lastIndexOf("/") + 1,
s = n.lastIndexOf("."),
E = n.split("-").join(" ").substring(q, s) + "...";
D = g.published.$t.substring(0, 10);
var p = D.substring(0, 4),
u = D.substring(5, 7),
A = D.substring(8, 10),
v = c.MonthNames[parseInt(u, 10) - 1],
o = g.published.$t.substring(11, 16),
h = o.substring(0, 2),
w = o.substring(2, 5);
if (h < 12) {
r = "AM"
} else {
r = "PM"
}
if (h === 0) {
h = 12
}
if (h > 12) {
h = h - 12
}
e += '<strong class="title_content"><a target="_blank" rel="nofollow" title="' + z + '" href="' + j + '">' + z + '</a> pada <a class="url_komen" href="' + n + '">' + E + '</a></strong>';
var m = g.content.$t;
var f = m.replace(/(<([^>]+)>)/gi, "");
if (f !== "" && f.length > c.characters) {
f = f.substring(0, c.characters);
f += "..."
} else {
f = f
}
Script lebih lengkapnya kesini mas = [url=http://jsfiddle.net/hidayat_rifan/cr0n0suu/]Jsfiddle[/url]
Pada bagian ini…
var f = m.replace(/(<([^>]+)>)/gi, "");
if (f !== "" && f.length > c.characters) {
f = f.substring(0, c.characters);
f += '...';
} else {
f = f;
}
ganti dengan ini…
var f = m;
f = f.replace(/<i rel="pre">([\s\S]+)<\/i>/g, '<pre><code>$1</code></pre>');
f = f.replace( … );
f = f.replace( … );
f = f.replace( … );
f = f.replace( … );
…
…
…
// dan seterusnya…
/*
if (f !== "" && f.length > c.characters) {
f = f.substring(0, c.characters);
f += '...';
} else {
f = f;
}
*/
makasih mas \o/
mas kan saya buat script untuk quote comment ya,nah cara biar comment yg di quote itu muncul di recent comment ini gimana ya ?
lebih jelasnya buka disini mas [url=http://nevermore-404.blogspot.sg/2014/01/simple-quote-system-di-blogger.html?showComment=1390919447815#c5018887398217537356]link[/url]
terimakasih informasinya...
penjelasannya sangat rinci sekali mas bro
thanks for sharing ditunggu artikelnya berikutnya
mantap banget, terima kasih banyak
bagus mas bro artkelnya , trimakasih ini sangat memantu
Kren...
terimakasi mas bro...
pak kalau id comments-container nya dimasukkan ke fungsi reptext seperti di artikel manipulasi komentar, emoticonnya bisa ikut kelihatan juga atau tidak?
wah tutorialnya sngat bermanfaat gan , izin menggunakannya yah :D
Bisa, asalkan posisinya, semua HTML yang digenerasikan sudah dimuat ke dalam kontainer tersebut, baru setelah itu proses manipulasi bisa dilakukan.
Terkait: /2012/05/paket-javascript-fitur-manipulasi.html
Aku coba begini bisa kak, cari bagian :
_cookie.set('tt_cm', total, 7000);
Letakka code ini tepat di bawahnya:
repText('rep-holder');
Kemudian Anda tambah id rep-holder di bagian ul seperti ini
skeleton = '<ul id='rep-holder' class="cm-outer">';
Semoga membantu....
Mas, ada link hosting yang baru gak..? yang di artikel ini sudah tidak bisa diakses file Google Codenya mas.. :(
gan, bisa bantu menghilangkan script new_cm: " Komentar Baru!" ? saya rasa terganggu saat ada komentar baru yang masuk, di tab browser ada tulisan "total + Komentar Baru!" + judul halaman, saya sudah coba hapus tapi setelah itu komentar didalam widget tidak muncul, ini juga scriptnya saya hosting disini gan >>> [url=https://cdn.statically.io/gh/sikolektor/MasKolektor/81c9c3bc/BloggerCommentNotif.js]WIDGET[/url], mohon bantuannya ya gan, saya harus ganti yang mana, thx :bd
Lihat opsi alert:
cm_config = {
alert: function() {
return false;
}
};
mantap gan, work 100%.
1 lagi gan, syntax highlighter kok tidak tereksekusi di element widget ya gan ? malah ada emoticon juga yang nyelip disana saya lampirkan screenshotnya, mohon dibantu :D
[url=https://iili.io/JzNSmN.png]GAMBAR[/url]
[img]https://iili.io/JzNSmN.png[/img]
Post a Comment
<< Home