Adding More Formats To The Comments Area

Setelah bergelut dengan praktek-praktek tiada henti, sekarang saatnya berbagi lagi dengan sobat blogger tercinta. Sebelumnya salah satu master blog membuat Threaded Comments System for Blogspot, lalu dia buat lagi hack yang sama kerennya sob :D
Adding images and more text formats to the comments area yang berarti memasukan images, text berwarna, text marquee,...dll. Disana sudah dimodifikasi lagi agar bisa memasukan embed video YouTube.

Verifikasi, ternyata ide hack tutorial ini datang Duy Pham Blog.
Chèn ảnh, video, nhạc vào comment Blogger.
Makanya bila menyadur salah satu postingan itu harus disertakan sumber artikel. Sedikit juga kalau bukan hasil sendiri namanya meniru ;)) Apa sih susahnya menaruh link sumber!!! Malu ya, takut kesaingin :))

Dulu Koben juga pernah memosting Embed Video and image in Blogspot Comments Side, namun prosesnya ribet pakai acara klik terlebih dahulu! Silahkan kunjungi Artistutorial karena versinya tidak ribet.

<script type='text/javascript'>
        //<![CDATA[
/*developed by neechalkaran@gmail.com*/
a=document.getElementById('comments');
if(a){b=a.getElementsByTagName("DD");for(i=0;i<b.length;i++){_str=b.item(i).innerHTML.replace(/\[im\]/gi,"<img src=' ");
_str=_str.replace(/\[im\#\]/gi,"<img width='100%' src='");_str=_str.replace(/\[\/im\]/gi,"' class='image'/>");
_str=_str.replace(/\[ma\]/gi,"<marquee>");_str=_str.replace(/\[\/ma\]/gi,"</marquee>");_str=_str.replace(/\[si\=\"/gi,"<font size='");
_str=_str.replace(/\[\/si\]/gi,"</font>");_str=_str.replace(/\[co=\"/gi,"<font color='");_str=_str.replace(/\[\/co\]/gi,"</font>");
_str=_str.replace(/\"\]/gi,"'>");_str=_str.replace(/\[ce\]/gi,"<center>");_str=_str.replace(/\[\/ce\]/gi,"</center>");
_str=_str.replace(/\[ma\+\]/gi,"<marquee direction='right'>");_str=_str.replace(/\[\/ma\+\]/gi,"</marquee>");_str=_str.replace(/\[box\]/gi,"<table frame='box'><tr><td>");
_str=_str.replace(/\[\/box\]/gi,"</td></tr></table>");_str=_str.replace(/\[mark\]/gi,"<table align='center' frame='vsides' width='70%'><tr align='center'><td>");
_str=_str.replace(/\[\/mark\]/gi,"</td></tr></table>");_str=_str.replace(/\[line\]/gi,"<hr/>");
_str=_str.replace(/\[card\=\"/gi,"<table align='center' border='1' width='75%'><tr><td align='center' bgcolor='");_str=_str.replace(/\[\/card\]/gi,"</td></tr></table>");
_str=_str.replace(/\[hi\=\"/gi,"<span style='background-color:");_str=_str.replace(/\[\/hi\]/gi,"</span>");b.item(i).innerHTML=_str}}
 //]]>
    </script>

/*For adding video in comments body*/
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("multimedia");
theText = bodyText.innerHTML;
theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed/");
theText = theText.replace(/&amp;feature=/gi, "?rel=0' '");
theText = theText.replace(/\[\/youtube\]/gi, "?rel=0' frameborder='0' allowfullscreen></iframe>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
</b:if>

Lihat oleh sobat ada 2 buah javascript disana! Yang atas (warna biru) yaitu berfungsi

Untuk menampilkan Images [im].....[/im]
Untuk scrolling effect [ma]....[/ma]
Membuat huruf dengan ukuran [si="2"]...[/si]
Membikin huruf menjadi berwarna [co="red"]...[/co]
Menjadikan di tengah [ce]...[/ce]
Untuk scrolling effect dari kanan [ma+]...[/ma+]
Kotak effect [box]...[/box]
Mark efek [mark]...[/mark]
Memakai background [card="blue"]...[/card]
Menampilkan Images fit dengan kotak komentar (width=100%) [im#]...[/im]
Menyorot kata dengan warna [hi="yellow"]...[/hi]

JavaScript kedua warna (merah tua) untuk menampilkan embed video dari YouTube.
Proses & cara sudah jelas tertulis di narasumber :D Kalau ada masalah silahkan tulis pada kotak komentar yang tersedia ;))

Beben juga berkomentar terus menerus karena tidak berjalan mulus sob. Lalu praktek, dan diberi contoh oleh master ArtisTutor demo jadinya. Koben lalu gabungkan script yang ada, dan hanya menampilkan beberapa fungsi saja :-/
Jika berniat versi koben, silahkan sobat ikuti langkah-langkahnya.

Download Full Template

Lakukan Expand Widget Templates letakkan JavaScript berikut diatas tag </body>

<script type='text/javascript'>
//<![CDATA[

function replaceText() {
   if (!document.getElementById) {
       return;
   }
   bodyText = document.getElementById("multimedia");
   theText = bodyText.innerHTML;
   theText = theText.replace(/\[img\]/gi, "<img style='margin:5px 0;border:1px solid #aaa;width:100%;background:#FFF;padding:5px' src='");
   theText = theText.replace(/\[\/img\]/gi, "'/>");
   theText = theText.replace(/\[ma\]/gi, "<marquee>");
   theText = theText.replace(/\[\/ma\]/gi, "</marquee>");
   theText = theText.replace(/\[si\=\"/gi, "<font size='");
   theText = theText.replace(/\[\/si\]/gi, "</font>");
   theText = theText.replace(/\[co=\"/gi, "<font color='");
   theText = theText.replace(/\[\/co\]/gi, "</font>");
   theText = theText.replace(/\[hi\=\"/gi, "<span style='background-color:");
   theText = theText.replace(/\[\/hi\]/gi, "</span>");
   theText = theText.replace(/\"\]/gi, "'>");
   theText = theText.replace(/\[youtube\]http:\/\/youtu.be/gi, "<iframe width='400' height='300' src='http://www.youtube.com/embed");
   theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='400' height='300' src='http://www.youtube.com/embed/");
   theText = theText.replace(/&amp;feature=/gi, "?rel=0' '");
   theText = theText.replace(/\[\/youtube\]/gi, "?rel=0' allowfullscreen></iframe>");
   bodyText.innerHTML = theText;
}
replaceText();

//]]>
</script>

Kemudian cari kode<b: loop values='data: post.comments' var='comment'>tepat sebelum kode tersebut (diatas) lakukan tagging dengan kode berikut
<div id='multimedia'>
scroll kebawah temukan penutup tagging </b: loop> dan masukkan tagging penutup
</div>

SAVE.

Ketika akan memberikan komentar, sobat harus melakukan tagging dengan perintah sbb:

• [img]...[/img]
Nampilin gambar.
• [ma]...[/ma]
Efek marquee.
• [si="10"]...[/si]
Huruf dengan ukuran.
• [co="blue"]...[/co]
Huruf berwarna.
• [hi="red"]...[/hi]
Pakai background.
• [youtube]...[/youtube]
Link youtube.

[img]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVAWIFkXRzPL-ah1wwOmCdLYz4LR-H06LPFNI0ZFXoWGCzykKeTGre0vpdIQGJNJaXG5uI5FSoa4sskZHfllhvMCy10GpqXOapQxrAjcHECzpOsochhFqEdaO8QDewZ6PQxE1YHU5ZmuM/[/img]
[ma]This is word with marquee effect[/ma]
[si="10"]Huruf dengan ukuran[/si]
[co="blue"]Huruf pakai warna[/co]
[hi="red"]Huruf dengan latar belakang[/hi]
[youtube]http://www.youtube.com/watch?v=9aaBK4ClQH4[/youtube]

Akan koben tulis diblog ini semua kode diatas untuk melihat demonya.
Good luck and happy blogging \m/