Thêm Button Copy Vào Khung Blockquote Cho Giao Diện Blogger

Thêm Button Copy Vào Khung Blockquote Cho Giao Diện Blogger
Chào mọi người, bài viết này chia sẽ đến mọi người một thủ thuật đơn giản về việc thêm button copy vào khung blockquote để giúp người dùng copy nội dung trong khung blockquote nhanh mà không bỏ lỡ nội dung nào.

Chúng ta bắt đầu nhé.

Bước 1. Mọi người thêm đoạn code CSS bên dưới vào trong khung <![CDATA[/*.
/* Blockquote Copy - Median UI */
blockquote {
  position: relative;
  background: #f8f9fa;
  border-left: 4px solid #0d6efd;
  padding: 15px 15px 15px 20px;
  border-radius: 8px;
  margin: 15px 0;
  font-size: 14px;
}

.blockquote-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #0d6efd;
  color: #fff;
  border: none;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
  opacity: .85;
  transition: .2s ease;
}

.blockquote-copy-btn:hover {
  opacity: 1;
}

.blockquote-copy-btn.copied {
  background: #28a745;
}
Bước 2. Mọi thêm đoạn code Javascript sau vào trên thẻ </body>.
<b:if cond='data:view.isPost'>
<script>
document.addEventListener("DOMContentLoaded", function () {
  const quotes = document.querySelectorAll("blockquote");

  quotes.forEach(function (quote) {
    const btn = document.createElement("button");
    btn.innerText = "Copy";
    btn.className = "blockquote-copy-btn";

    btn.addEventListener("click", function () {
      const text = quote.innerText;

      navigator.clipboard.writeText(text).then(() => {
        btn.innerText = "Đã copy!";
        btn.classList.add("copied");

        setTimeout(() => {
          btn.innerText = "Copy";
          btn.classList.remove("copied");
        }, 2000);
      });
    });

    quote.appendChild(btn);
  });
});
</script></b:if>
Như vậy đã hoàn thành, bây giờ mọi người có thể lưu lại và tận hưởng kết quá.

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

Mọi người có thể xem demo tại đây
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/…

Post a Comment

👉 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.
Hung Pro VN © 2015
Tôi Lê Hùng, chia sẽ kiến thức và tư duy sáng tạo của bản thân mỗi ngày cho cộng đồng Internet Việt Nam hiện tại.
Developed by Jago Desain