Demo
Chào các bạn!
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 toptienich 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 */
.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}
Bước 3: Lưu mẫu.
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>