Renovasi Otak – Bagaimana cara membuat efek salju di blog? Agar pengunjung betah berlama-lamaan di blog Anda, alangkah baiknya Anda berfikir bagaimana cara agar hal itu terjadi. Ntah itu mendesain blog semenarik mungkin, atau menambahkan efek-efek lain agar pengunjung tidak bosan.
Nah, disini saya ada tutorial keren nih yang dapat diterapkan di blog Anda masing masing. Yaitu efek salju, penasaran dengan tampilannya?
LIHAT DEMO
Gimana? menarik bukan? yuk langsung aja.
Cara Menambahkan Efek Salju di Blogger
Untuk membuat efek salju di blog, Anda cukup mengikuti beberapa langkah mudah berikut ini.
- Di Dashboard Blogger, pergi ke Template ➞ Edit HTML.
- Cari </head> dan letakkan kode dibawah ini tepat diatasnya.
<style type='text/css'>
/* Efek Bola Salju */
.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> - Selanjutnya letakkan kode ini tepat diatas </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> - Jika sudah tekan Simpan.
*Code di atas sangatlah ringan karena hanya menggunakan CSS dan JS Internal, tidak akan mempengaruhi loading blog berlebihan.
Cukup mudah bukan? Itulah tutorial singkat cara membuat efek salju di blog, semoga artikel ini dapat bermanfaat dan semakin memperindah tampilan blog kalian terimakasih.
