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 căn hộ sprosper plaza quận 12" khác nhau hôm nay thuthuatseo đã 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? thuthuatseo 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 2-Tek.Net */
.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!