Skip to main content

Cara Membuat Efek Salju di Blogger Versi Terbaru

Cara Membuat Efek Salju di Blog Versi Terbaru

Cara membuat Efek Salju di Blogger Versi Terbaru - Banyak cara yang dapat kita lakukan untuk mempercantik blog kita agar terlihat lebih menarik, salah satu contohnya adalah memasang efek salju di dalam blog kita.

Efek salju berjatuhan pada blog pernah saya gunakan saat jaman saya sekolah dulu, bukan hanya sekedar mempercantik blog, tapi juga menarik minat pembaca agar tetap berlama-lama berada di blog saya. 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 pandang pembaca.

Namun pada kesempatan ini saya akan membuat efek salju versi terbaru pada blog, terlihat indah, tidak menghalangi pandangan pembaca dan tidak terlalu memberatkan proses memuat blog. Efek salju ini pun saya gunakan beberapa blog pribadi saya untuk mempercantik tampilan blog saya, bahkan kadang saya gunakan pada saat tahun baru, agar suasana musim salju bisa dinikmati di dalam blog.

Untuk tampilan salju di dalam blog ini berbeda dengan versi terbaru yang terlihat kecil dan menumpuk di bawah blog. Di dalam versi terbaru ini efeknya lebih halus, bola salju yang berukuran tidak tidak terlalu berasa dan lebih enak dipandang mata. Bagi anda yang ingin memasang efek salju di blog ini, anda bisa mengikuti langkah-langkah di bawah ini agar dapat di terapkan di dalam blog anda yaitu dengan menggunakan HTML/JavaSript.

Cara Membuat Efek Salju Bertaburan di Blogger

  1. Masuk kedalam blog anda > pilih Tema > kemudian pilih Edit HTML
  2. Kemudian letakkan kode di bawah ini tepat berada 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>
  3. Jika sudah, letakkan kode ini tepat berada di atas kode </head>
    <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>
  4. Jika sudah pilih Simpan Tema

Bagi yang ingin melihat hasilnya seperti apa, bisa di cek disini:

Sebenarnya ada banyak cara untuk mempercantik tampilan blog kita contohnya seperti memasang efek bintang, efek daun berjatuhan atau mengganti template blog yang lebih hidup. Namun untuk kali ini cukup sekian saja dari saya, jika ada yang ingin ditambahkan bisa langsung ke kolom komentar, Terimakasih.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar