Cara Membuat Efek Salju Turun di Bloger Menggunakan CSS3

[Blogger] Cara Membuat Efek Salju Turun Dengan CSS3 - Hallo Sobat Blogger, berjumpa lagi dengan saya di blog ANAZ.BIZ.ID. Pada kesempatan kali ini saya akan membagikan tutorial tentang cara membuat efek salju turun menggunakan CSS di blog.

Namun, jika sobat mengintegrasikan efek ini dengan script, pengguna akan merasa kaget dan mengganggu saat mengakses halaman. Dengan pengembangan CSS3 yang kuat, dimungkinkan untuk menggunakan efek ini tanpa menggunakan script dan akan mengurangi lag.

Untuk cara memasangnya, sobat masuk ke halaman admin blog dan pergi kebagian "Edit HTML". Dan tempel kode berikut sebelum tag </body>

<b:if cond='data:blog.pageType not in {"static_page","item"}'> 
<style type="text/css">
.snow-container{position:fixed;width:100%;max-width:100%;z-index:99999;pointer-events:none;overflow:hidden;top:0;height:100%}
.snow{display:block;position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;pointer-events:none;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);-webkit-animation:snow linear infinite;animation:snow linear infinite}
.snow.foreground{background-image:url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png");-webkit-animation-duration:15s;animation-duration:10s}
.snow.foreground.layered{-webkit-animation-delay:7.5s;animation-delay:7.5s}
.snow.middleground{background-image:url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png");-webkit-animation-duration:20s;animation-duration:15s}
.snow.middleground.layered{-webkit-animation-delay:10s;animation-delay:10s}
.snow.background{background-image:url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png");-webkit-animation-duration:25s;animation-duration:20s}
.snow.background.layered{-webkit-animation-delay:12.5s;animation-delay:12.5s}
@-webkit-keyframes snow{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{-webkit-transform:translate3d(5%,100%,0);transform:translate3d(5%,100%,0)}}
@keyframes snow{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{-webkit-transform:translate3d(5%,100%,0);transform:translate3d(5%,100%,0)}}
</style>
<div class='snow-container'>
        <div class='snow foreground'></div>
        <div class='snow foreground layered'></div>
        <div class='snow middleground'></div>
        <div class='snow middleground layered'></div>
        <div class='snow background'></div>
        <div class='snow background layered'></div>
</div>
</b:if>

Kemudian klik "Simpan" dan lihat hasilnya..

Dengan cara sederhana ini, sobat dapat menghiasi blog dengan lebih baik dan indah untuk menyambut tahun baru. Demikian artikel dari saya tentang Cara Membuat Efek Salju Turun Dengan CSS3 di Blog. Semoga artikel yang saya bagikan bermanfaat bagi sobat Blogger semua. Terima Kasih dan Selamat Mencoba