Tạo Notification Box đẹp cho Blogger Unknown rwxr-xr-x 0 10:06

Filename	Tạo Notification Box đẹp cho Blogger
Permission	rw-r--r--
Author	Unknown
Date and Time	10:06
Label
Action

Hiện tại blog của mình đang sử dụng dịch vụ Blogger của Google, không giống như WordPress hỗ trợ Shortcode nhanh chóng và có nhiều các plugin hỗ trợ. Nếu bạn muốn thêm các Notification Box vào blog thì trông sẽ rất chuyên nghiệp hơn đó. Trước tiên bạn xem demo trước nhé, nếu thích thì hãy thực hiện các bước tiếp theo.

Hưỡng dẫn tạo Notification Box

Các Box được thêm:

1. Information Box
2. Success Box
3. Warning Box
4. Alert Box

Các box mà mình giới thiệu có sử dụng Jquery vì thế khi nhấn vào *×* thì nó sẽ tự đóng box đó lại nhé.

Hưỡng dẫn Tạo Notification Box siêu đẹp cho Blogger/ Blogspot

Đầu tiên bạn chèn đoạn CSS này vào Blog của bạn nhé ( Nếu là WordPress thì edit file style.css cũng OK)

div.alert-message { display: block; padding: 13px 12px 12px; font-weight: bold; font-size: 14px; color: white; background-color: #2ba6cb; border: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 12px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; text-shadow: 0 -1px rgba(0, 0, 0, 0.3); position: relative; } div.alert-message .box-icon { display: block; float: left; background-image: url(�icon.png�); width: 30px; height: 25px; margin-top: -2px; background-position: -8px -8px; } div.alert-message p { margin: 0px; } div.alert-message.success { background-color: #5da423; color: #fff; text-shadow: 0 -1px rgba(0, 0, 0, 0.3); } div.alert-message.success .box-icon { background-position: -48px -8px; } div.alert-message.warning { background-color: #e3b000; color: #fff; text-shadow: 0 -1px rgba(0, 0, 0, 0.3); } div.alert-message.warning .box-icon { background-position: -88px -8px; } div.alert-message.error { background-color: #c60f13; color: #fff; text-shadow: 0 -1px rgba(0, 0, 0, 0.3); } div.alert-message.error .box-icon { background-position: -128px -8px; } div.alert-message a.close { color: #333; position: absolute; right: 4px; top: -1px; font-size: 17px; opacity: 0.2; padding: 4px; } div.alert-message a.close:hover, div.alert-box a.close:focus { opacity: 0.4; }

Thêm Jquery để đóng Box lại

<script type="text/javascript">// <![CDATA[ $(function(){ $(".alert-message").delegate("a.close", "click", function(event) { event.preventDefault(); $(this).closest(".alert-message").fadeOut(function(event){ $(this).remove(); }); }); }) // ]]></script>

Hưỡng dẫn thêm từng box vào bài viết:

Infomation Box

<div class="alert-message info"> <div class="box-icon"></div> <p>This is an info box<a href="" class="close">&times;</a> </div>

Success Box

<div class="alert-message success"> <div class="box-icon"></div> <p>This is a success box<a href="" class="close">&times;</a> </div>

Warning Box

<div class="alert-message warning"> <div class="box-icon"></div> <p>This is a warning box<a href="" class="close">&times;</a> </div>

Alert Box

<div class="alert-message error"> <div class="box-icon"></div> <p>This is an alert box<a href="" class="close">&times;</a> </div>