Cara Membuat Efek Salju di Blog dengan CSS

Cara Membuat Efek Salju di Blog dengan CSS
Daftar Isi Artikel
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.
  1. Di Dashboard Blogger, pergi ke TemplateEdit HTML.
  2. 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>
  3. 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>
  4. 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 blogger, semoga artikel ini dapat bermanfaat dan semakin memperindah tampilan blog kalian terimakasih.

  1. Untuk membuat judul komentar, gunakan <i rel="h2">Judul Komentar</i>
  2. Untuk membuat kotak catatan, <i rel="quote">catatan</i>
  3. Untuk membuat teks stabilo, <i rel="mark">mark</i>
  4. Untuk membuat teks mono, <i rel="kbd">kbd</i>
  5. Untuk membuat kode singkat, <i rel="code">shorcode</i>
  6. Untuk membuat kode panjang, <i rel="pre"><i rel="code">potongan kode</i></i>
  7. Untuk membuat teks tebal, <strong>tebal</strong> atau <b>tebal</b>
  8. Untuk membuat teks miring, <em>miring</em> atau <i>miring</i>

Baca Juga:

Baca Juga:


Konten Unggulan