Share code Tool Thumbnail Generator bằng HTML + SVG

Hôm nay mình chia sẻ đến anh em một công cụ nhỏ nhưng cực kỳ hay – Thumbnail Generator Pro.

Công cụ này cho phép bạn tạo ảnh thumbnail YouTube (1280x720) có hiệu ứng phát sáng động (Glow Motion) hoàn toàn bằng HTML + CSS + SVG animate, không cần framework hay API ngoài.

Share code Tool Thumbnail Generator bằng HTML + SVG

Điểm đặc biệt là code này chạy được ngay trên nền Blogspot, tức là chỉ cần chèn đoạn code vào Trang blogspot và sử dụng luôn không cần làm gì thêm!

Các tính năng chính

• 🖼 Kích thước chuẩn thumbnail: 1280×720px, 960x540px, 640x360px.
• 💡 Hiệu ứng phát sáng “Glow Motion” mượt chậm, màu cố định theo theme.
• 🔵 10 kiểu họa tiết nền động: Circle Lines, Dot Grid, Wave, Ribbon, Halo, Mesh...
• 🧩 Có thể đổi màu chủ đạo, tiêu đề, mô tả, logo riêng.
• 💾 Xuất ảnh PNG tĩnh (canvas render).
• ⚙️ Hoạt động ổn định ngay trên trang Blogspot.

Cấu trúc công cụ

Toàn bộ công cụ chỉ gồm một khối HTML duy nhất chứa:

1. Phần giao diện form nhập liệu (Title, Description, Logo, Theme Color, Layout Decor).
2. Phần preview động SVG (Glow Motion).
3. Phần script xử lý render + xuất PNG.

Cách sử dụng

1. Mở trang Blogger → Trang mới → Chế độ HTML.
2. Dán toàn bộ đoạn code ở dưới vào bài viết.
3. Xuất bản Trang – công cụ sẽ hoạt động trực tiếp.
4. Nhập thông tin, chọn layout, bấm Download PNG để xuất ảnh thumbnail.

Bình luận chứa mã để mở khóa lấy code

👉 Lưu ý: Chỉnh sửa các nội dung thông tin, hoặc có thể tùy biến css theo sở thích của các bạn nha!

Demo công cụ

Anh em có thể xem bản chạy thật tại đây:

👉 https://www.anhtrainang.com/p/thumbnail-generator.html

Tổng kết

Đây là một công cụ rất thú vị để tạo ảnh thumbnail nhanh, đẹp, có hiệu ứng ánh sáng động mà không cần phần mềm nặng.

Code gọn gàng, dễ nhúng, phù hợp cho các blog về thiết kế, YouTube, marketing, công nghệ hoặc demo web UI.

👨‍💻 Công cụ được phát triển bởi Anh Trai Nắng Blogger

Chia sẻ tự do, không bản quyền – chỉ cần giữ lại phần credit nhỏ nhé ❤️