Tạo khung thông báo cho blogger/blogspot
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ớ thayjQuery.JS bằng link mới bạn vừa up lên host)
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
<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/AVvXsEjX6pBMXUrgfledOyq_Zs96k1aGYezN1Mrkgl3djdH2xvfCmVnF2bJ96aXC7vYOoT29SjUnJcRBlPxz7Sxh_1o9edHN4w3Cq23XCqoEiaJ0ZHEl2-AbtUgjzNy55faSGAF5xpsK57DpqAw/) 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/AVvXsEiF9tUPu0owagJ2at7vDpKLuJ9JkWEvhyGgLPxVswMxBTFc7mfGRgqKoAaF-2RDK9rDutLbkhefbxOalu4VfpFH7Eb5ABFWQFaGJWeE5VQHvUCb_y65yaXSadDHvINM-D5EWFECxdzLs2w/);
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>
Bước 3: Save template. (Lưu mẫu)
CHÚC CÁC BẠN THÀNH CÔNG.
Tạo khung thông báo cho blogger/blogspot
Đánh giá bởi Unknown
trên
06:38
Xếp hạng:
Đánh giá bởi Unknown
trên
06:38
Xếp hạng:
Không có nhận xét nào: