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, alasannya yaitu widget ini mempunyai kemampuan untuk memberitahu kepada eksekutif bahwa terdapat komentar gres yang telah masuk.
Demonya bisa Anda lihat di sini, namun efeknya hanya akan terlihat apabila terdapat (paling tidak) satu komentar gres yang masuk di blog ini:
Untuk memasang widget ini, pertama-tama tambahkan sebuah elemen halaman HTML/JavaScript. Salin isyarat 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 isyarat yang Saya beri tanda dengan URL blog Anda kemudian klik Simpan. Hasil maksimal akan terlihat dikala terdapat komentar gres 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 memilih jumlah komentar yang akan ditampilkan pada widget ini |
| t_w | Digunakan untuk memilih lebar avatar |
| t_h | Digunakan untuk memilih tinggi avatar |
| summary | Digunakan untuk memilih jumlah abjad komentar yang ditampilkan |
| new_tab_link | Jika bernilai true, seluruh tautan yang ada di dalam widget ini akan terbuka di tab/jendela gres dikala diklik |
| ct_id | ID kontainer daftar komentar (abaikan jikalau tidak perlu) |
| new_cm | Label teks yang akan muncul sesudah jumlah komentar (Misalnya: 2 Komentar Baru!) |
| interval | Lihat deskripsi di bawah |
| alert | Lihat deskripsi di bawah |
Opsi: interval
Digunakan untuk memilih interval penyegaran feed komentar. Menggunakan satuan milidetik. Nilai 30000 artinya bahwa feed komentar akan disegarkan selama setengah menit sekali untuk menyidik apakah terdapat komentar gres yang masuk atau tudak. Jika terdapat komentar gres yang masuk, maka widget ini akan menampilkan pesan bahwa komentar gres telah masuk.
Opsi: alert
Ini cuma opsi untuk memilih gaya pemberitahuan pesan. Jika bernilai false, widget ini akan menampilkan pesan masuknya komentar gres pada title bar peramban ibarat gambar 1. Sebaliknya, jikalau bernilai true, notifikasi akan muncul pada kotak peringatan ibarat terlihat pada gambar 2:
Pembaharuan
Sekarang Anda bisa menampilkan teks notifikasi pada elemen HTML tertentu dengan cara mengubah nilai opsi alert menjadi sebuah fungsi ibarat 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 ibarat ini. Elemen ini akan dipakai 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 ibarat 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 ibarat ini:
<div id="show-total" title="Widget Recent Comment dengan Sistem Notifikasi" onclick="this.innerHTML='';"></div>Fungsinya untuk menghilangkan teks total komentar apabila pengguna mengeklik elemen tersebut.
Sumber https://www.dte.web.id/