Memanipulasi Elemen Pada Komentar Blogger

Kode yang saya bagikan di sini kebanyakan membutuhkan JQuery, maka Anda perlu meng-embed atau menanamkan JQuery ke dalam edit HTML agar beberapa kode di bawah ini berjalan dengan baik.

Menghindari Line Break atau Baris Baru yang berlebihan
Jika saat berkomentar Anda menekan Enter lebih dari 1 di form komentar blogger, maka itu tetap akan diproses sebagai linebreak atau tag <br> yang hasilnya memberikan baris baru sebanyak yang Anda masukkan. tidak ada pembatasan Enter pada sistem komentar blogger sehingga saya membuat cara mengatasinya dengan bantuan javascript. Kode ini akan memanipulasi isi komentar yang memiliki 2 Linebreak atau lebih dari 2, menjadi 1 Linebreak.

$(document).ready(function () {
    var lbr = $('#comment-holder').html();
    lbr = lbr.replace(/(?:<br>s*){2,}/g, '<br>');
    $('#comment-holder').html(lbr)
});
/*--- JQuery required ---*/

/* NOTE :
pada baris 3 adalah bagian untuk mengganti ketentuan yang diinginkan
value 2 pada baris itu artinya jika 2x Enter atau lebih, maka akan
digantikan dgn 1 <br> pada hasil tampil komentar
*/

Mengaktifkan Beberapa Kode HTML
seperti tag IMG untuk menampilkan gambar, PRE dan CODE untuk menampilkan kode, BLOCKQUOTE untuk menampilkan pesan atau kutipan, EMBED untuk menampilkan video youtube. Maka dengan kode ini pengomentar menjadi dapat menampilkan sesuatu yang tidak ada pada sistem komentar, dengan cara menyisipkan URL gambar ke dalam kode [img][/img], PRE dengan [pre][/pre], CODE dengan [code][/code], blockquote dengan [quote][/quote], dan video dengan [youtube][/youtube]. Spesifik untuk video youtube, link yang disisipkan ke dalamnya adalah bagian belakang URL youtube. Contohnya : http://www.youtube.com/watch?v=P7JdxWiebJA. Maka yang saya tandai warna biru tersebut yang disisipkan sehingga menjadi [youtube] P7JdxWiebJA [/youtube].

q = document.getElementById("comment-holder");
if (q) {
  p = q.getElementsByTagName("p");
  for (x = 0; x < p.length; x++) {
    if (p.item(x).getAttribute("CLASS") == "comment-content") {
      lek = p.item(x).innerHTML.replace(/\[pre\](.[^\]]*)\[\/pre\]/ig, "<pre>$1<\/pre>");
      lek = lek.replace(/\[code\](.[^\]]*)\[\/code\]/ig, "<code>$1<\/code>");
      lek = lek.replace(/\[quote\](.[^\]]*)\[\/quote\]/ig, "<blockquote>$1<\/blockquote>");
      lek = lek.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img style='max-width:100%;vertical-align:-3px' src='$1' alt='loading...' \/>");
      lek = lek.replace(/\[youtube\](.[^\]]*)\[\/youtube\]/ig, "<iframe width='100%' height='390' src='http://www.youtube.com/embed/$1' frameborder='0' allowfullscreen><\/iframe>");
      p.item(x).innerHTML = lek;
    }
  }
}
/*--- JQuery No needed ---*/

Menghapus Hyperlink Reference dan Plain Text URL
Pada tag HTML <a> terdapat atribut href(hyperlink reference) yang akan menjadikan <a> tersebut memiliki alamat destinasi(URL) dan clickable. Di kalangan blogger hyperlink ini sering disebut link aktif atau link hidup, link inilah yang akan dijadikan tak ber-link/href/URL atau menjadi hanya nama linknya saja. Sementara Plain text URL adalah alamat URL yang terpampang dalam bentuk teks biasa. misalnya : http://www.website.com/.

// hyperlink dijadikan tak berURL dan hanya nama linknya
$(document).ready(function () {
    $(".comment-block p").find("a").contents().unwrap();
});
/*--- jQuery required ---*/


// menghapus plain text URL
var isUrl = /(\()((?:ht|f)tps?:\/\/[a-z0-9\-._~!$&'()*+,;=:\/?#[\]@%]+)(\))|(\[)((?:ht|f)tps?:\/\/[a-z0-9\-._~!$&'()*+,;=:\/?#[\]@%]+)(\])|(\{)((?:ht|f)tps?:\/\/[a-z0-9\-._~!$&'()*+,;=:\/?#[\]@%]+)(\})|(<|&(?:lt|#60|#x3c);)((?:ht|f)tps?:\/\/[a-z0-9\-._~!$&'()*+,;=:\/?#[\]@%]+)(>|&(?:gt|#62|#x3e);)|((?:^|[^=\s'"\]])\s*['"]?|[^=\s]\s+)(\b(?:ht|f)tps?:\/\/[a-z0-9\-._~!$'()*+,;=:\/?#[\]@%]+(?:(?!&(?:gt|#0*62|#x0*3e);|&(?:amp|apos|quot|#0*3[49]|#x0*2[27]);[.!&',:?;]?(?:[^a-z0-9\-._~!$&'()*+,;=:\/?#[\]@%]|$))&[a-z0-9\-._~!$'()*+,;=:\/?#[\]@%]*)*[a-z0-9\-_~$()*+=\/#[\]@%])/img;
var txt = document.getElementsByClassName('comment-content'),
    i = txt.length;
while (i--) {
    txt[i].innerHTML = txt[i].innerHTML.replace(isUrl, '')
}
/*--- JQuery No needed ---*/
/* Regular Expression di var isUrl, saya dapatkan dari DTE.WEB.ID */

Agar Link Pengomentar Ketika Diklik Terbuka di Tab Baru
Sebenarnya ini bisa saja dilakukan dengan klik-kanan lalu memilih Open New Tab. Tetapi jika ingin ditetapkan pada blog ketika pengunjung mengklik-kiri link tanpa meninggalkan halaman blog, maka berikut caranya.

$(document).ready(function ($) {
    $('.comments .comments-content .user a').click(function () {
        window.open(this.href);
        return false
    })
});  /*--- jQuery required ---*/

Mengganti Teks Menjadi Gambar Emoticon/Smiley
Secara umum pengomentar menyatakan ekspresi mereka dengan teks seperti :) :( :D :P B) dan lain sebagainya. Ini cara agar tulisan tersebut diubahkan menjadi gambar sehingga ekspresi mereka tampil menarik.

$(function(){
 function m(n,o,p){
  $("#comments p").each(function(){
   $(this).html($(this).html()
   .replace(n, " <img src='"+o+"' title='"+p+"' alt='"+p+"' style='vertical-align:-3px;'/> "))
  })
 }
 m(/\s:\)+/g, "http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif", ":)");
 m(/\s:\(/g,"http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif",":(");
 m(/\s:D/g, "http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif", ":D");
 m(/\s:P/ig, "http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif", ":P");
 m(/\sB\)/g, "http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif", "B)");
})
/*--- JQuery required ---*/

Beberapa kode diatas juga bisa anda ubah sesuai keinginan anda bahkan menjadi kegunaan yang lain mungkin? tergantung pada ide anda saja, saya misalkan kode untuk mengubah plain text URL di atas bisa dijadikan agar URLnya menjadi hyperlink atau link hidup. Baiklah, mungkin itu saja dulu yang dapat saya bagikan mengenai cara-cara memanipulasi elemen pada komentar blogger. Jika ada kendala atau perlu bantuan untuk merealisasikan ide anda, boleh ditanyakan melalui komentar.

UPDATE dari saran dan pertanyaan sobat Daniel

Membanned Pengomentar yang suka Spamming
Cara ini akan mengubah link pengomentar serta isi komentar yang Anda anggap spammer menjadi sebuah peringatan. Kode yang sudah saya buatkan di bawah ini bermetode Array supaya tidak perlu repot membuat function yang sama ketika ingin membanned lebih dari 1 spammer, karena jika kode terlalu banyak diduplikat dengan fungsi sama maka akan memperbanyak source dan byte pada halaman anda.
var spamlist=[
 'http://www.blogger.com/profile/123', /* sebagai contoh URL pengomentar */
 'http://nama.blogspot.com/',
 'Alamat URL pengomentar ke-3', /* tambahkan list spammer di bagian sini */
 'Alamat URL pengomentar ke-4'  /* daftar yang terakhir tak perlu diberi koma */
];
for(var v=0; v<spamlist.length; v=v+1){
 $("a[href='"+spamlist[v]+"']").each(function(){
 $(this).closest(".comment-block").find(".comment-content")
 .replaceWith("<B><font color='maroon'>REMOVED COMMENT!</font></B>"),
 $(this).replaceWith("<B><font color='maroon'>BANNED USER!</font></B>");
 })
}
/*--- jQuery required ---*/

Terimakasih kepada orang yang mencopy-paste kode di atas dengan mencantumkan sumber yang salah a.k.a sumber palsu. Di antaranya adalah berikut.
- Blacklist / Banned Komentator Blogger
- Banned Komentator Blogger dengan jQuery
- dan lain-lain
 

Contact Form

Name

Email *

Message *

Recent Comment

Baca artikel lainnya :

Memuat...