Tạo Khung Chứa Code Sử Dụng Thẻ blockquote

Hướng Dẫn Tạo Khung Chứa Code Sử Dụng Thẻ <blockquote> Trên Blogger

Chào các bạn, hôm nay mình sẽ chia sẻ cách tạo khung chứa code đẹp mắt và dễ sử dụng trong bài viết của bạn trên Blogger bằng thẻ <blockquote>. Việc sử dụng thẻ <blockquote> rất tiện lợi vì Blogger đã tích hợp sẵn công cụ để bạn có thể chọn thẻ này khi soạn thảo bài viết.

Tại Sao Nên Sử Dụng Thẻ <blockquote>?

Thẻ <blockquote> thường được sử dụng để định dạng các trích dẫn dài hoặc nội dung quan trọng mà bạn muốn làm nổi bật trong bài viết. Trong trường hợp của chúng ta, chúng ta sẽ sử dụng nó để tạo khung chứa code, giúp người đọc dễ dàng nhận diện và sao chép nội dung.

Cách Thực Hiện

1. Thêm CSS để Tạo Kiểu Dáng Cho Khung Chứa Code

Để khung chứa code trông hấp dẫn hơn, bạn có thể thêm một số CSS vào trước thẻ </b:skin> của Blogger. Dưới đây là một ví dụ về CSS bạn có thể sử dụng:

blockquote{background-color:#f5f5f5;font-family:Monospace;font-size:15px;line-height:20px!important;white-space:pre-wrap;margin:0;padding:10px;border:1px solid #d4d4d4;border-radius:0}

blockquote:before{content:'NHẤP ĐỂ SAO CHÉP';display:block;background-color:#4CAF50;float:left;width:calc(100% - 12px);height:30px;color:white;font-size:14px;line-height:30px;font-weight:700;margin:-5px -6px 0;padding:0 10px;border-radius:4px;box-shadow:0 2px 5px rgba(0,0,0,0.3);text-align:center;margin-bottom:10px}

2. Sử Dụng Thẻ <blockquote> Trong Bài Viết

Khi viết bài để sử dụng thẻ <blockquote> trong bài viết của mình thì chỉ cần chọn đoạn văn bản hoặc đoạn code, rồi vào thanh công cụ chọn biểu tượng có dấu 2 nháy (Trích dẫn văn bản) 

3. Tích Hợp Tính Năng Sao Chép Nội Dung

Để người đọc có thể dễ dàng sao chép nội dung từ khung chứa code, bạn có thể thêm một đoạn JavaScript vào trước thẻ đóng </body> trong chủ đề của Blogger:

<script>

  //<![CDATA[

  function copyToClipboard(blockquoteElement) {

    const codeBlock = blockquoteElement.innerText;

    navigator.clipboard.writeText(codeBlock).then(() => {

      alert("Đã sao chép vào clipboard!");

    }).catch(err => {

      console.error("Lỗi khi sao chép: ", err);

    });

  }

  document.querySelectorAll('blockquote').forEach(blockquote => {

    blockquote.addEventListener('click', function() {

      copyToClipboard(this);

    });

  });

  //]]>

</script>

4. Kết Quả Cuối Cùng

Sau khi bạn đã thực hiện các bước trên, khung chứa code của bạn sẽ không chỉ đẹp mắt mà còn tiện lợi cho người đọc khi muốn sao chép nội dung. Hãy thử nghiệm và tùy chỉnh các thuộc tính CSS theo ý thích của bạn!

Kết Luận

Sử dụng thẻ <blockquote> để tạo khung chứa code trong Blogger là một cách đơn giản nhưng hiệu quả để cải thiện nội dung bài viết của bạn. Hy vọng bài viết này sẽ giúp bạn dễ dàng tạo ra những khung chứa code đẹp và chức năng.

Nếu bạn có bất kỳ câu hỏi nào hoặc cần thêm trợ giúp, hãy để lại bình luận bên dưới nhé!