Tạo hộp thông báo/ghi chú nhiều màu sắc cho blogspot

Trong những bài viết đôi khi có những chỗ cần làm nổi bật để bạn đọc được chú ý đó là thông tin quan trọng hay cần lưu ý, vậy trong bài này mình sẽ hướng dẫn các bạn tạo hộp thông báo/ghi chú với nhiều màu sắc khác nhau phù hợp với hoàn cảnh sử dụng của bạn.

XEM DEMO

Bạn có thể xem demo ở trên ảnh hoặc demo trực tiếp.

Hướng dẫn cách làm

Bước 1: Bạn tìm đến ]]></b:skin> hoặc để trong cặp thẻ <style> </style> dán đoạn CSS sau lên trước nó.

.colorbox {
overflow:hidden;
position:relative;
margin:.5rem 0 1rem;
transition:box-shadow .25s;
border-radius:2px;
color:#fff;
box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
padding:20px;
font-size:14px
}

.colorbox.blue {
background:#03a9f4
}

.colorbox.green {
background:#4CAF50
}

.colorbox.red {
background:#F44336
}

.colorbox.orange {
background:#ff9800
}

.colorbox.purple {
background:#673ab7
}

Nhấn lưu lại.
Bước 2: Để sử dụng trong bài viết bạn cần chuyển sang Tab HTML khi viết bài và sử dụng màu bạn muốn.

Màu tím

<div class="colorbox purple">Thất bại không phải là kết thúc, nhưng khi bắt đầu cho chúng ta những người muốn nghĩ.</div>

Xanh da trời

<div class="colorbox blue">Để đạt được mục tiêu, đôi khi chúng ta phải đi đường vòng. Thất bại là một trong số họ.</div>

Xanh lá cây

<div class="colorbox green">Một người đã cố gắng và thất bại, là hơn một ngàn người chưa bao giờ cố gắng.</div>

Màu đỏ

<div class="colorbox red">Đừng luôn luôn đi với dòng chảy, hãy là chính mình.</div>

Màu cam

<div class="colorbox orange">Thất bại là một phần của nỗ lực, không phải là kết quả mà làm cho chúng ta từ bỏ một cách dễ dàng.</div>

Bạn có thể viết thêm nhiều màu nữa theo ý thích của bạn, hi vọng với thủ thuật nhỏ này sẽ giúp bạn dễ dàng hơn trong việc sử dụng blogspot.
Chúc bạn thành công!