Hiệu ứng tuyết rơi cho Blogspot, Website

Nghe nói trời miền Bắc đang trở lạnh. Cũng sắp tới 1 mùa đông khá lạnh và bạn có muốn Blog, Website của mình cũng trở lên hòa cùng với thời tiết không? Bài viết hôm nay ITViet360 hướng dẫn bạn thêm hiệu ứng tuyết rơi cho Blogspot, bạn hoàn toàn sử dụng được trên nền những Website khác vì code dưới đây rất đơn giản, chỉ cần 1 đoạn CSS và 1 thẻ HTML là sẽ làm được điều ấy.
- 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.

Demo tại Blog Hình ảnh đẹp

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/AVvXsEiOwormtXmhSZlezwhU9iLn311ZC8UncqNKSA-QOT7yQNaHutmMdnQIRMz9cZ0T38FL84D-RQPfYahCKOL4zrcLckSlitvWkXpkcGRpJCj5qds4BsvrisBllLB_Lm_tQ-V2KzOIrxkypfHg/s1600/snow.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc_7lDCc1P2hnTUkfcMHeO6Fi-MlSZpl3lAnRRr4OoyQohA0LwxJuctbcwcjCCIOYda1c0hbl3JoSA-xrFjIlDAwdbZRM7YkWBH7HexdsaM4j1OpG0vC9rexc_KV_pPnUHi3UsXOuAs_Mo/s1600/snow3.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggFD1AhnZeNcjgbDSlbCTvlgcSnJDODJbC7hI6UEy0W95pSxSunOjx5BIEQy8Pd_ENcDyxYuECucW2nCb5bOzOhKzMF-q9qSlw5IEqBFE6a26ZcQ5ZGOH7bddFWqGW0ZfBHqUIIMkPSaK3/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ẻ ! Chuyên mục: Thu thuat, Thu thuat blogspot, thu-thuat, thu-thuat-blogger

IT Việt 360

Hiệu ứng tuyết rơi cho Blogspot, Website

Hướng dẫn thêm hiệu ứng tuyết rơi cho Blogspot

Nhận bài viết mới qua Email

0 nhận xét:

Đăng một bình luận

Hiệu ứng tuyết rơi cho Blogspot, Website

Hướng dẫn thêm hiệu ứng tuyết rơi cho Blogspot

Nhận bài viết mới qua Email

Bài viết liên quan có thể bạn cũng thích...

0 nhận xét:

Đăng một bình luận