{icon: "twitter", url: "#"} {icon: "instagram", url: "#"} {icon: "linkedin", url: "#"} {icon: "youtube", url: "/youtube"} {icon: "vk", url: "#"} {icon: "behance", url: "#"} {icon: "stack-overflow", url: "#"} {icon: "dribbble", url: "#"} {icon: "rss", url: "#"}
Bình luận mới nhất
Chưa có thông báo mới.
Excitement Post
Entity Stack SEO
Home BLOGGER CSS HTML JAVASCRIPT

Cải thiện bình luận trên Blogger, Thêm hình ảnh và video

Cải thiện bình luận trên Blogger, Thêm hình ảnh và video
Lê Hùng ™
Lê Hùng ™
---
Chào mọi người, bài viết này mình chia sẽ đến mọi người một thủ thuật đã lâu, về việc đặt hình ảnh, video youtube, thẻ code pre đơn giản cho những blog chia sẽ thủ thuật lập trình hay tiện ích khác.
Thủ thuật nâng cấp khung bình luận blogger về việc thêm hình ảnh, video youtube, khung chứa code html, css, javascript...v.v.

Khung bình luận của blogger thô sơ tới nỗi chèn vài thẻ html cơ bản vào cũng bị cấm, vì vậy không còn cách nào khác ta cần tạo các short code và sử dụng js để chuyển chúng về tag html. Nói vậy có nghĩa không chỉ có ảnh (thẻ img), video (thẻ iframe), syntax code (thẻ pre) mà với bất kì thẻ html cơ bản nào ta đều có thể dùng js để biến đổi được

Trong bài viết này tôi sử dụng SyntaxHighlighter 3.0.83 (theme Eclipse, 3 module js-html-css) phục vụ cho làm đẹp code và fancybox 3.3.5 phục vụ cho việc xem ảnh trong khung bình luận ở chế độ lightbox. Và đương nhiên điều kiện bắt buộc là bạn không tắt blogger comment trên trang của mình
Đầu tiên mọi người đăng nhập vào trang quản trị và vào mục chỉnh sửa HTML Tìm tới <b:includable id='threaded_comments' var='post'> mở rộng nó ra và chèn code js vào SAU <div class='comments-content'> như hình bên dưới.
Tiếp đó mọi người đặt đoạn code bên dưới vào sau thẻ trên.
<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js'/>

<!-- Custom Theme for SyntaxHighlighter : http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/ -->
<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreEclipse.min.css' rel='stylesheet' type='text/css'/>
<link href='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeEclipse.min.css' rel='stylesheet' type='text/css'/>

<!-- Module for SyntaxHighlighter : http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ -->
<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.min.js'/>

<!-- Required for fancybox -->
<link href='//cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
function smartComment() {
    a = document.getElementById("comment-holder");
    b = a.innerHTML;
    b = b.replace(/\[pre\]/gi, "<pre>");
    b = b.replace(/\[pre js\]/gi, "<pre class='brush:js'>");
    b = b.replace(/\[pre html\]/gi, "<pre class='brush:html'>");
    b = b.replace(/\[pre css\]/gi, "<pre class='brush:css'>");
    b = b.replace(/\[\/pre\]/gi, "</pre>");
    b = b.replace(/\[img\].*?'.*?\[\/img\]/gi, "");
    b = b.replace(/\[img\]/gi, "<img data-fancybox='gallery' src='");
    b = b.replace(/\[\/img\]/gi, "'/>");
    b = b.replace(/\[youtube\].*?'.*?\[\/youtube\]/gi, "");
    b = b.replace(/\[youtube\]https:\/\/youtu.be/gi, "<iframe width='560' height='315' src='https://www.youtube.com/embed");
    b = b.replace(/\[youtube\]https:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='560' height='315' src='https://www.youtube.com/embed/");
    b = b.replace(/&amp;feature=/gi, "?rel=0' '");
    b = b.replace(/\[\/youtube\]/gi, "?rel=0' frameborder='0' allowfullscreen></iframe>");
    a.innerHTML = b
}
smartComment();

$("#comment-holder img").each(function() {
    $(this).attr('data-src', $(this).attr("src"));
});

SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();

$(window).on('load', function() {
    var t = document.createElement("script");
    t.src = "//cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js";
    document.body.appendChild(t);
    $("#comment-holder img[data-fancybox]").fancybox();
});
//]]></script>

Trong đó

  • Ảnh và video bạn không cần chỉnh sửa gì
  • Themes cho SyntaxHighlighter bạn lấy list tại http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/ và lấy link nhúng tại https://cdnjs.com/libraries/SyntaxHighlighter
  • Phần short code bạn có thể tùy chỉnh thêm bớt các module. Lấy list module tại http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ và lấy link nhúng tại https://cdnjs.com/libraries/SyntaxHighlighter
Ví dụ tôi muốn thêm syntax cho code php thì phải thêm link nhúng.

<script src='//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPhp.min.js'/>
.

và tạo thêm short code
b = b.replace(/\[pre php\]/gi, "<pre class='brush:php'>"); 

 Phần màu đỏ là short code bạn tự tạo tùy thích, phần màu xanh phải chuẩn Brush aliases của SyntaxHighlighter không code nó không làm đẹp đâu nhé

Theo đó với code trình bày ở trên các short code khi bình luận sẽ là

  • chèn ảnh: [img]link ảnh[/img]
  • chèn video youtube: [youtube]link video[/youtube]
  • chèn code HTML: [pre html]code[/pre]
  • chèn code CSS: [pre css]code css[/pre]
    chèn code JS: [pre js]code js[/pre]

    ... (bạn có thể thêm các module syntax tùy theo mục đích sử dụng)
    Link ảnh: là link dạng trực tiếp ví dụ https://i.imgur.com/0GZdCna.jpg Link video: là link video trên youtube, copy trên thanh địa chỉ của trình duyệt ví dụ https://www.youtube.com/watch?v=MhQKe-aERsU

    Các đoạn code js, html, css phải được convert các kí tự đặc biệt, bạn có thể tự tạo tool convert để người dùng chuyển đổi trước khi bình luận
    Mọi người có thể Download file js, css ở trong đoạn code ở link bên dưới.


      • Chúc mọi người thành công.

BLOGGER CSS HTML JAVASCRIPT
Lê Hùng ™
Lê Hùng ™
Tôi Hùng, Một Công Nhân Điện Lực Lệ Thủy, Thuộc Công Ty Điện Lực Quảng Trị, Chi nhánh Tổng công ty Điện Lực Miền Trung, Trực thuộc Tổng Công Ty Điện Lực Việt Nam. Tôi có đam mê với lập trình website/blog nên lập ra blog này chia sẽ đến mọi người những gì tôi biết về kiến thức lập trình website/blog, seo,facebook, youtube, blogger, html, javascript, css, python, google, youtube...v.v
Join the conversation (2)
2 comments
👉 Nội dung liên quan: Nhận xét cần tập trung vào chủ đề của bài viết hoặc giao diện đang chia sẻ.

👉 Văn hóa ứng xử: Không sử dụng ngôn từ tục tĩu, xúc phạm, phân biệt chủng tộc hoặc kích động.

👉 Không Spam/Quảng cáo: Nghiêm cấm chèn link spam, quảng cáo dịch vụ/sản phẩm không liên quan hoặc rác điện tử.

👉 Tôn trọng quyền riêng tư: Không chia sẻ thông tin cá nhân của người khác (doxxing).
Ngôn ngữ: Khuyến khích tiếng Việt có dấu, rõ ràng.

👉 Quyền quản trị: Quản trị viên có quyền xóa hoặc chỉnh sửa bình luận vi phạm mà không cần báo trước.
  1. Ngọc Ánh
    09/01/2026, 09:04
    Profile
    Ngọc Ánh
    Ngọc Ánh
    Said: không thêm hướng dẫn ở phần bình luận sao ng dùng biết mà thêm code vào đc e?
    View profile
    không thêm hướng dẫn ở phần bình luận sao ng dùng biết mà thêm code vào đc e?
    • Lê Hùng ™
      09/01/2026, 19:39
      Profile
      Lê Hùng ™
      Lê Hùng ™
      Said: Đã thêm hướng dẫn ở bình luận chị nhé <3 cảm ơn chị đã nhắc e :P
      View profile
      Đã thêm hướng dẫn ở bình luận chị nhé <3 cảm ơn chị đã nhắc e :P
    Reply
    Reply