Cara Membuat Efek Salju Berjatuhan di Blog versi Terbaru

Rafiqi, S.Kom.
Rafiqi, S.Kom.
Mei 26, 2021
2

cara-membuat-efek-salju-berjatuhan-di-blog

Hi Web Developer kembali lagi bersama guru design, kali ini gurudesign akan membagikan tutorial Cara Membuat Efek Salju Berjatuhan di Blogger atau Blogspot versi Terbaru. Efek ini akan memperindah tampilan blog kalian dan juga akan menambah suasana blog, sehingga blog akan terlihat hidup dengan efek salju 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.

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.

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.

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='cont-salju'>
<canvas class='salju' id='salju'></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("salju"))},"loading"!=document.readyState?n():document.addEventListener("DOMContentLoaded",n)}();
//]]>
</script>

Setelah itu letakkan kode css tepat di atas kode </head>

<style type='text/css'>
/* Efek Salju Berjatuhan */
.salju{position:fixed;top:0;left:0;right:0;pointer-events:none;z-index:20}
.cont-salju{height:100%;position:relative;overflow:hidden;z-index:1}
</style>

Lalu Simpan Tema.

Untuk melihat hasilnya seperti apa, bisa di cek demo:

Result

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.
Rafiqi, S.Kom.