[Blogger] Tạo Ghi Chú, Khuyến Cáo, Cảnh Báo Đẹp Cho Blogger - Blogspot

Hướng dẫn cách tạo thêm CSS Ghi chú, Khuyến Cáo, Cảnh Báo hiệu ứng cho Blogspot - Blogger độc đáo và đẹp mắt hơn với vài thao tác đơn giản.

Trong khi viết bài trên blog chúng ta chắc chắc sẽ cần ghi chú hoặc thêm vào những lưu ý nhỏ cho người đọc, vậy thì tại sao không làm nó độc đáo và đẹp mắt hơn là những đoạn in đậm, in nghiêng thông thường? Mình xin chia sẻ với các bạn cách tạo thêm CSS ghi chú hiệu ứng đẹp cho Blogspot, chỉ cần vài thao tác đơn giản là bạn có thể hoàn thành Tips này.

Cách Thực Hiện :

1. Truy cập Blogger > Mẫu > Chỉnh sửa HTML
2. Sau đó thêm đoạn code sau trước thẻ  ]]></b:skin> hoặc </style>



.info, .tips, .warning {
 line-height: 22px;
 min-height: 38px;
 padding-left: 10px;
 padding: 10px 12px 12px 68px;
 margin: 5px 0;
}
.info {
 background: #e0e5eb url('http://i.imgur.com/3EbxygA.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('http://i.imgur.com/n1KiHNH.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('http://i.imgur.com/SGyqoI4.png') no-repeat 12px 8px;
 color: #fff;
}

3. Sau đó lưu lại và bạn đã hoàn tất.

Cách Sử Dụng :

<div class='info'>
Nội dung cần ghi chú
</div>

<div class='tips'>
Nội dung cần ghi chú
</div>

<div class='warning'>
Nội dung cần ghi chú
</div>