Chèn hình: Copy link hình ảnh dán vào nội dung bình luận
Chèn video: Copy link video youtube vào nội dung bình luận
Demo: Xem trực tiếp bình luận bài viết này
Các bước thực hiện như sau:
Bước 1: Thêm CSS trước thẻ đóng ]]></b:skin>
Also Read :Template blogspot được yêu thích nhất
.comment-content .responsive-video-wrap{position:relative;width:100%;padding:0;padding-top:56%}.comment-content .responsive-video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%}.comment-content img{max-width:100%}
Bước 2: Thêm đoạn JS trước thẻ đóng </body>
<script>//<![CDATA[! function(e) {e.fn.replaceText = function(n, t, i) {return this.each(function() {var o, r, l = this.firstChild,u = [];if (l)do {3 === l.nodeType && (r = (o = l.nodeValue).replace(n, t)) !== o && (!i && /</.test(r) ? (e(l).before(r), u.push(l)) : l.nodeValue = r)} while (l = l.nextSibling);u.length && e(u).remove()})}}(jQuery);$("p.comment-content").each(function() {var e = $(this);e.replaceText(/(https:\/\/\S+(\.png|\.jpeg|\.jpg|\.gif))/g, '<img src="$1"/>'), e.replaceText(/(?:https:\/\/)?(?:www\.)?(?:youtube\.com)\/(?:watch\?v=)?(.+)/g, '<div class="responsive-video-wrap"><iframe id="youtube" width="100%" height="358" src="https://www.youtube.com/embed/$1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>')})//]]></script>
Xong bạn lưu lại và kiểm tra kết quả
Also Read :Khuyến mãi Template blogspot
Đoạn code trên chỉ áp dụng với đuôi ảnh chữ thường, áp dụng cho cả chữ in hoa bạn dùng code này
<script>//<![CDATA[! function(e) {e.fn.replaceText = function(n, t, i) {return this.each(function() {var o, r, l = this.firstChild,u = [];if (l)do {3 === l.nodeType && (r = (o = l.nodeValue).replace(n, t)) !== o && (!i && /</.test(r) ? (e(l).before(r), u.push(l)) : l.nodeValue = r)} while (l = l.nextSibling);u.length && e(u).remove()})}}(jQuery);$("p.comment-content").each(function() {var e = $(this);e.replaceText(/(https:\/\/\S+(\.png|\.jpeg|\.jpg|\.gif|\.PNG|\.JPEG|\.JPG|\.GIF))/g, '<img src="$1"/>'), e.replaceText(/(?:https:\/\/)?(?:www\.)?(?:youtube\.com)\/(?:watch\?v=)?(.+)/g, '<div class="responsive-video-wrap"><iframe id="youtube" width="100%" height="358" src="https://www.youtube.com/embed/$1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>')})//]]></script>
Để replaceText thành icon các bạn gõ thêm
e.replaceText(':))', '<img src="link icon 1"/>'),
e.replaceText(':)', '<img src="link icon 2"/>'),
e.replaceText(':D', '<img src="link icon 3"/>'),
e.replaceText(':P', '<img src="link icon 4"/>'),
e.replaceText(':(', '<img src="link icon 5"/>'),
e.replaceText('ký tự', '<img src="link icon 6"/>')
Code trên với code dưới cách nhau bằng dấu phẩy
