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

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 ChamNhe.Com đã 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? ChamNhe.Com 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

Đă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 ChamNhe.Com */
.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}

 

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>

 

Tổng kết

Như vậy chỉ với thủ thuật Blogspot nhỏ này bạn đã có thêm widget ghi chú khá đẹp mắt và chuyên nghiệp cho blog của mình rồi đúng không? Hy vọng nó sẽ có ích với bạn, để lại bình luận góp ý cho blog nhé!

Recommended For You

About the Author: Nguyễn Đức Anh

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé!

7 Comments

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *