Car Reviews

Auto Show

Sự kiệnThông tinChi tiết
Vietnam Motor Show 20165/10 đến 9/10 tại I.C.E, 91 Trần Hưng Đạo, Hà Nội Tham gia
Vietnam International Motor Show 201626/10 đến 30/10 tại SECC, 799 Nguyễn Văn Linh, Sài Gòn Tham gia

Saturday, October 22, 2011

Chèn ảnh, video, nhạc vào comment Blogger (Update 20/02/2012)

Ảnh được chèn từ link direct 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ể:

Chia sẻ:
Đ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><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ừ link direct 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ể:

Xem Demo

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://www.youtube.com/watch?v=0nbY7Mg_vMI&feature=related thì code chèn sẽ là
[youtube]http://www.youtube.com/watch?v=0nbY7Mg_vMI&feature=related[/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ạclà 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]

Bước 1: 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("multimedia");
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:590px;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='480' height='390' src='http://www.youtube.com/embed");
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>");
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>
Bước 2: Tìm thẻ
<b:loop values='data:post.comments' var='comment'>
và thêm trước nó thẻ
<div id='multimedia'>
Tìm thẻ đóng tương ứng:
</b:loop>
và thêm sau nó thẻ
</div>
- Với một số Blog thì bạn thay đoạn code:
bodyText = document.getElementById("multimedia");
Thành:
bodyText = document.getElementById("Blog1");
Và bỏ qua bước 2.
- Update 20/02/2012: Update ngày 20/02/2012: Đối với các bạn sử dụng Thread Comment mặc định của Blogger (tức là blogspot mới tạo có phân cấp tới cấp 2) thì các bạn thay đoạn code sau:
bodyText = document.getElementById("multimedia");
Thành đoạn sau:
bodyText = document.getElementById("comment-holder");

Luu ý!
Có thể bạn muốn thêm bước 3 là hướng dẫn cho người đọc biết được cách để chèn ảnh, video và nhạc vào nhận xét? Mình để mọi người tự làm bước này.
Dễ nhận thấy thủ thuật này tương tự như bài Emoticons for Blogspot (work in IE) - Biểu tượng mặt cười cho Blogspot. Nếu bạn đã áp dụng thủ thuật đó cho blog rồi thì chỉ cần thêm đoạn mã mình đánh dấu bằng màu tím ở bước 1 vào trước bodyText.innerHTML = theText; trong template và bỏ qua bước 2.
Blog mình không có nhu cầu chèn ảnh hay video ở comment nên không áp dụng thủ thuật này, các bạn có thể test thoải mái ở blog demo.
Chúc thành công!
Theo duypham.

35 nhận xét:

  1. Mình đã làm nhưng không được :K)

    ReplyDelete
    Replies
    1. làm hết bước 2 thì bị lỗi Lỗi khi phân tích cú pháp XML, dòng 2452, cột 3: The element type "body" must be terminated by the matching end-tag < / body > .

      Delete
    2. Do bạn Tìm thẻ đóng tương ứng: </b:loop> không đúng thội làm lại nha bạn.

      Delete
  2. @Nguyễn Duy Hải Bạn lưu ý tìm thẻ đóng </b:loop> tương ứng với thẻ <b:loop values='data:post.comments' var='comment'> ở bên trên. vì 1 template có rất nhiều thẻ đóng </b:loop>.
    Chúc thành công!

    ReplyDelete
  3. @Fairstar
    Nếu làm đúng theo hướng dẫn mà vẫn không được thì bạn bỏ qua bước 2 chỉ tiến hành bước 1. Và tại bước 1 bạn đổi:
    document.getElementById("multimedia");
    Thành
    document.getElementById("Blog1");
    Hoặc thành:
    document.getElementById("cm_block");
    ZDo bạn có 2 blog nên mình không biết bạn áp dụng cho blog nào để nói rõ là đổi multimedia thành Blog1 hay cm_block :3) :3)
    Bạn có thể xác định qua phần in đậm của đoạn code này trong blog:
    <b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'>
    Chúc thành công!

    ReplyDelete
  4. @FairstarLàm sao để xác định b loop đúng được, mình mò từ thẻ mở xong tới đóng, nhưng chỉ sai mỗi chỗ thêm vào sau loop đó thôi

    ReplyDelete
    Replies
    1. hê hê bạn nhớ dòng vd như 2880 thì bạn cứ tìm cho hết code xong nó sẽ quay lại tìm từ đầu thích hợp là sẽ sau dòng 2880 gần nhất

      Delete
  5. @FairstarBlog này này bạn http://nguyenhaicntt.blogspot.com/

    ReplyDelete
  6. @Nguyễn Duy Hải Bạn bỏ qua bước 2 chỉ thực hiện bước 1, tức là chèn trước thẻ /body và đổi multimedia thành Blog1 hay cm_block là Ok :3) :3) :3) :3)

    ReplyDelete
  7. @Nguyễn Duy Hải Bạn kéo từ từ xuống thẻ nằm liền sai thẻ mở là đúng. Nhưng bước này bạn không cần thực hiện đâu. bạn chỉ quan tâm đến bước 1 là OK. :3) :3) :3) :3)

    ReplyDelete
  8. Tóm lại là rất khó thực hiện vì hướng dẫn của bạn vắn tắt quá...cụ thể là không hướng dẫn Mở template ở đâu để dán code vào,clip hướng dẫn cũng không xem được Link bị die rồi.

    ReplyDelete
  9. Mình đã làm được! Cảm ơn Tác giả nhiều lắm!:5) :5) :5) :5)

    ReplyDelete
  10. Bạn ơi...làm cách để đưa hình vào dc

    ReplyDelete
    Replies
    1. Khi đăng nhận xét dùng code sau:

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

      Delete
  11. Giúp mình với Nam Tạ ơi...
    Mình đưa thẻ bên dưới vào...
    Bạn có thể dùng thẻ sau để:
    - Post hình : [img] link hình [/img]
    - Post video: [youtube] link youtube [/youtube]
    Khi minh copy vào thì no' lại ra như bên dưới

    Bạn có thể dùng thẻ sau để:
    - Post hình :



    - Post video: [youtube] link youtube ?rel=0' frameborder='0' allowfullscreen>

    Bạn chỉ giúp mình với nha...thak bạn thật nhìu

    ReplyDelete
    Replies
    1. Mình lấy ví dụ nha:

      [img]http://1.bp.blogspot.com/-4zZFH4isJrc/UKmaQhBHV5I/AAAAAAAAGAE/1f_GH0-3KZc/s1600/banner-namkna-blogspot-com.png[/img]

      [youtube]http://www.youtube.com/watch?v=Zce-QT7MGSE[/youtube]

      Mình test trên blog bạn chạy rất Oke Xem

      Delete
    2. Nhớ là giữa URL của ảnh và video không có dấu cách với các thẻ: [img] và [youtube] như trên nha/

      Delete
    3. Đưa hình vào thì mình bít rùi...nhưng mình mún đưa code vào phía dưới...khj người ta ghé thăm mún gửi hình thì có sẵn code để gửi đó....
      mình làm rùi...nhưng nó hiện ra ko giống của mọi người...giúp mình nhé

      Delete
    4. Đưa hình vào thì mình bít rùi...nhưng mình mún đưa code vào phía dưới...khj người ta ghé thăm mún gửi hình thì có sẵn code để gửi đó....
      mình làm rùi...nhưng nó hiện ra ko giống của mọi người...giúp mình nhé

      Delete
    5. Bạn vào phần Cài đặt - bài đăng và nhận xét - Ghi chú nhận xét và đán code vào nha.

      Delete
  12. Làm gì có ghi chú và nhận xét...chỉ có Thư thông báo mẫu nhận xét...
    Mình dán code nào đó...lưu rùi...thì nó ra y như mình nói phía trên đấy

    đây là kết wả đấy... như zậy sao ng` khác gửi hình dc

    Bạn có thể dùng thẻ sau để:
    - Post hình :



    - Post video: [youtube] link youtube ?rel=0' frameborder='0' allowfullscreen>

    ReplyDelete
    Replies
    1. Bạn có thể thay code bước 1 thành đoạn code sau:

      https://scipt-namkna.googlecode.com/svn/trunk/mat-cuoi-nhan-xet-namkna.txt

      Với code mới này không cần sử dụng thẻ [img] và [youtobe] mà link ảnh sẽ trực tiếp được nhận diện. như vậy trong phần hướng dẫn bạn có thể chỉ cần viết "post link ảnh vào comment"

      Delete
  13. This comment has been removed by a blog administrator.

    ReplyDelete
  14. Replies
    1. Blog mình tắt chức năng đó nên không thấy video đâu bạn ak.

      Delete
  15. This comment has been removed by a blog administrator.

    ReplyDelete
  16. This comment has been removed by a blog administrator.

    ReplyDelete
  17. Nam giúp minh cái này được ko? Khi sử dụng các themes mình thường gặp tình trạng căn lề phải của ảnh có chú thích và ko có chú thích lệch nhau nên trông rất xấu. Mình không biết vào đâu để khắc phục cái này.

    Hiện mình chỉ biết cách chỉnh sửa đoạn code bạn cho: .post img {
    width:450px;
    height:auto;
    padding:0px;
    } nhưng ko ăn thua

    ReplyDelete
    Replies
    1. Bạn có thể dùng đoạn code bên dưới:

      .post img {
      width:450px;
      height:auto;
      padding:0px;
      margin: 0 auto;
      }

      Nếu vẫn không được thì để lại link bài viết gặp lỗi đó để mình kiểm tra nha.

      Delete
  18. Không có tác dụng Nam ơi. Bạn xem trang của mình: kinhnghiemdulichnhatrang.net
    Ý mình là khi đăng ảnh thì cái có chú thích và ko có chú thích bên dưới sẽ bị lệch nhau cả lề phải và trái nha. Bạn kiểm tra giúp mình cái blog này.

    ReplyDelete
  19. Ví dụ luôn cái link này cho bạn dễ tìm: http://www.kinhnghiemdulichnhatrang.net/2014/06/ban-o-du-lich-nha-trang-minh-hoa.html

    Bạn xem, cái ảnh khôn có chú thích sẽ bị thụt vào so với ảnh có chú thích. Lề không căn thẳng nhau.

    Để khắc phục, mình thường phải viết chút thích tất cả ảnh hoặc bỏ tất cả chú thích cho nó thẳng hàng nhau rất bất tiện vì có cái ko muốn chú thích

    ReplyDelete
    Replies
    1. Bạn bỏ đoạn này đi nha:

      .post-body img {
      padding: 8px;
      }

      Delete
  20. [img]https://lh5.googleusercontent.com/proxy/1ETs7gLsEKJFa3iTCkSbT6Oq31_6ng_ttiO3T5K6qnQ9x6Yipzq81iP61nYfRLshIDOpahRlgAMDwNO37IxbW-607MYaKIgCbMs0u8PXQ-ky=s0-d[/img]

    ReplyDelete