Chèn ảnh, video từ Youtube vào phần nhận xét mặc định của Blogspot

Nếu bạn có theo dõi Blog của mình từ rất lâu thì lúc đó mình có cho phép đăng nhận xét bằng hình ảnh, video, mặt cười,... Bằng cách sử dụng javacsript hàm replace, thay link ảnh bằng đoạn mã HTML để hiển thị ra nội dung mình mong muốn.

Nếu như bình luận bằng chữ đơn thuần không đủ dẫn chứng và thuyết phục, vì vậy biện pháp tốt nhất là thêm cả hình ảnh minh họa kèm theo sẽ phần nào thuyết phục được người khác.
Tính năng này chỉ cho phép upload hình ảnh từ bên thứ 3 lên thôi chứ không upload ảnh trực tiếp từ máy tính lên như Facebook hay Zalo được, vì Blogspot không cho phép làm điều đó. Vì vậy khi sử dụng, bạn cần phải upload hình ảnh lên 1 host nào đó trước (khuyến khích dùng host Imgur), rồi copy link ảnh và chèn vào phần nhận xét thì ảnh mới hiện.
LIVE DEMO

Cách thực hiện

Chèn tất cả javascript bên dưới vào trước thẻ </body> trong template.
<b:if cond='data:view.isPost'>
<!-- chỉ áp dụng cho trang bài viết -->
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("comments");
theText = bodyText.innerHTML;
theText = theText.replace(/\[img\].*?'.*?\[\/img\]/gi, "");
theText = theText.replace(/\[youtube\].*?'.*?\[\/youtube\]/gi, "");
theText = theText.replace(/\[img\]/gi, "<div style='clear:both'></div><img class='bsw-imgs' src='");
theText = theText.replace(/\[\/img\]/gi, "'/><div style='clear:both'></div>");
theText = theText.replace(/\[youtube\]http:\/\/youtu.be/gi, "<iframe width='100%' height='400' 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>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
<!-- bacsiwindows.com -->
</b:if>
và lưu lại.

Cách sử dụng

Để chèn hình ảnh, khi đăng nhận xét bạn nhập như sau:
[img]https://i.imgur.com/iWCv1nv.png[/img]
Để chèn video từ Youtube, bạn nhập như sau:
[youtube]https://www.youtube.com/watch?v=32sYGCOYJUM[/youtube]

P/s: Blog của mình không sử dụng chức năng này, bạn có thể test thoải mái trên blog demo này.
Nhớ bấm "Thông báo cho tôi" bên trên để nhận thông báo qua Email khi Admin trả lời nhé.
  • Đây là khu vực quản trị, bạn không có quyền truy cập vào!
    1. Test thử cái YouTube nghen gái :v

      [youtube]https://www.youtube.com/watch?v=LjHck3S2b1U[/youtube]

      Trả lờiXóa
    2. Quát đờ phứt, sao ko được, chèn thử cái hình :3

      [img]https://i.imgur.com/iWCv1nv.png[/img]

      Trả lờiXóa
      Trả lời
      1. Vậy là được rồi đó anh :v tại em không để ảnh hiện ra luôn mà để link vậy, bấm vô mới ra ảnh.

        Xóa
      2. Có link demo trên bài viết đó anh.

        Xóa
    3. Lại ko được :3 | Giống ngày xưa gái test chèn ảnh vào Hocban.vn mãi ko được, cuối cùng nghía ra là chỉ có thành viên mới chèn được. Cái này chắc chắn được, mà bị gì rồi, gái coi lại thử.

      Trả lờiXóa
    4. Nặc danh11:32 9/7/18

      a bsw ơi , blog e bị sao í , click vào bài viết nó nhảy ra quảng cáo rất phiền phức , có cách khắc phục k a ?

      Trả lờiXóa
    5. Bạn ơi mình có chèn thử video trên youtube xuất hiện lỗi như này fix như nào ạ ?
      [img]https://i.imgur.com/HwoX3Bn.png[/img]

      Trả lờiXóa
    6. làm sao để đổi màu chữ trong khung chứa code vậy ?

      Trả lờiXóa
      Trả lời
      1. ý là đổi màu trong đoạn code :v đấy

        Xóa
      2. Muốn đổi màu gì thì tô đen code rồi chọn màu thôi :))

        Xóa
      3. Đùa chứ rảnh viết bài cho, đang bận làm cái project.

        Xóa
    7. [img]https://i.imgur.com/iWCv1nv.png[/img]

      Trả lờiXóa
    8. Bên em chèn rồi mà nó ra chữ xem ảnh như trên á :((

      Trả lờiXóa
      Trả lời
      1. Đâu, code của anh vẫn ra ảnh luôn mà.

        Xóa
      2. https://uphinhnhanh.com/image/1HcYx0
        :((

        Xóa
      3. Xem trong template còn code nào tương tự không và xóa đi, trước đây template cũ của anh cũng có sử dụng.

        Xóa
      4. Sao của anh Cường khỏi cần thẻ [img] vậy a

        Xóa
      5. Do Cường dùng thread comment bản cũ nhe em.

        Xóa
    9. bác ko chơi adsen hả :v

      Trả lờiXóa
    10. Bày làm khung code đê :)))

      Trả lờiXóa
    11. Cho em xin js emo với anh Trường Đz :p

      Trả lờiXóa
    12. Thank bạn. Mình chèn hình ok rồi nhưng lỗi phần chèn video youtube

      Trả lờiXóa