Mecha versi 2.6.4 sudah dirilis!

Widget Recent Comment dengan Sistem Notifikasi

Tabel Konten
  1. Konfigurasi Widget Lanjutan 
  2. Opsi: interval 
  3. Opsi: alert 
  • Pembaharuan 
  • Pembaharuan 22 April 2013: Mengintegrasikan widget dengan cookies, menambahkan opsi summary dan menyingkirkan opsi tt_id.

    Recent Comments Widget for Blogger with Notification System

    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:

    Lihat Demo Unduh JavaScript

    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&hellip;</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:

    OpsiKeterangan
    home_pageGanti nilainya dengan URL halaman muka blog Anda
    max_resultDigunakan untuk menentukan jumlah komentar yang akan ditampilkan pada widget ini
    t_wDigunakan untuk menentukan lebar avatar
    t_hDigunakan untuk menentukan tinggi avatar
    summaryDigunakan untuk menentukan jumlah karakter komentar yang ditampilkan
    new_tab_linkJika bernilai true, seluruh tautan yang ada di dalam widget ini akan terbuka di tab/jendela baru saat diklik
    tt_idID kontainer total komentar (abaikan jika tidak perlu)
    ct_idID kontainer daftar komentar (abaikan jika tidak perlu)
    new_cmLabel teks yang akan muncul setelah jumlah komentar (Misalnya: 2Komentar Baru!)
    intervalLihat deskripsi di bawah
    alertLihat 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:

    Model Notifikasi 1
    Model Notifikasi 1: alert: false
    Model Notifikasi 2
    Model Notifikasi 2: alert: true

    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.

    173 Komentar

    Anonim

    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...?

    Taufik Nurrohman

    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!

    Anonim

    saya pake hightlight js (softwaremaniacs) mas ,
    kira kira penempatannya gimana...?

    Taufik Nurrohman

    function commentManip() {
    if (typeof hljs != "undefined") hljs.initHighlighting();
    }

    Anonim

    Seperti ini bukan...?

    skeleton += "</ul>";
    document.getElementById(co.ct_id).innerHTML = skeleton;
    function commentManip() {
    if (typeof hljs != "undefined") hljs.initHighlighting();
    }

    Taufik Nurrohman

    [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();
    }

    Anonim

    Audio Bekerja Dengan Baik ,
    Namun Syntax tidak berhasil mas.

    you

    sama saya juga ga bisa.. bahkan class pre nya ga terpanggil sama sekali... nunggu pencerahannya z disini..

    you

    untuk menambahkan tag pre ke gmn mas.. saya udah nyob tapi gagal..

    you

    sudah bisa mas...

    Anonim

    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

    Ariana

    mas saya pake spamer detected dan notifikasi ini, problemnya live link masih aja nyangkut di tambilan notifikasi ini.. harus gimana mas.. mohon bantuannya

    Ariana

    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..

    RizkyKR

    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...??

    Ardilas

    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.

    Taufik Nurrohman

    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+.

    Ardilas

    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)

    Ardilas

    Kok aneh Mas ya, sama, tidak muncul juga di artikel itu. Cuma ada tulisan Add Comment.

    Taufik Nurrohman

    Berarti masalahnya cuma ada di artikel itu. Mungkin karena komentarnya di-disable di bagian posting.

    Ardilas

    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 :)

    Unknown

    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)

    Taufik Nurrohman

    Coba ganti bagian ini…

    (function() {
    …
    })();

    dengan ini…

    window.onload = function() {
    …
    };

    Unknown

    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
    }

    Taufik Nurrohman

    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;
    }
    */

    Unknown

    makasih mas \o/

    Anonim

    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 link

    unsgu

    terimakasih informasinya...

    Asyaf Syaffar

    penjelasannya sangat rinci sekali mas bro
    thanks for sharing ditunggu artikelnya berikutnya

    Unknown

    bagus mas bro artkelnya , trimakasih ini sangat memantu

    Unknown

    Kren...
    terimakasi mas bro...

    Unknown

    pak kalau id comments-container nya dimasukkan ke fungsi reptext seperti di artikel manipulasi komentar, emoticonnya bisa ikut kelihatan juga atau tidak?

    IRIL SAGITA

    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....

    Anonim

    wah tutorialnya sngat bermanfaat gan , izin menggunakannya yah :D

    Mas Iwan

    Mas, ada link hosting yang baru gak..? yang di artikel ini sudah tidak bisa diakses file Google Codenya mas.. :(

    Mas Kolektor

    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 >>> WIDGET, mohon bantuannya ya gan, saya harus ganti yang mana, thx :bd

    Taufik Nurrohman

    Lihat opsi alert:

    cm_config = {
    alert: function() {
    return false;
    }
    };

    Mas Kolektor

    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
    GAMBAR