Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
kiem tien, kiem tien online, kiem tien truc tuyen, kiem tien tren mang
Sunday, June 29, 2014

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:
  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>
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×

Thủ Thuật BaoNet.Org×

Thủ Thuật BaoNet.Org×

Thủ Thuật BaoNet.Org×

0 comments:

Post a Comment

Popular Posts