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é
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
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
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
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
Tuyệt vời quá. Các tùy biến khung bình luận như vậy mà kết hợp thêm các Icon Emoji của yahoo thì quá chất nhỉ
Trả lờiXóa[img]http://static-19.sinclairstoryline.com/resources/media/6ffa103a-56cb-4ec7-a528-49306adbfdbf-large16x9_leevernon.jpg?1535392939562%3Cbr%3E%3Cbr[/img]
Trả lờiXóa[youtube]https://www.youtube.com/watch?v=AeoqibKa9mY[/youtube]
Trả lờiXóaTest https://cdn-icons-png.flaticon.com/128/774/774502.png
Trả lờiXóaNhận xét này đã bị tác giả xóa.
Trả lờiXóa