Add Image and Video On Thread Comment Blog

Berikut ini adalah cara menambahkan Gambar, Video ,saat berkomentar di dalam blog. Karena dengan begitu Thread Comment serasa lebih hidup, lebih menarik dan atraktif. Untuk gambarnya lihat samping ini.

Lalu bagaimana caranya membuat thread comment bisa support dengan gambar dan Video ?

Caranya dengan menambahkan script dalam template kita. Entah bagaiman cara kerjanya saya kurang begitu tahu, maklumlah bukan master. Mungkin Sobat ada yang tahu cara kerja script ini bisa membantu menjelaskannya.

Berikut Script-nya

function repText(id) {
var a = document.getElementById(id),
b = a.innerHTML;
b = b.replace(/<i rel="image">(.[^\>]*)<\/i>/ig, "<img class='gambar' src='$1' alt='loading...' \/>");
b = b.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='gambar' src='$1' alt='loading...' \/>");
b = b.replace(/<i rel="kode">(.[^>]*)<\/i>/ig, "<kode>$1<\/kode>");
b = b.replace(/\[kode\](.[^\]]*)\[\/kode\]/ig, "<kode>$1<\/kode>");
b = b.replace(/\[video\]http:\/\/www\.youtube\.com\/embed\/(.*?)\[\/video\]/ig, "<iframe class='vidio' src='http://www.youtube.com/embed/$1'><\/iframe>");
b = b.replace(/\[video\](http:\/\/youtu\.be\/|http:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vidio' src='http://www.youtube.com/embed/$2'><\/iframe>");
document.getElementById(id).innerHTML = b;} repText('comment-holder');

Biar thread comment lebih hidup lagi script tersebut ditambahkan dengan yahoo emoticon.

Dan jadinya seperti ini :

/*Yahoo ketawa and image video kode*/
function repText(id) {
var a = document.getElementById(id),
b = a.innerHTML;
b = b.replace(/<i rel="image">(.[^\>]*)<\/i>/ig, "<img class='gambar' src='$1' alt='loading...' \/>");
b = b.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='gambar' src='$1' alt='loading...' \/>");
b = b.replace(/<i rel="kode">(.[^>]*)<\/i>/ig, "<kode>$1<\/kode>");
b = b.replace(/\[kode\](.[^\]]*)\[\/kode\]/ig, "<kode>$1<\/kode>");
b = b.replace(/\[video\]http:\/\/www\.youtube\.com\/embed\/(.*?)\[\/video\]/ig, "<iframe class='vidio' src='http://www.youtube.com/embed/$1'><\/iframe>");
b = b.replace(/\[video\](http:\/\/youtu\.be\/|http:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vidio' src='http://www.youtube.com/embed/$2'><\/iframe>");
document.getElementById(id).innerHTML = b;} repText('comment-holder');

a = document.getElementById('comment-holder');
if (a) {
   b = a.getElementsByTagName("p");
   for (i = 0; i < b.length; i++) {
       if (b.item(i).getAttribute('CLASS') == 'comment-content') {
           u_smiley = b.item(i).innerHTML.replace(/:\)\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>");
           u_smiley = u_smiley.replace(/O:-\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif'/>");
           u_smiley = u_smiley.replace(/:-bd/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/>");
           u_smiley = u_smiley.replace(/7:\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif'/>");
           u_smiley = u_smiley.replace(/2\):\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/>");
           u_smiley = u_smiley.replace(/:\)\]/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>");
           u_smiley = u_smiley.replace(/:$\(/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>");
           u_smiley = u_smiley.replace(/:\(/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>");
           u_smiley = u_smiley.replace(/\;$/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>");
           u_smiley = u_smiley.replace(/:D/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>");
           u_smiley = u_smiley.replace(/\;\;-\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>");
           u_smiley = u_smiley.replace(/7:\P/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/>");
           u_smiley = u_smiley.replace(/~\X$/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>");
           u_smiley = u_smiley.replace(/:-\//gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>");
           u_smiley = u_smiley.replace(/\/:$/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif'/>");
           u_smiley = u_smiley.replace(/:x/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>");
           u_smiley = u_smiley.replace(/:\P/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>");
           u_smiley = u_smiley.replace(/:-\*/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>");
           u_smiley = u_smiley.replace(/=$\(/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>");
           u_smiley = u_smiley.replace(/:-\S\S/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif'/>");
           u_smiley = u_smiley.replace(/:-\O/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>");
           u_smiley = u_smiley.replace(/\X\(/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>");
           u_smiley = u_smiley.replace(/B-$/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/>");
           u_smiley = u_smiley.replace(/\#:-\S/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/>");
           u_smiley = u_smiley.replace(/:-S/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif'/>");
           u_smiley = u_smiley.replace(/:7/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/>");
           u_smiley = u_smiley.replace(/:\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>");
           u_smiley = u_smiley.replace(/$:\|/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif'/>");
           u_smiley = u_smiley.replace(/:\|/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>");
           u_smiley = u_smiley.replace(/=$\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>");
           u_smiley = u_smiley.replace(/:-B/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/>");
           u_smiley = u_smiley.replace(/=\;/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif'/>");
           u_smiley = u_smiley.replace(/:-c/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/>");
           u_smiley = u_smiley.replace(/:-h/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/>");
           u_smiley = u_smiley.replace(/:-t/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>");
           u_smiley = u_smiley.replace(/8-7/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/105.gif'/>");
           u_smiley = u_smiley.replace(/\I-\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/>");
           u_smiley = u_smiley.replace(/8-\|/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/>");
           u_smiley = u_smiley.replace(/\L-\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/>");
           u_smiley = u_smiley.replace(/:-a/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif'/>");
           u_smiley = u_smiley.replace(/:-\$/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/32.gif'/>");
           u_smiley = u_smiley.replace(/\[-$/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif'/>");
           u_smiley = u_smiley.replace(/:\O$/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/34.gif'/>");
           u_smiley = u_smiley.replace(/8-\}/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>");
           u_smiley = u_smiley.replace(/2:-\P/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif'/>");
           u_smiley = u_smiley.replace(/=\P~/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/38.gif'/>");
           u_smiley = u_smiley.replace(/:-\?/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'/>");
           u_smiley = u_smiley.replace(/#-o/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif'/>");
           u_smiley = u_smiley.replace(/=\D7/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/>");
           u_smiley = u_smiley.replace(/\@-\)/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/>");
           u_smiley = u_smiley.replace(/:\^o/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/44.gif'/>");
           u_smiley = u_smiley.replace(/:-w/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/>");
           u_smiley = u_smiley.replace(/\X\_\X/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif'/>");
           u_smiley = u_smiley.replace(/:\!\!/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/>");
           u_smiley = u_smiley.replace(/\\m\//gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/>");
           u_smiley = u_smiley.replace(/:-q/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/>");
           u_smiley = u_smiley.replace(/\^\#\(\^/gi, "<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/>");
           u_smiley = u_smiley.replace(/:ar\!/ig, "<img src='http://l.yimg.com/a/i/us/msg/emoticons/pirate_2.gif'/>")
           b.item(i).innerHTML = u_smiley;
       }
   }
}

Lalu biar lebih praktis script tersebut saya upload di webhosting dan tinggal pasang linknya dalam body

Jadinya seperti ini:
<script src='https://sites.google.com/site/koplaks99/ngakak.js' type='text/javascript'></script>

* Script ini pasang diatas kode </body>

Biar tampilannya dalam area comment lebih menarik berikut kode CSS-nya:
/*comment kode insert image and video*/
#comment-holder kode,#comment-holder i[rel="kode"] {display:block;padding:3px;margin:5px; font-size:11px ;font-style:italic; background:#ddd; color:#000;border:4px double #000; /*mengatur style kode*/
}
#comment-holder .gambar, #comment-holder i[rel="image"] {display:block;background:#ddd;border:4px double #000;margin:0 auto;padding:5px; width:200px; height:150px; /*mengatur style dan besar gambar*/
}
#comment-holder .vidio{display:block;background:#ddd;border:4px double #000;margin:0 auto;padding:5px; width:400px; height:300px; /*mengatur style dan besar video*/
}
/*comment kode end*/

Cara Pemasangannya :

Masuk Ke Edit HTML
Pastekan CSS-nya di atas kode ]]></b:skin>
Pastekan Scriptnya diatas kode </body>
Biar lebih aman download scriptnya disini dan simpan dalam hosting sobat sendiri.

Cara penggunaannya :

Untuk kode Yahoo emoticon
:) :( ;) :D ;;-) :-/ :x :P :-* =(( :-O X( :7 B-) :-S #:-S 7:) :(( :)) :| /:) =)) O:-) :-B =; :-c :)] ~X( :-h :-t 8-7 I-) 8-| L-) :-a :-$ [-( :O) 8- 2:-P (:| =P~ #-o =D7 :-SS @-) :^o :-w 7:P 2):) X_X :!! \m/ :-q :-bd ^#(^ :ar!
Untuk memasukan kode ketik [kode]isi kode[/kode] atau <i rel="kode">isi kode</i>
Untuk memasukan gambar ketik [img]Url Gambar[/img] atau <i rel="image">Url Gambar</i>
Untuk memasukan Video ketik [video]Url Video[/video]