Baca juga: Cara Merubah Icon Blog di Semua Browser
Jika kalian penasaran seperti apa Demo dari efek salju nya, klik Disini ya gan.
Cara Membuat Efek Turun Salju di Blog
Untuk memberikan Efek Salju di blog, Pertama-tama kalian buka Blogger -> Tema -> Edit HTML. lalu copy kode dibawah ini dan pastekan tepat diatas kode </body>.
<div class='contentz'>
<canvas class='snow' id='snow'></canvas>
</div>
<script type='text/javascript'>
//<![CDATA[
!function(){function t(t){var n=t.getContext("2d"),e=0,i=0,o=[],d=function(){this.x=this.y=this.dx=this.dy=0,this.reset()};function a(){e=window.innerWidth,i=window.innerHeight,t.width=e,t.height=i,function(t){if(t!=o.length){o=[];for(var n=0;n<t;n++)o.push(new d)}}(e*i/1e4)}d.prototype.reset=function(){this.y=Math.random()*i,this.x=Math.random()*e,this.dx=1*Math.random()-.5,this.dy=.5*Math.random()+.5},a(),function t(){n.clearRect(0,0,e,i),n.fillStyle="rgba(255,255,255,.3)",o.forEach(function(t){t.y+=t.dy,t.x+=t.dx,t.y>i&&(t.y=0),t.x>e&&(t.reset(),t.y=0),n.beginPath(),n.arc(t.x,t.y,5,0,2*Math.PI,!1),n.fill()}),window.requestAnimationFrame(t)}(),window.addEventListener("resize",a)}var n;n=function(){t(document.getElementById("snow"))},"loading"!=document.readyState?n():document.addEventListener("DOMContentLoaded",n)}();
//]]>
</script>Jika sudah, Sekarang tambahkan kode CSS dibawah ini dan pastekan tepat diatas kode </head>.
<style type='text/css'>
/* Efek Salju Terbaru */
.snow{position:fixed;top:0;left:0;right:0;pointer-events:none;z-index:20}
.contentz{height:100%;position:relative;overflow:hidden;z-index:1}
</style>Jika sudah, Sekarang klik Simpan dan lihatlah tampilan blog kalian.
Baca juga: Cara Mengubah Warna Address Bar Blog Pada Browser Mobile
Nah, begitulah cara memberikan efek salju di blog. Jika kalian suka dengan artikel ini, kalian bisa memfollow fanpage kita di Instagram (@infinityxsamz).
Penutup
Terima kasih telah membaca artikel Cara Membuat Efek Turun Salju di Blog, Semoga bermanfaat untuk kalian semua.