Chèn hình ảnh và video youtube lên khung bình luận blogspot

Tình cờ mình phát hiện được ở phần comment của blog có thể tùy biến cho phép chèn được hình ảnh hay video youtube rất ấn tượng. Thế nên mình đã quyết tìm hiểu để làm sao có thể hiện thực hóa mẹo nhỏ này lên blog của mình. Và kết quả cũng đã có lời giải đáp.

Thực ra điều này cũng không có mới mẻ gì vì một số template đã có tích hợp luôn chức năng comment bá đạo này vào blog rồi. Các bạn chỉ việc dùng thôi chứ chẳng cần quan tâm đến code gì cho mệt đầu. Mình đã test thử rồi trên một số template như mẫu blogger monal hay mẫu theme magazine Gmag mà mình đã có chia sẽ ở phần trước. Các bạn có thể tham khảo và tải về để trải nghiệm chức năng tuyệt vời này nhé

HÌnh ảnh sau khi chèn vào khung bình luận đã hiển thị rõ ràng

Video chèn vào khung bình luận blogger

So với cách chèn cũ là các bạn phải chèn hình ảnh vào thẻ: [img]Link-ảnh-chèn[/img] mới được. Cách này hay hơn ở chỗ các bạn có thể paste link ảnh hay link video trực tiếp vào khung bình luận luôn. Thật là tiện lợi phải không nào. Các bạn có thể xem cách làm cũ ở đây để so sánh: chèn hình ảnh vào khung comment blogger

Mình sẽ đi thẳng vào vấn đề chính luôn nhé. Đó là cách thực hiện để có thể chèn link trần trực tiếp lên mục bình luận luôn

Cách bạn thực hiện như sau:

1. Đăng nhập vào trang blogger cần chỉnh - Chọn Thiết kế - Vào phần Bố cục ( layout )
2. Nhấp "Thêm tiện ích" trong khung sidebar (bên phải hoặc bên trái khung bài đăng) hoặc trong khung footer ở phía dưới giao diện bố cục.
3. Nhấp chọn tiện ích HTML/JavaScript, để trống tiêu đề, chép hết đoạn code bên dưới xong lưu lại

<script type="text/javascript">
    const img = /\b(http(?:s)?:\/\/\S+(?:png|jpe?g|gif|bmp|svg|tif)\S*)\b/gi,
              ytb = /(http:|https:)?\/\/(www\.)?(youtube.com|youtu.be)\/(watch)?(\?v=)?(\S+)?/gi;
    for (var cmts = document.getElementsByClassName("comment-content"), i = 0; i < cmts.length; i++) {
        var a = cmts[i].innerHTML;
        if (img.test(a))
            for (var c = a.match(img), j = 0; j < c.length; j++) a = a.replace(c[j], "<img src='" + c[j] + "'/>");
        if (ytb.test(a))
            for (var d = a.match(ytb), k = 0; k < d.length; k++) a = a.replace(d[k], "<div class='embed'><iframe width='490' height='276' src='https://www.youtube.com/embed/" + d[k].split("=")[1] + "' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen=''></iframe></div>");
        cmts[i].innerHTML = a
    }
</script>

4. Vào lại blog chính để kiểm chứng thành qủa vừa làm xong

CHúc các bạn làm thành công