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ả
Cảm ơn bạn đã ghé thăm Troll VL !
Insert Emoticons» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>
Mã Hóa Code Tạo và xem trước comments Cancel Reply
&Convert
'Convert
"Convert
<Convert
>