Trang chủ
Loading...
- Như vậy ưu điểm của việc sử dụng thủ thuật này là load tốt vì không sử dụng bất kỳ 1 đoạn Javascript nào để dùng làm hiệu ứng tuyết rơi.
Hướng dẫn thêm hiệu ứng tuyết rơi cho Blogspot
Bước 1: Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)Bước 2: (Ctrl + F)Tìm tới ]]></b:skin> và dán code dưới đây ngay trên nó
/* Snow falling for Blogger
----------------------------------------------- */
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
#falling-snow {
background-image: url(http://4.bp.blogspot.com/-26HXwn0tlWA/UaJZYbdbDnI/AAAAAAAADfA/AeiBdAIR0zU/s1600/snow.png), url(http://4.bp.blogspot.com/-8RALuvldFh8/UaJZY1tUptI/AAAAAAAADfM/rIaHhS2A4yQ/s1600/snow3.png), url(http://4.bp.blogspot.com/--AYxx7PegOc/UaJZYvy9wVI/AAAAAAAADfE/0Lp5NLrudxc/s1600/snow2.png);
-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 20s linear infinite;
-ms-animation: snow 20s linear infinite;
animation: snow 20s linear infinite;
}Bước 3: Tìm tới <body> (Lưu ý, nếu không thấy thì bạn tìm: <body expr:class='"loading" + data:blog.mobileClass'> ) và dán thẻ HTML dưới đây ngay dưới nó
<div id='falling-snow'>Bước 4: Tìm tới </body> và dán code dưới đây ngay trên nó
</div>Bước 5: Lưu mẫu lại và xem kết quả.
Chúc các bạn vui vẻ !
Loading...
0 nhận xét:
Đăng một bình luận