 |
| Demo |
Một blog luôn biết lắng nghe và giải đáp các thắc mắc của người dùng sẽ tạo được sự tin tưởng và ghé thăm thường xuyên từ họ. Thông báo chính là cánh cửa giao tiếp một chiều từ chủ nhân của thông, thông báo cực kỳ quan trọng, nó giúp cho quản trị viên truyền đạt nhanh nhất các thay đổi hay quy tắc mới tới độc giả.
Vậy làm thế nào để tạo một thông báo đẹp thân thiện hơn?
Bài viết này 4tipsVn sẽ hướng dẫn các bạn. Rất đơn giản thôi.
Bước 1: Đăng nhập blogger, chọn mẫu, chọn Chỉnh sửa HTML/Javascript.
Bước 2: Thêm đoạn CSS sau lên trước (trên) thẻ ]]></b:skin>
/* CSS Note by Indzign */Bước 3: Lưu mẫu.
.note{position:relative;width:30%;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden}
.note.orange{background:#f39c12}
.note.red{background:#F2784B}
.note.blue{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}
Dưới đây là các thông báo với màu sắc tương ứng, các bạn chỉ cần chèn vào bài viết hoặc đâu đó nơi muốn nó xuất hiện.
1. Thông báo đơn giản
<div class='note'>...TYPE YOUR NOTE HERE...</div>2. Thông báo màu da cam
<div class='note orange'>...TYPE YOUR NOTE HERE...</div>3. Thông báo màu xanh
<div class='note blue'>...TYPE YOUR NOTE HERE...</div>4. Thông báo màu đỏ
<div class='note red'>...TYPE YOUR NOTE HERE...</div>
Subscribe Our Newsletter
0 Response to "Tạo thông báo nhiều màu với hiệu ứng đẹp từ CSS cho blogspot"
Đăng nhận xét