Tạo CSS3 Notification Boxes cho Blogger bằng "Shortcodes"

Create CSS3 Notification Boxes in Blogger using "Shortcodes"

Notification boxes, Alert boxes hoặc Messages boxes là một cách tuyệt vời để thông báo cho người sử dụng một loạt các tin nhắn, chẳng hạn như: cảnh báo, cập nhật, thông báo, báo lỗi, thành công, cảnh báo.. v.v. Tin tốt là chúng tôi đã phát triển shortcodes cho Blogger Notification Boxes giúp bạn chèn một Responsive Message Box bất cứ nơi nào trên blog của bạn chỉ với một dòng code.

• DEMO

1. Cài đặt Plugin Blogger Shortcode

Để sử dụng Shortcode này trước tiên bạn phải cài đặt Plugin Shortcode cho Blogger của bạn bằng cách làm theo các bước được chia sẻ qua bài viết dưới đây:

Giới thiệu Plugin Blogger Shortcode

2. Thêm CSS cho Shortcodes

Vào Mẫu >> Chỉnh sửa HTML, thêm đoạn CSS dưới đây trước thẻ ]]></b:skin>

 /*---- Shortcode Notification Boxes Iris Tips ---*/ 
.sc-notification{color:#fff;line-height:1.4em;margin:10px 0 1em;padding:.7em 1.2em;background-color:#ffffe0;border:1px solid #e1db8b;font-size:15px;font-family:helvetica;text-shadow:1px 0 6px #333;box-shadow:2px 3px 6px #D7D7D7}.sc-notification .headline{font-size:17px;font-family:oswald,arial;padding-bottom:10px}.sc-notification.sc-warning{background-color:#fc402c;border:1px solid #C91704}.sc-notification.sc-alert{background-color:#FF8377;border:1px solid #F15C4C}.sc-success.sc-notification{background-color:#2ec23e;border:1px solid #039D14}.sc-info.sc-notification{background-color:#fdce09;border:1px solid #DFB400}.sc-update.sc-notification{background-color:#29b7ff;border:1px solid #069DE9}.sc-info.sc-notification div.headline::before{font-family:FontAwesome;position:relative;content:'\f05a';font-size:20px;padding-right:10px}.sc-update.sc-notification div.headline::before{font-family:FontAwesome;position:relative;content:'\f0a1';font-size:20px;padding-right:10px}.sc-alert.sc-notification div.headline::before{font-family:FontAwesome;position:relative;content:'\f06a';font-size:20px;padding-right:10px}.sc-success.sc-notification div.headline::before{font-family:FontAwesome;position:relative;content:'\f058';font-size:20px;padding-right:10px}.sc-warning.sc-notification div.headline::before{font-family:FontAwesome;position:relative;content:'\f071';font-size:20px;padding-right:10px} 

3. Cú pháp sử dụng Shortcodes

1. Update Box

 [update headline="Update"]Add Your Message Here.[/update] 

2. Alert Box

 [alert headline="Alert!"]Add Your Message Here.[/alert] 

3. Info Box

 [info headline="Info"]Add Your Message Here.[/info] 

4. Warning Box

 [warning headline="Warning!"]Add Your Message Here.[/warning] 

5. Success Box

 [success headline="Success"]Add Your Message Here.[/success] 

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by mbt/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm