Tạo trang Mã hóa code chuyên nghiệp cho Blogspot

05 tháng 11
Tutorial
Mục lục

Nếu anh em từng chèn code vào Blogspot, chắc hẳn đã gặp lỗi “vỡ giao diện” vì các ký tự đặc biệt như <, >, & hay " bị trình duyệt hiểu nhầm là mã HTML. Để khắc phục điều đó, mình đã viết một công cụ nhỏ – Code Escaper – giúp mã hoá (escape) đoạn code sang HTML Entities an toàn, chỉ cần dán vào là xong.

Code Escaper – Mã hoá HTML Entities cho Blogspot
Code Escaper – Mã hoá HTML Entities cho Blogspot

Công cụ này giúp bạn:

  • Giữ nguyên định dạng code khi chèn vào bài viết Blogspot.
  • Tự động thay thế các ký tự đặc biệt bằng entity tương ứng.
  • Hỗ trợ Dark mode sẵn, hiển thị đẹp trong cả hai giao diện.
  • Giao diện gọn, chạy độc lập, không ảnh hưởng đến style chung của blog.

💡 Ví dụ minh hoạ

Giả sử bạn có đoạn code:

<div class="card">Hello world!</div>

Khi dán vào công cụ, kết quả sẽ là:

&lt;div class=&quot;card&quot;&gt;Hello world!&lt;/div&gt;

Bây giờ bạn có thể dán đoạn mã này vào bài viết Blogspot mà không sợ bị lỗi hiển thị.

🚀 XEM DEMO

🧱 Mã nguồn đầy đủ

Dưới đây là toàn bộ đoạn code HTML anh có thể chèn vào trang riêng (Page) trong Blogspot, hoặc bất kỳ nơi nào hỗ trợ HTML:

<!-- ========== CODE ESCAPER (Blogspot Page) ========== -->
<section id="atn-escaper" aria-labelledby="escaper-title">
  <style>
    #atn-escaper {
      --bg: #f7fafc;
      --card: #ffffff;
      --text: #111827;
      --muted: #6b7280;
      --brand: #2563eb;
      --brand-2: #22c55e;
      --border: rgba(148,163,184,.35);
      --shadow: 0 10px 30px rgba(2,6,23,.08);
      --radius: 14px;
      color: var(--text);
      font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background: var(--bg);
      padding: 24px 0;
    }
    @media (prefers-color-scheme: dark) {
      #atn-escaper {
        --bg: #0b1220;
        --card: #0f172a;
        --text: #e5e7eb;
        --muted: #9ca3af;
        --brand: #60a5fa;
        --brand-2: #34d399;
        --border: rgba(148,163,184,.25);
        --shadow: 0 10px 30px rgba(0,0,0,.35);
      }
    }
    #atn-escaper .container { max-width: 960px; margin: 0 auto; padding: 0 16px; }
    #atn-escaper .hero {
      text-align: center; margin-bottom: 18px; position: relative; padding: 8px 0 0;
    }
    #atn-escaper h1#escaper-title {
      margin: 0; font-size: clamp(26px, 4vw, 40px); letter-spacing: -.02em;
    }
    #atn-escaper .subtitle { color: var(--muted); margin-top: 8px; font-size: 15px; }
    #atn-escaper .grid {
      display: grid; gap: 14px;
      grid-template-columns: 1fr; 
    }
    @media (min-width: 900px) {
      #atn-escaper .grid { grid-template-columns: 1fr 1fr; }
    }
    #atn-escaper .card {
      background: var(--card); border: 1px solid var(--border);
      border-radius: var(--radius); box-shadow: var(--shadow);
      padding: 14px;
    }
    #atn-escaper .card h2 {
      display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
      font-size: 16px; letter-spacing: -.01em;
    }
    #atn-escaper .card h2 .dot {
      width: 10px; height: 10px; border-radius: 999px; background: var(--brand);
      box-shadow: 0 0 0 6px rgba(37,99,235,.14);
    }
    #atn-escaper .toolbar {
      display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 10px;
    }
    #atn-escaper .btn {
      display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
      border: 1px solid var(--border); border-radius: 10px;
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.02));
      padding: 8px 12px; font-size: 14px; color: var(--text); text-decoration: none;
      transition: transform .12s, box-shadow .12s, border-color .12s;
    }
    #atn-escaper .btn:hover { transform: translateY(-1px); border-color: var(--brand); box-shadow: var(--shadow); }
    #atn-escaper .btn.primary { border-color: var(--brand); }
    #atn-escaper .btn.success { border-color: var(--brand-2); }
    #atn-escaper .stats {
      margin-left: auto; color: var(--muted); font-size: 13px;
      display: inline-flex; gap: 10px; align-items: center;
    }
    #atn-escaper textarea, #atn-escaper input[type="text"] {
      width: 100%; min-height: 240px; resize: vertical;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 14px; line-height: 1.5; color: var(--text);
      background: #0b122003;
      border: 1px solid var(--border); border-radius: 10px; padding: 12px;
      outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
    }
    #atn-escaper textarea:focus {
      border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.2);
      background: #0b122006;
    }
    #atn-escaper .hint { margin-top: 8px; font-size: 13px; color: var(--muted); }
    #atn-escaper .note {
      margin-top: 14px; text-align: center; color: var(--muted); font-size: 13px;
    }
    #atn-escaper .badge {
      display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px;
      border: 1px solid var(--border); border-radius: 999px; background: var(--card); margin-top: 10px;
    }
    #atn-escaper .toast {
      position: fixed; left: 50%; transform: translateX(-50%);
      bottom: 24px; background: var(--card); color: var(--text);
      border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: 10px;
      padding: 10px 14px; font-size: 14px; display: none; z-index: 9999;
    }
    #atn-escaper .line {
      margin: 14px 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent);
    }
  </style>

  <div class="container">
    <header class="hero">
      <h1 id="escaper-title">Mã hoá Code → HTML Entities</h1>
      <p class="subtitle">Dán code vào khung bên trái, bản đã mã hoá sẽ hiển thị bên phải. Hỗ trợ <code>&amp; &lt; &gt; " '</code>.</p>
      <div class="badge" aria-live="polite">🔐 Mã hoá an toàn • Dark mode hỗ trợ sẵn</div>
    </header>

    <div class="grid" role="group" aria-label="Trình mã hoá">
      <!-- INPUT -->
      <article class="card" aria-labelledby="input-title">
        <h2 id="input-title"><span class="dot" aria-hidden="true"></span>Đầu vào</h2>
        <div class="toolbar">
          <button class="btn" type="button" id="btn-clear">🧹 Xoá</button>
          <button class="btn" type="button" id="btn-paste">📋 Dán</button>
          <span class="stats" id="stats-in">0 ký tự · 0 dòng</span>
        </div>
        <label for="esc-input" class="sr-only">Dán code cần mã hoá</label>
        <textarea id="esc-input" placeholder="Dán code của bạn vào đây…"></textarea>
        <p class="hint">Mẹo: Có thể dán trực tiếp đoạn HTML/JS/CSS. Công cụ sẽ thay thế các ký tự đặc biệt thành HTML entities.</p>
      </article>

      <!-- OUTPUT -->
      <article class="card" aria-labelledby="output-title">
        <h2 id="output-title"><span class="dot" aria-hidden="true" style="background: var(--brand-2); box-shadow: 0 0 0 6px rgba(34,197,94,.14)"></span>Kết quả đã mã hoá</h2>
        <div class="toolbar">
          <button class="btn primary" type="button" id="btn-copy">📑 Copy</button>
          <button class="btn success" type="button" id="btn-select">🔍 Chọn tất cả</button>
          <span class="stats" id="stats-out">0 ký tự · 0 dòng</span>
        </div>
        <label for="esc-output" class="sr-only">Kết quả đã mã hoá</label>
        <textarea id="esc-output" readonly aria-readonly="true" placeholder="Kết quả sẽ xuất hiện tại đây…"></textarea>
        <p class="hint">Đã mã hoá các ký tự: <code>&amp;</code>, <code>&lt;</code>, <code>&gt;</code>, <code>&quot;</code>, <code>&#39;</code>.</p>
      </article>
    </div>

    <div class="line" role="separator" aria-hidden="true"></div>
    <p class="note">⚡ CSS của trang công cụ này được viết cục bộ trong <code>#atn-escaper</code>, không ảnh hưởng đến giao diện chung của blog.</p>
  </div>

  <div class="toast" id="esc-toast" role="status" aria-live="polite"></div>

  <script>
    (function () {
      // ===== Utilities
      const $ = (sel, scope=document) => scope.querySelector(sel);
      const $$ = (sel, scope=document) => Array.from(scope.querySelectorAll(sel));
      const inEl = $('#esc-input');
      const outEl = $('#esc-output');
      const toast = $('#esc-toast');

      // Escape theo thứ tự an toàn: & trước, rồi < > " '
      function escapeEntities(text) {
        if (text == null) return '';
        return text
          .replaceAll(/&/g, '&amp;')
          .replaceAll(/</g, '&lt;')
          .replaceAll(/>/g, '&gt;')
          .replaceAll(/"/g, '&quot;')
          .replaceAll(/'/g, '&#39;');
      }

      // Debounce input để mượt hơn
      function debounce(fn, delay) {
        let t; 
        return function (...args) {
          clearTimeout(t);
          t = setTimeout(() => fn.apply(this, args), delay);
        }
      }

      function updateStats(el, statsEl) {
        const val = el.value || '';
        const chars = val.length;
        // Tính dòng: tách theo \n, nếu rỗng thì 0
        const lines = val ? (val.match(/\n/g)?.length || 0) + 1 : 0;
        statsEl.textContent = `${chars} ký tự | ${lines} dòng`;
      }

      // Render
      const render = debounce(() => {
        const src = inEl.value || '';
        const esc = escapeEntities(src);
        outEl.value = esc;
        updateStats(inEl, $('#stats-in'));
        updateStats(outEl, $('#stats-out'));
      }, 80);

      // Copy & Select
      function showToast(msg) {
        toast.textContent = msg;
        toast.style.display = 'block';
        clearTimeout(showToast._t);
        showToast._t = setTimeout(() => { toast.style.display = 'none'; }, 1400);
      }

      $('#btn-copy').addEventListener('click', async () => {
        try {
          outEl.select();
          document.execCommand('copy');
          // Nếu quyền cho Clipboard API:
          if (navigator.clipboard && window.isSecureContext) {
            await navigator.clipboard.writeText(outEl.value);
          }
          showToast('Đã copy kết quả vào clipboard ✅');
        } catch (e) {
          showToast('Không copy được, vui lòng chọn và copy thủ công.');
        }
      });

      $('#btn-select').addEventListener('click', () => {
        outEl.focus();
        outEl.select();
        showToast('Đã chọn toàn bộ kết quả.');
      });

      $('#btn-clear').addEventListener('click', () => {
        inEl.value = '';
        render();
        inEl.focus();
      });

      $('#btn-paste').addEventListener('click', async () => {
        try {
          if (navigator.clipboard && window.isSecureContext) {
            const text = await navigator.clipboard.readText();
            if (text) {
              inEl.value = text;
              render();
              showToast('Đã dán nội dung từ clipboard.');
            } else {
              showToast('Clipboard trống.');
            }
          } else {
            showToast('Trình duyệt không hỗ trợ dán tự động.');
          }
        } catch (e) {
          showToast('Không thể truy cập clipboard.');
        }
      });

      // Sự kiện nhập liệu
      inEl.addEventListener('input', render);
      // Khởi tạo lần đầu
      render();

      // Accessibility nhỏ: Ctrl/Cmd + Enter để copy nhanh
      document.addEventListener('keydown', (e) => {
        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
          $('#btn-copy').click();
        }
      });
    })();
  </script>
</section>
<!-- ========== /CODE ESCAPER ========== -->
 
⚡
 
Lưu ý: CSS của công cụ này được viết cục bộ trong phần tử #atn-escaper, nên sẽ không làm ảnh hưởng đến giao diện hay theme hiện tại của blog.  

⚙️ Cách sử dụng

  1. Dán đoạn code HTML, CSS hoặc JavaScript vào khung bên trái.
  2. Kết quả mã hoá sẽ tự động hiển thị bên phải.
  3. Dùng nút 📑 Copy để sao chép kết quả, sau đó dán vào bài viết Blogspot.
  4. Có thể dùng Ctrl + Enter để copy nhanh hoặc 📋 Dán trực tiếp từ clipboard.

🌙 Tính năng nổi bật

  • Giao diện hiện đại, hỗ trợ Dark mode tự động.
  • Nút Paste, Clear, Select All, Copy tiện dụng.
  • Thống kê số ký tự và số dòng theo thời gian thực.
  • Thông báo (toast) nhỏ gọn khi copy, paste hoặc thao tác.
  • Toàn bộ xử lý được thực hiện trực tiếp bằng JavaScript, không cần server.

🪄 Kết luận

Nếu bạn thường xuyên chia sẻ code trên Blogspot, công cụ Code Escaper này sẽ giúp tiết kiệm kha khá thời gian và tránh lỗi hiển thị không mong muốn. Anh em có thể tự tuỳ chỉnh thêm màu sắc, font, hoặc thêm nút tải file nếu muốn.

📎 Tác giả & Bản quyền

  • 👨‍💻 Tác giả: Anh Trai Nắng Blogger
  • 📅 Phiên bản: v1.0
  • 🏷️ Chia sẻ miễn phí – vui lòng giữ credit nếu bạn tái sử dụng.
0.0/5
0 đánh giá
Đánh giá của bạn:
Cảm ơn bạn đã đánh giá!

Tăng tương tác MXH

Like, sub, view, comment, share livestream…

  • Instagram, TikTok, YouTube, Twitter, Shopee
  • Dịch vụ nhanh – ổn định

🎁 Mã giảm giá: đang cập nhật

Khám phá

Tài khoản Premium

CapCut, Canva, ChatGPT, Semrush, HMA, Google Ads…

  • Kích hoạt nhanh – bảo hành rõ
  • Đa dạng gói

🎁 Mã giảm giá: đang cập nhật

Mua ngay

Template Blogspot

Thiết kế chuẩn SEO, tối ưu tốc độ & giao diện.

  • Nhiều mẫu cho blog, shop
  • Tùy biến dễ

🎁 Mã giảm giá: anhtrainang (-10%)

Xem mẫu
Tags: Blogspot Code Pages Tutorial
Chia sẻ:
DMCA.com Protection Status
Đã sao chép link!

Bài viết liên quan

Nhận xét (0)

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

👉 Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
👉 Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
👉 Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu ✅
Hiển thị

Đăng nhận xét