Noel sắp tới các bạn muốn trang trí cho blogspot của mình thêm sinh động nhưng code và javascript khá phức tạp. Đến với chiasethuthuat.blogspot bạn đừng lo sợ vì mình không hiểu những dong code phức tạp. Sau đây mình sẽ hướng dẫn các bạn tạo hiệu ứng tuyết rơi trên blogspot rất đẹp cùng thự hiện nhé.
Hiệu ứng tuyết rơi cho Blogspot, Website
Demo tại Blog ảnh đẹp
Ư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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWuzd_7kJttOO-j1XIYDbN9DTftmWb7ydlmrZf6sglZHQnB2hUytYSeBHfbzIqSJY3qDK6rm7GFFdzYtz2N4kenMO8z-_ZVSfImknELZU3Mg0RfiZlrQtmzNcZiP7n_ptcVsnzDnPX3rcu/s1600/snow.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivEJkMZtstY_xHmk-z1DVeBt_WhOnwrEtIbSdIWMPXA87BN_T4c8mmWjNhvbMnhgzJDoS9v6og9qyaaBM2pcr2-zk-69cHmd57Xu6nf7XlnzbPQRMmL2Im9pM6-eb9Y__YEo8to5qNJwL2/s1600/snow3.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinUBU2R22QmZLpiYc8kXHPVSjbsS_cino0jGyDH3F_VNZNprI4NwcNZTGL1IzeLaU43OT4nU_uwPQ8IEwcLJU-ZEQw29ujy6lFY9h7KxOwpoFdcj8LsARt7BcQM9Ox6o9M9j7F9HMD9wgr/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;
}
----------------------------------------------- */
@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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWuzd_7kJttOO-j1XIYDbN9DTftmWb7ydlmrZf6sglZHQnB2hUytYSeBHfbzIqSJY3qDK6rm7GFFdzYtz2N4kenMO8z-_ZVSfImknELZU3Mg0RfiZlrQtmzNcZiP7n_ptcVsnzDnPX3rcu/s1600/snow.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivEJkMZtstY_xHmk-z1DVeBt_WhOnwrEtIbSdIWMPXA87BN_T4c8mmWjNhvbMnhgzJDoS9v6og9qyaaBM2pcr2-zk-69cHmd57Xu6nf7XlnzbPQRMmL2Im9pM6-eb9Y__YEo8to5qNJwL2/s1600/snow3.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinUBU2R22QmZLpiYc8kXHPVSjbsS_cino0jGyDH3F_VNZNprI4NwcNZTGL1IzeLaU43OT4nU_uwPQ8IEwcLJU-ZEQw29ujy6lFY9h7KxOwpoFdcj8LsARt7BcQM9Ox6o9M9j7F9HMD9wgr/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ả. - Thủ thuật Blogspot
</div>
Bước 5: Lưu mẫu lại và xem kết quả. - Thủ thuật Blogspot
Không có nhận xét nào:
Đăng nhận xét