Cara Membuat Efek Salju Berjatuhan di Blog versi Terbaru

Aditya Nur Kahfi
Agustus 25, 2020
Cara Membuat Efek Salju Berguguran di Blogger versi Terbaru
AdityaTekno.com - Kali ini saya akan membagikan tutorial Cara Membuat Efek Salju Berjatuhan di Blogger atau Blogspot versi Terbaru. Efek salju ini akan mempercantik tampilan blog. Efek salju ini juga akan menambah suasana blog, sehingga blog akan terlihat hidup dengan efek ini.

Sebenarnya efek salju berjatuhan seperti ini sudah banyak diterapkan oleh blogger jaman dahulu dan bahkan cukup populer pada waktu itu. Baik itu blogger pemula maupun blogger kelas master sekalipun.

Baca Juga : Cara Membuat Animasi Slide Button di Postingan Blog

Namun, entah mengapa efek salju di dunia blogger saat ini jadi begitu tidak populer, hanya beberapa orang saja yang menggunakannya. Mungkin banyak orang yang mengatakan bahwa memasang efek salju dikatakan sebagai pemula atau ada juga yang bilang menghalangi pandangan pembaca.

Baca Juga : Cara Membuat Pita dengan CSS di Postingan Blog

Akan tetapi, dipostingan ini saya akan membagikan cara membuat efek salju berjatuhan versi terbaru pada blog, terlihat indah, tidak menghalangi pandangan pembaca dan tidak terlalu memberatkan proses memuat (loading) blog.

Baca Juga :

Efek salju ini saya gunakan pada saat menjelang tahun baru, agar suasana musim salju bisa dinikmati di dalam blog.

Nah, bagi anda yang tertarik menerapkannya di blog, silahkan ikuti langkah-langkah dibawah ini.

Cara Memasang Efek Salju Berjatuhan di Blog versi Terbaru


Pertama, buka Blogger >> Tema >> Edit HTML.

Kemudian, letakkan kode berikut ini tepat di atas kode </body>
<div class='snowsand'>
<canvas class='snowball' id='snowball'></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("snowball"))},"loading"!=document.readyState?n():document.addEventListener("DOMContentLoaded",n)}();
//]]>
</script>

Setelah itu letakkan kode ini tepat di atas kode </head>
<style type='text/css'>
/* Efek Salju Berjatuhan */
.snowball{position:fixed;top:0;left:0;right:0;pointer-events:none;z-index:20}
.snowsand{height:100%;position:relative;overflow:hidden;z-index:1}
</style>

Lalu Simpan Tema.

Untuk melihat hasilnya seperti apa, bisa di cek dibawah:
See the Pen

Cara Membuat Efek Salju Berjatuhan di Blog versi Terbaru by AdityaTekno (@AdityaTekno)

on CodePen.


Perlu anda ketahui, sebetulnya ada banyak cara untuk mempercantik tampilan blog kita, misalnya seperti memasang efek bintang, efek bunga sakura, efek daun berjatuhan atau kalo tidak ya mengganti template blog yang lebih hidup.

Demikian tutorial Cara Membuat Efek Salju Berjatuhan di Blog versi Terbaru. Semoga bisa bermanfaat dan terima kasih sudah berkunjung. Salam AdityaTekno.com

sumber:
https://www.bungfrangki.com/2015/07/kumpulan-widget-efek-salju-bintang-berjatuhan.html
https://www.analisyuki.com/2018/12/cara-membuat-efek-salju-di-blog.html