Tại sao dán HTML vào CMS thường bị mất định dạng?

Bạn tạo một block HTML đẹp trên máy tính, dán vào Haravan hay Sapo — và nhìn thấy một đống chữ không có format. Vấn đề này xảy ra vì hầu hết CMS đều có bộ lọc CSS bảo mật tự động xóa thẻ <style> và các attribute JavaScript để ngăn tấn công XSS.

Giải pháp duy nhất: dùng HTML inline CSS — tức là viết tất cả style trực tiếp vào thuộc tính style="" của từng thẻ HTML. HTML loại này không bị lọc bỏ bởi bất kỳ CMS nào.

Hướng dẫn dán HTML vào Haravan

Cách 1: Dùng Haravan Page Builder

  1. Đăng nhập quản trị Haravan → Trang → Tạo trang mới hoặc mở trang có sẵn
  2. Trong editor, click nút "HTML" hoặc "<>" ở thanh công cụ
  3. Xóa nội dung cũ và dán HTML mới vào
  4. Click "OK" để đóng cửa sổ HTML
  5. Nhấn "Lưu" và kiểm tra trang trên trình duyệt

Lưu ý: Nếu dùng Haravan Page Builder (drag-and-drop), tìm block "HTML tùy chỉnh" và dán code vào đó.

Cách 2: Dán vào mô tả sản phẩm Haravan

  1. Vào Sản phẩm → chọn sản phẩm cần chỉnh
  2. Ở phần Mô tả, click biểu tượng "<>" (Source code)
  3. Dán HTML vào — chỉ phần body, không có <html> hay <head>
  4. Click "Lưu sản phẩm"

Hướng dẫn dán HTML vào Sapo Web

  1. Đăng nhập Sapo → Trang → chọn trang muốn chỉnh sửa
  2. Click "Chỉnh sửa" → chọn tab "HTML" trong editor
  3. Dán HTML inline CSS vào vị trí mong muốn
  4. Chuyển về tab "Trực quan" để kiểm tra layout
  5. Nhấn "Lưu thay đổi"

Mẹo Sapo: Sapo Page Builder có block "Mã HTML" ở sidebar — kéo vào vị trí muốn và dán code. Linh hoạt hơn so với dán trực tiếp vào editor.

Hướng dẫn dán HTML vào WordPress

WordPress Gutenberg (Block Editor)

  1. Mở trang/bài viết → Click dấu "+" để thêm block
  2. Tìm block "Custom HTML" hoặc "HTML tùy chỉnh"
  3. Dán HTML vào block đó
  4. Click "Preview" để xem trước, sau đó "Update"

WordPress Classic Editor

  1. Mở trang/bài viết → click tab "Text" (thay vì "Visual")
  2. Dán HTML trực tiếp vào vị trí muốn
  3. Nhấn "Update"

Checklist trước khi dán HTML vào CMS

  • ☑ HTML dùng inline CSS (style="" trên từng thẻ) — không có thẻ <style> riêng
  • ☑ Không có thẻ <script> — sẽ bị CMS lọc hoặc gây lỗi bảo mật
  • ☑ Ảnh dùng URL tuyệt đối (https://...) — không dùng đường dẫn tương đối
  • ☑ Test trên điện thoại sau khi dán — kiểm tra responsive
  • ☑ Kiểm tra trên cả Chrome và Safari — đặc biệt quan trọng với iOS

Khi HTML dán xong vẫn lỗi — xử lý thế nào?

  • Mất màu/font: CSS chưa inline — cần chạy qua bộ xử lý inline CSS trước khi dán
  • Ảnh không hiển thị: URL ảnh bị lỗi hoặc dùng đường dẫn tương đối
  • Layout vỡ trên mobile: Thiếu max-width:100% trên ảnh và container
  • Font khác với bản gốc: CMS override font — thêm font-family vào inline style của thẻ wrapper ngoài cùng

Kết luận

Dán HTML vào CMS Việt Nam không khó khi bạn hiểu nguyên tắc cốt lõi: luôn dùng inline CSS, không dùng file CSS riêng hay thẻ <style>. Với AITaoPage, quá trình này được tự động hóa — bạn nhận được HTML sẵn sàng dán, tương thích 100% với Haravan, Sapo, và WordPress mà không cần xử lý thêm.