Hướng dẫn tạo khung ghi chú đơn giản cho Blogspot

Mục lục bài viết

Khi bạn lướt qua một bài viết trên Blogspot, bạn có thể nhận thấy một khung ghi chú nhỏ. Những khung ghi chú này là cách tuyệt vời để tác giả nhấn mạnh những điểm quan trọng, cung cấp thông tin bổ sung hoặc đơn giản là thu hút sự chú ý của người đọc.

Vì sao trong các bài viết cần sử dụng khung ghi chú?

Việc sử dụng khung ghi chú trong bài viết Blogspot có thể là một công cụ mạnh mẽ để truyền tải thông tin theo cách hấp dẫn trực quan. Bằng cách sử dụng các màu sắc, phông chữ và đường viền khác nhau, khung ghi chú nổi bật so với phần còn lại của văn bản, thu hút sự chú ý của người đọc và thu hút họ đến những điểm chính.
Khung ghi chú còn có thể giúp chia nhỏ văn bản và giúp đọc dễ dàng hơn. Bằng cách tách thông tin quan trọng vào một khung riêng, tác giả có thể đảm bảo rằng thông tin đó không bị lạc trong biển văn bản và gây ấn tượng với người đọc.
Khung ghi chú cũng rất hữu ích trong việc cung cấp thêm ngữ cảnh hoặc giải thích. Nếu tác giả muốn mở rộng một điểm cụ thể mà không làm gián đoạn mạch văn bản chính, họ có thể sử dụng khung ghi chú để thêm thông tin hoặc ví dụ bổ sung mà không làm lộn xộn nội dung chính của bài viết.

Cách tạo khung ghi chú cho bài viết Blogspot

Bước 1: copy css bên dưới, vào "Chỉnh sửa HTML", tìm đến thẻ "]]></b:skin>", dán css vừa copy vào phía trên nó.

.ahiblog_notecontent{position:relative;display:block;padding:16px;border:1px solid var(--border-color);border-radius:var(--radius)}
.ahiblog_notecontent.sucess{background-color:#D8FFE1;color:#4CAF50; border-left: 4px solid rgb(76, 175, 80);}
.ahiblog_notecontent.info{background-color:#D7EBFF;color:#75B8FF;border-left: 4px solid rgb(117,184,255);}
.ahiblog_notecontent.warning{background-color:#FFF5E5;color:#FFD58B;border-left: 4px solid rgb(255,213,139);}
.ahiblog_notecontent.error{background-color:#FFDDDD;color:#F44336;border-left: 4px solid rgb(244, 67, 54);}

Bước 2: trong bài viết, khi cần sử dụng các bạn gọi đến một trong class tương ứng bên dưới.

<p class="ahiblog_notecontent sucess">Nâng cao kiến thức, hướng đến thành công, hãy cùng aHí tạo nên phiên bản tốt nhất của chính bạn.</p>
<p class="ahiblog_notecontent info">Nâng cao kiến thức, hướng đến thành công, hãy cùng aHí tạo nên phiên bản tốt nhất của chính bạn.</p>
<p class="ahiblog_notecontent warning">Nâng cao kiến thức, hướng đến thành công, hãy cùng aHí tạo nên phiên bản tốt nhất của chính bạn.</p>
<p class="ahiblog_notecontent error">Nâng cao kiến thức, hướng đến thành công, hãy cùng aHí tạo nên phiên bản tốt nhất của chính bạn.</p>

Lời kết

Khung ghi chú trong bài viết trên Blogspot đóng vai trò là công cụ có giá trị để tác giả truyền tải thông tin một cách rõ ràng và hấp dẫn về mặt hình ảnh. Cho dù đó là để nhấn mạnh những điểm chính, cung cấp thông tin bổ sung hay chỉ đơn giản là thu hút sự chú ý của người đọc, khung ghi chú có thể giúp bài viết hấp dẫn và nhiều thông tin hơn.