Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara membuat efek hujan salju dengan Kode Html dan Javascript


Percantik tampilan blog adalah sebuah keinginan untuk mempercepat peningkatan kualitas Blog itu sendiri, pada dasarnya Pengunjung lebih banyak menyukai blog dengan tampilan unique , lantas Pengunjung akan kembali dan nyaman untuk berkunjung dan ingin membaca lebih banyak artikel-artikel yang di sediakan.
Berbeda dengan Blog dan website yang memiliki tema atau Template yang alakadarnya / biasa saja " Pengunjung akan lebih cepat bosan " dan blog trafiknya akan menurun ,,

Pada hari ini ; tgl 10 Des 2021 , saya akan memberikan panduan Tutorial cara menambahkan efek pada tampilan Blog atau website hujan salju.

Cara menambahkan efek hujan salju di Blog atau Blogger

Langkah awal , bagaimana cara menambahkan-nya, berikut panduan lengkap-nya.?

1. Login Dashboard Blogger
2. Buka Navigasi Blogger
3. Cari / buka tema Blogger
4. Scroll back kebawah " pilih "
5. Edit html 
6. Cari kode JavaScript-nya dalam tema Blogger seperti kode berikut
</body>.. atau...&lt;/body&gt;
Setiap kode  di Template berbeda-beda tapi anda bisa gunakan antara kode javaScript yang saya jelaskan .
7. Apa bila kode javaScript seperti berikut sudah ketemu

</body>... atau...&lt;/body&gt;

8. Copy Kode JavaScript efek hujan salju di bawah ini

<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>

Letakkan kode javaScript tepat di atas kode

</body>... atau...&lt;/body&gt;

9. Berikutnya Copy kode Html di bawah ini 

<style type='text/css'>
/* Efek hujan Salju ayokerja.xyz */
.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>

Letakkan kode-nya tepat di atas kode 

</head>... atau...&lt;/head&gt;

10. Save tema/ Simpan Template Blogger
11. Cek hasilnya..

Efek hujan salju hanya cocok untuk Blog bertema hitam atau gelap

Mengapa hanya cocok blog atau website yang bertema gelap , karena efek hujan salju berwarna putih seperti layaknya salju , dengan tema Blogger sama berwarna putih , efek salju tidak sesuai pada tampilan , efek salju berwarna putih  tidak akan terlihat menarik berbeda dengan tema Blog gelap.

Penutup

Semoga , artikel yang saya bagikan Selalu bermanfaat bagi pengunjung setia blog ini , terimakasih