Thêm hiệu ứng loading vào blog của bạn
11/22/12
Thủ thuật này giúp bạn thêm hiệu ứng loading vào blog khiến cho độc giả đỡ phải sốt ruột thay vì đợi blog của bạn load từng phần một. Hi vọng sẽ giúp blog của bạn thành công hơn
Bước 1 : Vào blogger > Mẫu > Chỉnh sửa HTML
Bước 2 : Chọn mở rộng mẫu Tiện Ích
Bước 3 : Tìm thẻ đóng </head> và dán trước nó đoạn code phía dưới
<style>Bước 4 : Tìm thẻ <body> và dán sau nó đoạn code bên dưới
/* jQuery page loading effect by www.trollvl.com */
#tvl-loading {
position: fixed;
z-index: 50;
top: 0; left: 0;
width: 100%; height: 100%;
background: #FDFEF8 url(https://huyco-troll.googlecode.com/svn/trunk/icon/tvl-Loadding.gif) no-repeat center;
line-height: 350px;
text-align: center;
font-size: 36px;
color: #353231;
text-indent: -9999px;
}
.TVL#tvl-loading { display: none; }
@media only screen and (device-width: 768px) {
#loading {
position:absolute;
width:1040px;
min-height:768px;
}
}
#tvl-progress-bar {
position: absolute;
top: 0; left: 0;
background: #de1301;
opacity: 0.8;
width: 0;
height: 18px;
}
#tvl-loader {
height: 100%;
display: none;
}
</style>
<script>
(function($){
$("html").removeClass("TVL");
$("#header").ready(function(){ $("#tvl-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#tvl-progress-bar").stop().animate({ width: "75%" },1500) });
$(window).load(function(){
$("#tvl-progress-bar").stop().animate({ width: "100%" },600,function(){
$("#tvl-loading").fadeOut("fast",function(){ $(this).remove(); });
});
});
})(jQuery);
</script>
<div id='tvl-loading'><div id='tvl-progress-bar'></div><div id='tvl-loader'>Loading...</div></div>Hoặc nếu bạn muốn hiệu ứng loading chỉ có tác dụng trên trang chủ thì thêm đoạn code bên dưới
<b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='tvl-loading'><div id='tvl-progress-bar'></div><div id='tvl-loader'>Loading...</div></div></b:if>Bước 5 : Save lại template và xem kết quả
Tin liên quan
XEM TRÊN MOBILE
No comments:
Post a Comment