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.
TEST trực tiếp tại đây : http://demo.fandung.com/2011/06/media-comment-for-blogspot.html
- cấu trúc thẻ như bên dưới:
2. Màu chữ (color) [co]:
- cấu trúc thẻ như bên dưới:
3. Canh giữa văn bản (center) [ce]:
- cấu trúc thẻ như bên dưới:
4. Chạy chữ - mặc đinh là qua trái (marquee) [mar]:
- cấu trúc thẻ như bên dưới:
5. Chạy chữ - qua phải [mar+]:
- cấu trúc thẻ như bên dưới:
6. Chèn ảnh vào comment [img]:
- cấu trúc thẻ như bên dưới:
7. Chèn video YouTube vào comment [youtube]:
- cấu trúc thẻ như 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 :
8. Nhúng nhạc từ trang mp3.zing.vn [zmp3]
- cấu trúc thẻ như bên dưới:
9. Nhúng video từ trang clip.vn [clipvn]
- cấu trúc thẻ như bên dưới:
10. Nhúng các file flash vào comment [flash]
- cấu trúc thẻ như bên dưới:
- 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:
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:
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ư :
- 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.
//<![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.
Oh tiện ích quá, cảm ơn Phan Dũng nhiều nha!
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.
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 ?
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
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
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.
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 ^_^)
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.
Sao khong ai Test het nhi?
De minh Test mo hang cai coi:
[youtube]6PKQE8FM2U[/youtube]
Chuyen gi da xay ra?? :-o
@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.
Oh KN thấy rồi, Sorry FD nhé!
Bài viết hay, cảm ơn bác.
Cái này rất hay, mình đang cần nó! Thanks!
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
@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.
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?
minh muốn nó hiện trên bài viết thì làm thế nào vậy :(
Vietutd là ng` khởi động thủ thuật này ở VN, hay vãi lều :D
@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
@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
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 :(
cái này rất hay thanks a dũng nhìu
test cái nè :D
[youtube]5cW-OYqjtQA[/youtube]
http://data.fandung.com/js/media-comment.js
cái này k hoạt động nè bác :D
Sao không hoạt động nhỉ :(
http://www.xemtruyen.net/2011/09/truyen-ngan-bong-hong-khong-canh.html?showComment=1316851421888#c4776572267691378142
[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>
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?
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.
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!
Hình như code này không hoạt động nữa rồi Dũng ơi!
BAC DUNG CUNG TAI NHA MOI BABC DUNG GHE THAM
http://www.boxgiaitri.net/
VA CHO Y KIEN
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
Your idea coincides with mine.and I think it's better.
______________________________________________________________
Rc Hobby Stores|Rc Helicopter|Mini Rc Helicopter
» 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.