Tạo Notification Box – Box thông báo đẹp cho Blogger/ WordPress

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ợ Shortcodes 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:

Information Box
Success Box
Warning Box
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>

Chúc các bạn có một blog cực đẹp nhé! Hẹn gặp lại các bạn ở các bài hưỡng dẫn sau.

Thủ Thuật BaoNet.Org×

Breaking News