Hướng dẫn tạo CSS ghi chú hiệu ứng đẹp cho Blogspot

Sau mấy ngày bận bịu với nhiều "dự án sinh viên" khác nhau hôm nay Phan Hùng Blog đã quay trở lại để update thêm nhiều thử thuật Blogspot mới, lạ và độc cho mọi người.

Tạo CSS ghi chú hiệu ứng đẹp cho Blogspot - 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? Phan Hùng Blog 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.

Tạo CSS ghi chú hiệu ứng đẹp cho Blogspot

1. Đăng nhập vào Blogger > Mẫu > Chỉnh sửa HTML rồi dán đoạn mã CSS sau trước thẻ ]]></b:skin> hoặc </style> sau đó Lưu mẫu

/* CSS Note by PhanHung.Info */
.note{position:relative;width:30%;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden}
.note.orange{background:#f39c12}
.note.crusta{background:#F2784B}
.note.river{background:#3498db}
.note:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #27ae60 #27ae60;background:#27ae60;box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);display:block;width:0}
.note.orange:before{border-color:#fff #fff #e67e22 #e67e22;background:#e67e22}
.note.crusta:before{border-color:#fff #fff #de6e45 #de6e45;background:#de6e45}
.note.river:before{border-color:#fff #fff #2980b9 #2980b9;background:#2980b9}

2. Cách sử dụng. Để thêm ghi chú bạn chọn 1 trong các mẫu dưới đây sau đó chèn vào bài viết (nhớ chuyển qua chế độ soạn thảo HTML nhé)

Mẫu 1

<div class='note'>...GHI CHÚ...</div>

Mẫu 2

<div class='note orange'>...GHI CHÚ...</div>

Mẫu 3

<div class='note river'>...GHI CHÚ...</div>

Mẫu 4

<div class='note crusta'>...GHI CHÚ...</div>

Chúc các bạn thành công!