Wednesday, October 17, 2012

Chèn ảnh, video, nhạc vào comment Blogger

Điểm mạnh của blog là tính tương tác giữa người viết và người đọc. Những dẫn chứng dạng chữ chưa đủ tính thuyết phục thì người đọc còn muốn chèn thêm ảnh, video hoặc nhạc. Ở diễn đàn thì việc chèn ảnh, video hay nhạc được thực hiện dễ dàng với BB code, còn Blogger chỉ hỗ trợ 3 thẻ HTML là <b>, <i> và <a> - điều đó chưa đủ làm thỏa mãn bạn? Bài viết này sẽ giúp bạn làm việc đó dễ dàng cho khung comment của Blogger.
Ảnh được chèn từ direct link còn video và nhạc thì từ Youtube và Nhaccuatui dựa vào link trên thanh địa chỉ. Code để chèn cụ thể:

Chèn ảnh:
Link ảnh là http://domain.com/image.png thì code chèn sẽ là

[img]http://domain.com/image.png[/img]

Chèn video từ Youtube:
Link video là http://youtu.be/0nbY7Mg_vMI thì code chèn sẽ là
[youtube]http://youtu.be/0nbY7Mg_vMI[/youtube]

Chèn nhạc từ Nhaccuatui:
Link nhạc là http://www.nhaccuatui.com/nghe?L=6g3kDUIYbvmt thì code chèn sẽ là

[nct]http://www.nhaccuatui.com/nghe?L=6g3kDUIYbvmt[/nct]
Link nhạc là http://www.nhaccuatui.com/nghe?M=B_6M7IcZTz thì code chèn sẽ là
[nct]http://www.nhaccuatui.com/nghe?M=B_6M7IcZTz[/nct]
 Mở template và chèn đoạn mã dưới đây trước thẻ </body> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("comment-holder"); 
theText = bodyText.innerHTML;
theText = theText.replace(/\[img\].*?'.*?\[\/img\]/gi, "");
theText = theText.replace(/\[nct\].*?'.*?\[\/nct\]/gi, "");
theText = theText.replace(/\[youtube\].*?'.*?\[\/youtube\]/gi, "");
theText = theText.replace(/\[img\]/gi, "<div style='clear:both'></div><img style='float:left;margin:10px 0;border:1px solid #DDD;max-width:360px;background:#FFF;padding:4px' src='");
theText = theText.replace(/\[\/img\]/gi, "'/><div style='clear:both'></div>");
theText = theText.replace(/\[youtube\]http:\/\/youtu.be/gi, "<iframe width='350' height='197' src='http://www.youtube.com/embed");
theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='350' height='197' 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>");
theText = theText.replace(/\[nct\]http:\/\/www.nhaccuatui.com\/nghe\?L=/gi, "<div style='overflow:hidden'><embed style='margin-top:-250px;width:300px;height:400px' src='http://www.nhaccuatui.com/l/");
theText = theText.replace(/\[nct\]http:\/\/www.nhaccuatui.com\/nghe\?M=/gi, "<div style='overflow:hidden'><embed style='margin-top:-350px;width:300px;height:400px' src='http://www.nhaccuatui.com/m/");
theText = theText.replace(/\[\/nct\]/gi, "' quality='high' wmode='transparent' type='application/x-shockwave-flash'></embed></div>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
</b:if>
Lưu Mẫu (save template)
Chúc mọi người thành công 
Nguồn: http://namkna.blogspot.com/2011/10/chen-anh-video-nhac-vao-comment-blogger.html 

25 comments:

  1. Còn thiếu phần cài code để sẳn cho khách có thể copie dán vào khung còm .
    Anh xem thêm bên em nè :
    http://namrom64b.blogspot.de/2012/08/cach-chen-anh-video-nhac-vao-comment.html

    ReplyDelete
  2. Cám ơn BT vả Ròm, đọc thấy dễ hiểu hơn !
    Thì ra Blog spot có nhiều function cho mình làm chẳng thua gì Multi

    ReplyDelete
    Replies
    1. Dễ hiểu mà nhờ không làm . Tớ nhờ Từ Thức làm

      Delete
  3. KHó thế . Làm dùm B nhé . Pass B đưa rồi đó

    ReplyDelete
    Replies
    1. Pass có rồi nhưng ko có Gmail để Sign In (đăng nhập) thì cũng như ko thôi.

      Delete
  4. Anh Từ Thức ơi! M đã chèn vào rồi, và đã post được hình, cám ơn anh nhiều lắm nhé, và cám ơn người bạn Namkna của anh nữa, sao lại là Namkna mà không là Nam Kha, lại giấc mông Nam Kha và Từ thức với động hoa vàng... haha

    ReplyDelete
    Replies
    1. Chị M ơi! sao tôi chạy qua post hình trong "Bạn bè" Ngọc Yến Birthday mà vẫn ko được thế?

      Mấy người lăn lộn trong đống mã số cứ thích cắt xén thế đó. chữ 'h' lấy dao phang ngay cái búp của nó nên chỉ còn lại phân nửa khúc sau thành 'n' là thế ,,,, lol

      Delete
  5. Anh Từ Thức ơi! M đã chèn code vào rồi, và đã làm xong.
    Cám ơn anh và người bạn Namkna của anh nhé..

    Ơ! mà sao lại là Namkna mà không là Nam Kha nhỉ?
    Giấc mộng Nam Kha và Từ Thức với động hoa vàng ... hay nhỉ?

    :))

    ReplyDelete
  6. Tại trang đó M vẫn chưa làm, đang làm đc 1 trang, lại quay qua làm việc đó anh.

    M mới bỏ code ở trang chủ thôi anh ạ, anh vào xem entry "bà già đi xe gắn máy.. " hihi là thấy đó, lát rãnh M bỏ tiếp code vào mấy trang kia, cám ơn anh.

    Xin lỗi là viết comment lầnđầu post xong, vừa quay lại kg thấy còm, tưởng mạng trục trặc nên kg có, viết lại lần nữa, hihi không xóa nữa!
    :)

    ReplyDelete
    Replies
    1. Sao chị M làm nhiều trang thế cho mệt. Một trang thôi là đủ mọi đề tài trên thế gian này rồi. hihi (nói cho vui miệng thôi hihih ) ..lol
      Chẳng gì bằng thích chị M nhỉ!

      Delete
    2. Anh TT ơi! Cũng chỉ là một trang thôi mà, chỉ là khi tạo thì M tạo nhiều blog rồi link lại thành 1 trang thôi, anh vào thì thấy đó, chỉ có một trang TTM0123 thôi.. :)

      Delete
  7. Hihi.. M bỏ code vào trang Bạn bè rồi đó anh TT

    Tại trong giờ M đang làm việc, định qua thăm anh báo là sẽ làm sau, nhưng nghĩ ngợi lại làm trước 1 trang, mà post vào trang chủ trước thử thấy được nên chạy qua cám ơn anh đã, bây giờ thì ok rồi đó anh..

    Cám ơn anh TT nhiều nhé, sẽ còn hỏi tiếp nữa.. đừng phiền nhé anh TT ơi!

    ReplyDelete
  8. Từ Thức18:58 Ngày 13 tháng 11 năm 2012

    Chúc mừng chị M đã post được hình ảnh đẹp nhé!
    Khi có giờ chị M làm thêm 3 bài ở dưới để nhà mình trông "hoành tráng" như người ta nhé ...hihhi

    Tiện ích "Bài viết liên quan" cho Blogger, bản nâng cao, có phân trang
    Tiện ích phân trang PageNavi theo kiểu WordPress cho Blogspot
    Tiện ích Auto Readmore Hack with Thumbnail for Blogger


    TTM012319:46 Ngày 13 tháng 11 năm 2012

    Vâng, để tối về, M sẽ vào học cho thuộc anh nhé! hihi
    M đã treo note ở Multiply để cám ơn anh rồi.
    Thanks anh nhiều.

    ReplyDelete
    Replies
    1. Giời ạ! mình đang ở thề kỷ Blogspot rồi mà, ai đời lại ngược về Multiply để gõ mõ gióng chuông chứ ..hihi Lâu mình chưa về đó, nghĩ chắc là nó hoang vằng và tang thương lắm... lol

      Delete
    2. Haha.. vậy mà một số bạn vẫn về đó hàng ngày, treo notes và entries và vẫn có rất nhiều bạn ghé thăm đó anh TT ơi!

      Riêng M thì khi cần thông báo gì thì mới về đó treo notes thôi.. hihi

      Delete
    3. Anh Từ Thức theo nàng Giáng Huơng (Blogspot) về Động Hoa Vàng nên cứ miệt mài ở đó, đâu ngờ dương thế (Multiply) xóm làng vẫn nhộn nhịp như xưa phải không?

      Delete
    4. Đúng như thế đó Hoàng, Nếu chị M ko nói là giăng Note bên Mul. thì cũng ko về đó đâu. Ai ngờ về đó xóm làng vẫn nhộn nhịp vui như hội xuân. Điếu lạ là vẫn có vài người xin Add thế mời chưng hửng chứ.

      Delete
  9. Hôm nay M sẽ bắt đầu học thêm mấy bài anh hướng dẫn đó, nhưng bây giờ bà già cảm thấy đuối sau một ngày vừa làm việc vừa liếc blog rồi anh TT ạ!

    Để khi nào học xong bài nào thì M sẽ báo cho anh biết tiến độ học tập của học trò nhé! hihi

    ReplyDelete
    Replies
    1. Làm việc nhiều thì thế nào cũng có lúc đuối sức thôi.
      Nghỉ ngơi cho khoẻ đợi lúc có hứng thì ra tay chị M nhé!

      Delete
  10. Ban oi , sao minh da làm rôi ...mà chang thây hinh dâu ca ...mà minh chi thây ca môt dong code thôi do ban a ...thê là minh làm di làm lai hoài ...ma hong duoc ban ui !!!

    ReplyDelete
    Replies
    1. Có thể là lỗi nhỏ gì đó mà bạn không phát hiện ra thôi. Nếu làm đúng như hướng dẫn trên thì chắc chắn sẽ được.

      Delete
    2. Ban oi ...co le nhu thê dây , co le minh da làm và co lôi gi do ....nhung minh co thac mac nhu thê này ...co phai minh se chèn han hàng code lên trên the " body " không ? Co nghia là sau khi chèn xong, chung ta se không thây chu " body " nua ? Co phai vây không ban ? Cam on ban da giai dap cho minh hiêu nhé !

      Delete
    3. [img]http://4.bp.blogspot.com/-fB5RmjF3fjY/Ua0NMm623bI/AAAAAAAABIA/Bl9K2Uv4xOE/s1600/Presentation1.jpg[/img]

      Delete