Loading post navigation ...
 
 

Pro page

35
Nhận xét

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

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

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ự [] để 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'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'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ự <> thành [[]]. 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.


Enter your mail address:

35

May Thy

Oh tiện ích quá, cảm ơn Phan Dũng nhiều nha!

Nam Ka

Cám ơn Phan Dũng nhiều nha, thật là tiện lợi. Mà cái này có chèn thêm Link liên kết vào chữ luôn không bạn.

Nam Ka

Cảm ơn Phan Dũng nhiều nha, thật là tiện lợi. Mà cái này có chèn Link liên kết vào chữ lun ko vậy bạn ?

Điện Tử ChipKool

Anh Dũng ak.Cái này bên Code1k.com cũng hướng dẫn làm,nhưng không bằng anh.hihi.hay lắm.thank anh

Lê Trương Vĩnh Trung

Bên blog duy phạm có hướng dẫn làm cái này, nhưng ko nhìu bằng của anh FD, tks nhìu ạ :D

Phan Dũng

mới xem blog duy phạm xong, hình như cũng đang có ý định viết thủ thuật blogger giống mình. Hy vọng sẽ có nhiều thủ thuật mới và lạ cho cộng đồng.

Khách (ẩn danh)

Bài này có vẻ khá trùng lắp với Blog Duy Phạm anh Dũng ơi. Tuy nhiên, văn phong thì khác nhau. Có nhiều người đóng góp vào Blogspot Việt nên giờ thấy vui ghê (nhưng cũng làm em lười hơn ^_^)

Phan Dũng

thực ra cái này cũng cũ rồi, bữa nay rảnh nên ngồi soạn lại, không ngờ cũng gần thời điểm với Duy Phạm post. Đọc comment mình mới biết đó chứ. Với lại cách làm của Duy Phạm hơi khác chút xíu, còn mình thì vẫn giữ kiểu như cách chèn hình vui nhộn, chỉ có điều thêm vô chút thôi.

Khanh Nguyen

Sao khong ai Test het nhi?
De minh Test mo hang cai coi:
[youtube]­6PKQE8FM2U[/youtube]

Khanh Nguyen

Chuyen gi da xay ra?? :-o

Phan Dũng

@Khanh Nguyen: bạn ko đọc kĩ bài viết rồi, mình có dẫn link tới trang test mà, ở blog chính này mình ko có dùng thủ thuật này.

Khanh Nguyen

Oh KN thấy rồi, Sorry FD nhé!

Trường Anh Bùi

Bài viết hay, cảm ơn bác.

Tiếng Khmer Online

Cái này rất hay, mình đang cần nó! Thanks!

Violet ♥

Anh chỉ em làm pop-up hướng dẫn sử dụng comment media đc ko ạ :D dạng như "các thẻ có thể sử dụng" mà trong trang pop-up đấy, để khi ng ta comment, ng ta biết dùng thẻ nào ạ :D

Phan Dũng

@Violet ♥: bạn có thể xem bài này, mình đã hướng dẫn ở bên mothuthuat, nhưng chưa post lại bên này.
http://mothuthuat.com/blogspot-div-layer-dang-popup-cho-blospot.html

@Ngân: Đúng rồi Ngân, cái này phải nói là cũ lắm rồi, giờ mình chỉ post lại thôi. mình cũng chỉ dùng cách cũ để làm thôi. Cách này nhất thiết phải để blog load xong mới chạy được, do nó phải tìm id comment nữa. còn cách load ngay của Ngân mình cũng hình dung ra được, tức là phần nội dung của comment sẽ được javascript xử lý trước rồi mới cho hiển thị, vậy nên nó chậm cũng phải. mà blog của Ngân nhiều comment, dùng cách này xem ra chậm lắm.

KeChuyen

PhanDung ơi, KeChuyen có góp ý nhỏ. Hầu hết các trang đều cho dạng Flash: NCT, Zing, Youtube. vậy sao không cho chung thành 1 dạng, ví dụ như [flash][/flash]. KeChuyen nghĩ sẽ tiện hơn. :) Bạn nghĩ sao?

Phim Online

minh muốn nó hiện trên bài viết thì làm thế nào vậy :(

NAD

Vietutd là ng` khởi động thủ thuật này ở VN, hay vãi lều :D

Phan Dũng

@NAD: anh Vietutd cũng là 1 dân pro về javascript, tiếc là a ko viết thủ thuật cho blog, không thì cũng nhiều thủ thuật hay

Phan Dũng

@Ke Chuyen: cái này mình cũng đã nghĩ, nhưng ở mỗi trang nó dùng 1 trình flash riêng, và kích thước khác nhau, nên không tiện cho chúng ta dùng chung. nếu dùng chung thì các flash này sẽ có cùng kích thước nhìn ko đẹp lắm.

@Phim Online : muốn hiển thị trên bài viết thì bạn chèn code bình thường mà, code mà nó cung cấp để nhúng vào blog đó bạn

Phim Online

mình áp dụng nó chỉ hiện trên comment thôi chứ ko thực hiện dc ở bài viết :(

Unknown

cái này rất hay thanks a dũng nhìu

Bao An Angel

test cái nè :D

[youtube]5cW-OYqjtQA[/youtube]

Unknown

http://data.fandung.com/js/media-comment.js
cái này k hoạt động nè bác :D

Admin

Sao không hoạt động nhỉ :(
http://www.xemtruyen.net/2011/09/truyen-ngan-bong-hong-khong-canh.html?showComment=1316851421888#c4776572267691378142

Phan Dũng

[quote=Admin name=fdquote]Sao không hoạt động nhỉ
http://www.xemtruyen.net/2011/09/truyen-ngan-bong-hong-khong-canh.html?showComment=1316851421888#c4776572267691378142[/quote]
hình như blog của bạn chưa có script thay thế mà, bạn chèn link bên dưới vào code template

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

Điện Tử ChipKool

anh Dũng ak,trong code em thấy lắm linh ảnh emoticon là sao anh,em ko hiểu?nếu bỏ linh emotion có sao ko?

Unknown

code bị sao thế, sao em add vào nó không chạy nhỉ???
em đã thử [mar]TEXT[/mar] nhưng không được.

Nguyễn Phước Hải

Hi fandung!
minh đã làm y chang như vậy nhưng comment vẫn không thấy ảnh hay youtube
mong bạn xem lại code có lổi gì không!

Minh

Hình như code này không hoạt động nữa rồi Dũng ơi!

Unknown

BAC DUNG CUNG TAI NHA MOI BABC DUNG GHE THAM
http://www.boxgiaitri.net/
VA CHO Y KIEN

Gamer

làm hoài vẫn k hiện ra cái gì~x( e thử 2 code lun rồi đó a Dũng ơi

Minh Tâm
jake

Your idea coincides with mine.and I think it's better.

______________________________________________________________

Rc Hobby Stores|Rc Helicopter|Mini Rc Helicopter



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home