Hướng dẫn tạo khung ghi chú đơn giản cho Blogspot
Mục lục bài viết
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>
Đăng nhận xét