Thủ thuật Blog: Khung thông báo cho blog

Đăng bởi: CTG blog

Thứ Tư, tháng 6 08, 2011

[33]
Thủ thuật: Khung thông báo cho blog
Nguồn: Noct

Giới thiệu: Khi truy nhập vào blog, một hộp thoại thông báo sẽ xuất hiện. Có thể là thông báo về một sự kiện nào đó (ví dụ như chuyển domain hoặc đăng kí nhận tin...)

Điểm đặc biệt của khung này là người đọc có thể tắt nó đi nếu muốn, như vậy sẽ đảm bảo tính thẩm mỹ cho blog của bạn.

Bạn có thể đặt khung ở vị trí bất kỳ trong blog sao cho dễ bắt mắt nhất.

CÁCH THỰC HIỆN

1. Đăng nhập Blogger
2. Chọn: Mẫu > Chỉnh sữa HTML

3. Chèn script.

Bước 1: Yêu cầu phải có jQuery. (Có rồi thì bỏ qua)

1. Tải về máy một trong ba phiên bản jQuery sau: 1.3.1 | 1.3.2 | 1.4.3

2. Up lên host cho link direct.

- Gợi ý: Dùng host của google: http://code.google.com/
- Hướng dẫn: Here
- Sau khi up lên host, thì lấy link vừa up.

3. Tìm thẻ <head>

- Thêm vào dưới nó đoạn code sau:
(Nhớ thay ~~jQuery.JS~~ bằng link mới bạn vừa up lên host)

<script src='jQuery.JS' type='text/javascript'/>

4. Save template. (Lưu mẫu)

Bước 2: Tìm thẻ đóng </body>

- Thêm vào trước nó đoạn code sau:

<!-- Khung thông báo cho blog --> 
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>

/*Khung thông báo*/
.notification{
height:70px;
width:500px;
display:block;
position:fixed;
/*Vị trí của khung thông báo trên blog*/
bottom:10px;
left:10px;
/*Taọ bóng và bo góc*/
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
/*Hiệu ứng bóng đổ*/
-moz-box-shadow:2px 2px 2px #cfcfcf;
-webkit-box-shadow:2px 2px 4px #cfcfcf;
box-shadow:2px 2px 2px #cfcfcf
}

/*Dấu X đóng khung thông báo*/
.notification span{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDF2GZAIf7a3-BEkZ_n_VLcxrx9QgPzopxBkHsGywA1MB5qNgAtvcqYbC6YIG0R7N5z1bZk9347M1QxebcITrgGfpKntMT9Q4o0qQgIUjFvqON3s0B-FnnpMpvyVlO9FesTlfkumTcvdA/) no-repeat right top;
cursor:pointer;
display:block;
width:48px;
height:48px;
position:absolute;
/*Vị trí dấu X*/
top:-20px;
right:-25px
}

/*Màu chữ, font, canh lề trong khung thông báo*/
.notification p{
width:400px;
font-family:Arial,Helvetica,sans-serif;
color:#323232;
font-weight:bold;
font-size:14px;
line-height:21px;
text-align:left;
float:right;
margin:10px 15px 0 0;
margin-top:15px;
text-shadow:0 0 1px #f9f9f9 /*for lt IE8*/padding:0;/* TEXT SHADOW */ 
}

/*Viền khung thông báo*/
.warning{
border-top:1px solid #fefbcd;
border-bottom:1px solid #e6e837;
/*Nền khung kiểu Gradients*/
background:#feffb1;
background:-moz-linear-gradient(top,#feffb1,#f0f17f);
background:-webkit-gradient(linear,left top,left bottom,from(#feffb1),to(#f0f17f))
}

/*Hình Waring*/
.warning:before{
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqC5JuNP_4kGVaEIbpV8hOdBOwMeO-VL4-xR1Ghh2IhQhSfpG9Wo3DalS2DRSmz9urzHf8lzxeojYZoBpdqC7CJltKhBMugkl-glLSDrQk0OzTGCPDD3IQm9qH8Oe4r035lT5F8nzXp54/);
float:left;
margin:0px 10px 0 0px
}

/*Chữ Warning*/
.warning strong{
color:#e5ac00;
margin-right:15px
}

</style>
<script type='text/javascript'>
$(document).ready(function(){$('.notification').hover(function(){$(this).css('cursor','auto');});$('.notification span').click(function(){$(this).parent().fadeOut(800);});});</script>
<div class='notification warning'><span/>
<p><strong>Warning!</strong>ĐÂY LÀ MỘT THÔNG BÁO! CLICK VÀO NÚT ĐỎ CÓ DẤU X BÊN PHẢI ĐỂ TẮT!!!</p></div></b:if>