Sedikit Info Seputar
Widget Recent Comment dengan Sistem Notifikasi
Terbaru 2017
- Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Widget Recent Comment dengan Sistem Notifikasi, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang
Artikel Widget Blog, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
Widget Recent Comment dengan Sistem Notifikasi
Terbaru
link: Widget Recent Comment dengan Sistem Notifikasi
Berbagi Widget Recent Comment dengan Sistem Notifikasi Terbaru dan Terlengkap 2017
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="http://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.