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