Thư viện

Trải nghiệm

Thứ Bảy, tháng 10 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)

    Trả lờiXóa
    Trả lời
    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 > .

      Xóa
    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.

      Xóa
  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!

    Trả lờiXóa
  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!

    Trả lờiXóa
  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

    Trả lờiXóa
    Trả lời
    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

      Xóa
  5. @FairstarBlog này này bạn http://nguyenhaicntt.blogspot.com/

    Trả lờiXóa
  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)

    Trả lờiXóa
  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)

    Trả lờiXóa
  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.

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

    Trả lờiXóa
  10. Bạn ơi...làm cách để đưa hình vào dc

    Trả lờiXóa
    Trả lời
    1. Khi đăng nhận xét dùng code sau:

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

      Xóa
  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

    Trả lờiXóa
    Trả lời
    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

      Xóa
    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/

      Xóa
    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é

      Xóa
    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é

      Xóa
    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.

      Xóa
  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>

    Trả lờiXóa
    Trả lời
    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"

      Xóa
  13. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  14. Trả lời
    1. Blog mình tắt chức năng đó nên không thấy video đâu bạn ak.

      Xóa
  15. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  16. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  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

    Trả lờiXóa
    Trả lời
    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.

      Xóa
  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.

    Trả lờiXóa
  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

    Trả lờiXóa
    Trả lời
    1. Bạn bỏ đoạn này đi nha:

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

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

    Trả lờiXóa