Nhiều năm về trước, khi bạn dùng blog với những template đời đầu thì việc bình luận trên trang khá là đơn giản, ngoài cmt văn bản ra thì chả có cái mọe gì. Sau một thập kỷ trôi qua, những đoạn code hỗ trợ như chèn link trực tiếp, hay phờ rồ hơn là code đưa Emoticons đình đám một thời vào khung bình luận.
Đúng là theo thời gian mọi thứ đều dần trở nên tiên tiến mà. Thôi méo dài dòng nữa, cơ mà tại tính tại hạ hay luyên thuyên lắm á. ☹
Như bạn biết, hầu hết các template hiện nay chưa hỗ trợ chèn hình ảnh và video youtube vào bình luận. À trừ mấy cái template đời mới ra nhé, vì những mẫu thế hệ mới không những đã hỗ trợ chức năng này mà còn hơn thế nữa.
Ví dụ: Những mẫu trước 2018, khi muốn chèn ảnh hoặc video youtube vào khung nhận xét thì phải tìm mấy code đã chia sẻ trên mạng, sau đó dùng BBCode như này [img]Link ảnh.png[/img] để bình luận. Đó là cách cũ rồi bạn êy, vì bên dưới đây sẽ là Code chèn hình ảnh, video youtube lên khung bình luận blogspot kiểu mới, code này được áp dụng trên những mẫu thế hệ mới sau 2018 nhá!
Dưới đây là demo và cách thực hiện, bạn có thể xem ảnh dưới hoặc kéo thẳng xuống phần bình luận để coi nhé!
Giải thích dễ hiểu: Thay vì dùng cách cũ như này [img]Link ảnh.png[/img] khi bạn muốn chèn hình ảnh, video youtube thì với cách mới này, bạn chỉ việc dán link ảnh hoặc link video youtube trực tiếp vào khung bình luận luôn.
Để làm được điều đó thì hãy Thêm Tiện ích HTML/JavaScript, cái này nên bỏ vào bên trái hoặc bên phải khung bố cục ý, hoặc trong khung footer.
Như trong ảnh trên được khoanh màu đỏ, mình đã vứt đại nó qua phần bên phải.
Nhớ là phải để trống tiêu đề giống ảnh trên, kế tiếp là copy rồi dán đoạn code dưới đây vào chỗ đó.
<script type="text/javascript">
const img = /\b(http(?:s)?:\/\/\S+(?:png|jpe?g|gif|bmp|svg|tif|webp)\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='100%' height='430' 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>Xong lưu lại và cút ra tự test cmt xem thành quả nhé!
Nếu muốn chèn ảnh thì hãy dùng link trực tiếp như này: Link-ảnh.png hoặc đuôi quần què nào đó, miễn là link ảnh đó phải có đuôi .png .jpg vv... Mình đã sửa tí tẹo, một chút ko đáng kể ở code trên, thêm định dạng ảnh .webp mà code mặc định ko có.
Với phần chèn link video youtube, cách làm cũng tương tự như link ảnh. Chỉ cần cmt link dạng như này: https://www.youtube.com/watch?v=tCYp3rrmf9g Link mà bạn thấy ở thanh địa chỉ trình duyệt.
Chứ méo phải link chia sẻ của youtube kiểu như này: https://youtu.be/tCYp3rrmf9g
Nếu bạn dán link kiểu đó sẽ gây ra lỗi như hình dưới đây.
Hãy để ý kỹ nhé, coi chừng nhầm lẫn link chia sẻ của youtube đấy. 😁
Chúc các bạn thành công. 🤗 Code này đã có một trang chia sẻ nhưng chưa giải thích đầy đủ, vậy nên mới có bài viết này á. 😗
Hashtag: Code chèn hình ảnh, video youtube lên khung bình luận Blogger/Blogspot kiểu mới 2023
Không có nhận xét nào
Đăng nhận xét