Tin mới :
Đăng lúc 18:26 bởi Nguyễn Phúc
Trang của bạn đã có hiệu ứng loading chưa ? hiệu ứng loading sẽ góp phần làm blog của bạn thêm chuyên nghiệp hơn, người dùng sẽ không nhàm chán khi nhìn bài viết của bạn được tải ì ạch nữa. Mình cũng đang dùng hiệu ứng này và thấy cũng khá ổn.
Hiệu ứng này chủ yếu là dùng hiệu ứng ở CSS3 nên khá nhẹ nhàng nhé, yên tâm về tốc độ luôn. hehe
Hướng dẫn :
1. Đăng nhập vào Blog.
2. Vào phần Mẫu chọn chỉnh sửa HTML.
3. Copy đoạn này vào trên thẻ <head>
4. Copy đoạn javascript này vào trên thẻ </body>
5. Lưu lại xem kết quả.
Kết bài : một trong những xu hướng cho các bạn làm tăng sự chuyên nghiệp cho ngôi nhà blogspot là đây hjhj chúc mọi người thành công !
Hiệu ứng này chủ yếu là dùng hiệu ứng ở CSS3 nên khá nhẹ nhàng nhé, yên tâm về tốc độ luôn. hehe
Hướng dẫn :
1. Đăng nhập vào Blog.
2. Vào phần Mẫu chọn chỉnh sửa HTML.
3. Copy đoạn này vào trên thẻ <head>
<style type="text/css">
#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}.loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}.loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}
</style>
4. Copy đoạn javascript này vào trên thẻ </body>
<div id="loadhalaman">
<div class="loadball"></div>
<div class="loadball-2"></div>
</div>
<script type="text/javascript">
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
$internalLinks.click(function() {
$('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
});
$('#loadhalaman').click(function() {
$(this).hide();
});
});
</script>
5. Lưu lại xem kết quả.
Kết bài : một trong những xu hướng cho các bạn làm tăng sự chuyên nghiệp cho ngôi nhà blogspot là đây hjhj chúc mọi người thành công !
Nội Quy Khi Comment:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Những nhận xét spam sẽ bị xóa.
» Sử dụng tài khoản Google để được trợ giúp.
» Nặc danh thường không được chào đón.
Rất đẹp, thanks bạn!
Trả lờiXóamình cũng đang dùng mà hjhj
Xóađẹp quá, cái này dùng hiệu ứng css à bạn
Trả lờiXóađúng rồi đó bạn ak, CSS3 nó nâng cấp đồ họa kinh lắm, nhiều hiệu ứng chuẩn hjhj
Xóa