Modify Form Comment : Bài 14 - Media Comment cho blogspot

Mấy bữa nay do bận làm web cho người quen (làm bằng joomla thôi :D) nên mình OFF blog vài bữa, nay xả hởi xíu, dành chút thời gian cho blog. Hôm nay mình sẽ giới thiệu với các bạn cách nâng cấp comment cho blog. Hay nói các khác, giúp cho mình có thể post các dữ liệu media lên blog, ví dụ như : hình ảnh, film, nhạc ...

Thủ thuật này thực ra cũng đã được biết từ lâu với việc chèn bộ ảnh vui nhộn của yahoo vào comment. Do blogspot hạn chế dùng các thẻ HTML trong phần comment, nên chúng ta phải dùng các kí tự cho phép để thay thế các thẻ HTML. Ở bài này ta dùng nhiều đến các kí tự [ và ] để thay thế. Nó gần giống như các thẻ BBcode trong forum.

Thủ thuật này còn có 1 hạn chế (cũng có thể đây là lý do mà ít người dùng nó) đó là khi ta dùng các thẻ thay thế này, trong comment của các bài viết thì sẽ hiển thị được, nhưng ở các tiện ích Recent comment thì nó sẽ hiện ra 1 mớ code lộn xộn, đọc vô sẽ rất khó hiểu. Khắc phục vấn đề này cũng không quá khó, ta có thể loại bỏ các thẻ thay thế này để trả về nội dung dễ hiểu nhất. Mình sẽ hướng dẫn thủ thuật này sau.

Hình ảnh minh họa:

TEST trực tiếp tại đây : http://demo.fandung.com/2011/06/media-comment-for-blogspot.html

A. Sau đây là 1 số tính năng được thêm vào:

1. Cỡ chữ (size) [si]:
- cấu trúc thẻ như bên dưới:

[si="{kích thước chữ}"]{TEXT}[/si]

- Kích thước chữ : ví dụ như 12px, hay 3em ...

2. Màu chữ (color) [co]:
- cấu trúc thẻ như bên dưới:

[co="{mã màu}"]{TEXT}[/co]

- Mã màu : ví dụ như màu đỏ là #f00 hay red ...

3. Canh giữa văn bản (center) [ce]:
- cấu trúc thẻ như bên dưới:

[ce]{TEXT}[/ce]

4. Chạy chữ - mặc đinh là qua trái (marquee) [mar]:
- cấu trúc thẻ như bên dưới:

[mar]{TEXT}[/mar]

5. Chạy chữ - qua phải [mar+]:
- cấu trúc thẻ như bên dưới:

[mar+]{TEXT}[/mar+]

6. Chèn ảnh vào comment [img]:
- cấu trúc thẻ như bên dưới:

[img]{link ảnh}[/img]

7. Chèn video YouTube vào comment [youtube]:
- cấu trúc thẻ như bên dưới:

[youtube]{mã video}[/youtube]

- Ở đây mình đã mặc định kích thước của video là width='350' và height='229', để thay đổi nó bạn có thể tùy chỉnh kích thước của nó ở trong đoạn code javascript mà mình sẽ giới thiệu ở bên dưới.
- Mã video là gì??? ví dụ ta có link youtube như sau : http://www.youtube.com/watch?v=7IM5x3bD5Vg thì giá trị 7IM5x3bD5Vg chính là mã video.
- và như thế ta sẽ có thẻ youtube như sau :

[youtube]7IM5x3bD5Vg[/youtube]

8. Nhúng nhạc từ trang mp3.zing.vn [zmp3]
- cấu trúc thẻ như bên dưới:

[zmp3]{Mã nhúng vào forum được cung cấp từ trang mp3.zing.vn}[/zmp3]

- Ví dụ ta có 1 đoạn mã nhúng vào forum từ trang mp3.zing.vn như bên dưới:

[FLASH]http://static.mp3.zing.vn/skins/mp3_main/flash/player/mp3Player_skin1.swf?xmlurl=http://mp3.zing.vn/blog?MjAxMS8wNS8zMC81LzMvInagaMENTNhMTI1Y2VmMjMzYjQyY2IyODkwY2RkMjU4OTMwNTMdUngWeBXAzfFThdUng4ldUngaCBN4WeBdUngZWeBmd8RMawxqFdUngZyBUmUsICmnhdUng4d1IFWeBFqXx8Mg[/FLASH]

- các bạn chỉ cần thay thẻ [FLASH] thành [zmp3] là có thể hiển thị được trong nội dung comment.

9. Nhúng video từ trang clip.vn [clipvn]
- cấu trúc thẻ như bên dưới:

[clipvn]{Mã nhúng vào forum được cung cấp từ trang clip.vn}[/clipvn]

- Ví dụ ta có 1 đoạn mã nhúng vào forum từ trang clip.vn như bên dưới:

[Flash]http://clip.vn/w/DxnK[/Flash]

- các bạn chỉ cần thay thẻ [FLASH] thành [clipvn] là có thể hiển thị được trong nội dung comment.

10. Nhúng các file flash vào comment [flash]
- cấu trúc thẻ như bên dưới:

[flash]{link file flash}[/flash]

- ở đây mình đã mặc định kích thước cho vùng hiển thi flash (width='400' và height='350') các bạn có thể tùy chỉnh lại trong code javascript.
- ví dụ ta code 1 file flash như sau : http://imgfree.21cn.com/free/flash/61.swf và chèn vào comment sẽ như sau:

[flash]http://imgfree.21cn.com/free/flash/61.swf[/flash]

11. Như vậy mình đã giới thiệu 1 số thẻ thông dụng để chèn vào blog, tuy nhiên sẽ xuất hiện 1 số trường hợp như : nếu ta chèn ảnh vào comment, ví dụ như thẻ [img] ở trên. Nếu ảnh có kích thước lớn hơn vùng hiển thị nội dung comment thì sao? hay muốn chèn 1 số thẻ HTML khác thì sao? sau đây mình sẽ hướng dẫn tiếp dùng cách chèn 1 đoạn HTML vào comment để cho nó hiển thị.
- Ví dụ ta có đoạn code HTML:

<img src="link ảnh" width="400" height="300" />

Khi muốn chèn vào comment, bạn chỉ việc thay thế các kí tự < và > thành [[ và ]]. Ví dụ như :

[[img src="link ảnh" width="400" height="300" /]]

- Nếu như bạn ko thích dùng chuỗi [[ để thay thế thì có thể đổi lại trong code javascript.
- Cách này xem ra có vẻ hơi lâu, nhưng sẽ rất cơ động. Nếu các bạn không muốn thay thế các kí tự trên bằng tay thì có thể copy code vào NotePad rồi dùng lệnh thay thế đồng loạt (Ctrl+H) thì sẽ nhanh hơn nhiều.

B. Sau đây là code của thủ thuật:

- Các bạn chèn đoạn code javascript bên dưới (code 1 hay 2 đều được) vào trong code template (trước thẻ đóng </body>).

Code 1:

<script src='http://data.fandung.com/js/media-comment.js' type='text/javascript'></script>

Code 2:

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

a=document.getElementById('comments');
if(a){b=a.getElementsByTagName("DD");

for(i=0;i<b.length;i++){
_str=b.item(i).innerHTML.replace(/\[img\]/gi,"<img src=' ");
_str=_str.replace(/\[\/img\]/gi,"' class='image'/>");
_str=_str.replace(/\[\[/gi,"<");
_str=_str.replace(/\]\]/gi,">");
_str=_str.replace(/\[mar\]/gi,"<marquee>");
_str=_str.replace(/\[\/mar\]/gi,"</marquee>");
_str=_str.replace(/\[mar\+\]/gi,"<marquee direction='right'>");
_str=_str.replace(/\[\/mar\+\]/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(/\[youtube\]/gi,"<iframe width='350' height='229' src='http://www.youtube.com/embed/");
_str=_str.replace(/\[\/youtube\]/gi,"' frameborder='0' allowfullscreen></iframe>");
_str=_str.replace(/\[zmp3\]/gi,"<embed width='300' height='61' src='");
_str=_str.replace(/\[\/zmp3\]/gi,"' quality='high' wmode='transparent' type='application/x-shockwave-flash'></embed>");
_str=_str.replace(/\[flash\]/gi,"<embed quality=high width='400' height='350' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' src='");
_str=_str.replace(/\[\/flash\]/gi,"'></embed>");
_str=_str.replace(/\[clipvn\]/gi,"<embed type='application/x-shockwave-flash' allowFullScreen='true' allowScriptAccess='always' width='400' height='320' src='");
_str=_str.replace(/\[\/clipvn\]/gi,"'></embed>");
_str=_str.replace(/:\)\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\)\]/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' alt='' class='smiley'/>");
_str = _str.replace(/;\)\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' alt='' class='smiley'/>");
_str = _str.replace(/;\;\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' alt='' class='smiley'/>");
_str = _str.replace(/\;\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' alt='' class='smiley'/>");
_str = _str.replace(/:p/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\(\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' alt='' class='smiley'/>");
_str = _str.replace(/:x/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' alt='' class='smiley'/>");
_str = _str.replace(/=\(\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\-\o/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' alt='' class='smiley'/>");
_str = _str.replace(/:-\//gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' alt='' class='smiley'/>");
_str = _str.replace(/:-\*/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' alt='' class='smiley'/>");
_str = _str.replace(/:\|/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' alt='' class='smiley'/>");
_str = _str.replace(/8-\}/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' alt='' class='smiley'/>");
_str = _str.replace(/~x\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' alt='' class='smiley'/>");
_str = _str.replace(/:-t/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' alt='' class='smiley'/>");
_str = _str.replace(/b-\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' alt='' class='smiley'/>");
_str = _str.replace(/:-\L/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' alt='' class='smiley'/>");
_str = _str.replace(/x\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' alt='' class='smiley'/>");
_str = _str.replace(/\=\)\)/ig,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' alt='' class='smiley'/>");

b.item(i).innerHTML=_str}}
//]]>
</script>

- Save template lại.

Như vậy đã hoàn thành. Chúc các bạn thành công.