Cara Membuat Efek Salju di Blog Blogger dan WordPress

Menambahkan efek salju adalah salah satu cara menghias blog agar tampil menarik. Untuk membuat efek salju di blog WordPress atau Blogger kita dapat menggunakan kode JavaScript, CSS, atau dengan plugin.

Mendekati akhir tahun, sudah menjadi tradisi tersendiri bagi beberapa pemilik website untuk menghias dan mempercantik tampilan blog yang mereka miliki. Momen akhir tahun yang berdekatan dengan perayaan natal membuat efek salju menjadi salah satu hiasan blog yang banyak dicari.

Efek salju sendiri bukanlah hal baru dan sudah digunakan sejak lama untuk memperingati pergantian musim ke musim dingin yang banyak terjadi di belahan bumi bagian utara. Dengan menggunakan efek salju, website kita akan dipenuhi animasi titik-titik putih seperti salju yang berjatuhan tanpa henti.

Untuk kamu yang juga tertarik untuk menampilkan efek salju di blog atau website, ternyata ada banyak cara mudahnya lho!

Cara Menambahkan Efek Salju di Blogger dan WordPress

Ada banyak cara untuk memunculkan efek salju pada blog/website berbasis Blogger atau WordPress. Untuk cara manual kita bisa menambahkan kode JavaScript atau menggunakan CSS. Dan khusus pengguna WordPress, ada juga cara membuat efek salju dengan menggunakan plugin.

1. Cara menambahkan efek salju dengan JavaScript.

Cara pertama yang bisa kita lakukan untuk membuat efek salju di Blogger atau WordPress adalah dengan menambahkan kode JavaScript. Kode ini nantinya akan kita masukan secara manual ke dalam template atau tema blog yang kita pakai. Jika kamu belum tahu caranya, silahkan simak tutorial singkat ini terlebih dahulu.

Menambahkan kode Javascript di Blogger

Cara pertama:

1. Masuk ke dasbor Blogger.
2. Pilih menu TEMA » EDIT HTML.
3. Cari kode </body> dan salink kode JavaScript tepat di atas tag </body> tersebut.
4. Simpan tema.

Cara kedua:

1. Masuk ke dasbor Blogger.
2. Pilih menu TATA LETAK » TAMBAHKAN GADGET, lalu pilih gadget HTML/JAVASCRIPT.
3. Salin kode Javascript lalu klik SIMPAN.

Menambahkan kode Javascript di WordPress

Cara pertama:

1. Masuk ke dasbor WordPress.
2. Pilih menu TAMPILAN » EDITOR.
3. Pilih file footer.php dan cari tag </body> lalu salin kode JavaScript tepat di atas tag </body> tersebut.
4. Simpan tema.

Cara kedua:

1. Masuk ke dasbor WordPress.
2. Pilih menu PLUGIN » TAMBAH BARU.
3. Pasang dan aktifkan plugin untuk menambahkan kode kustom seperti Code Snippet atau Simple Custom CSS and JS.
4. Buka plugin dan salin kode Javascript lalu simpan.

Untuk kodenya sendiri, saya akan menggunakan kode Javascript SnowStorm dari Scott Schiller. Tutorial ini sendiri cukup unik karena sudah dibuat dari tahun 2003 dan terus dimodifikasi mengikuti perkembangan Javascript. Berikut adalah kode Javascript yang bisa kamu salin untuk memunculkan efek salju di blog.

<script src="https://cdn.jsdelivr.net/gh/scottschiller/Snowstorm/snowstorm.js" type="text/javascript"></script>

Untuk mengubah tampilan efek salju, kita bisa mengubah variabel pada kode tersebut seperti

<script>
snowStorm.snowColor = '#99ccff';   // mengubah warna salju
snowStorm.flakesMaxActive = 96;    // menampilkan jumlah salju yang muncul
snowStorm.useTwinkleEffect = true; // membuat salju berkelap-kelip
</script>

Untuk keterangan lebih lanjut dan melihat apa saja variabel yang bisa kamu ubah, simak laman tutorial modifikasi SnowStorm.

2. Cara membuat efek salju dengan CSS

CSS tidak hanya bisa digunakan untuk mempercantik tampilan blog tetapi juga bisa digunakan untuk membuat animasi sederhana. Jika kamu belum tahu cara menambahkan kode CSS ke dalam template/tema, silahkan simak tutorial singkat ini terlebih dahulu.

Menambahkan kode CSS di Blogger

Saya sudah pernah menulis tutorial lengkap cara memasukan kode CSS di Blogger. Secara singkat, inilah langkah-langkahnya,

1. Login ke dasbor Blogger.
2. Masuk ke menu TEMPLATE » SESUAIKAN lalu pilih opsi TINGKAT LANJUT » TAMBAHKAN CSS.
3. Salin kode CSS lalu simpan perubahan.

Menambahkan kode CSS di WordPress

Selain menggunakan plugin, kode CSS dapat dimasukan secara manual dengan langkah-langkah berikut ini,

1. Login ke dasbor WordPress
2. Masuk ke menu TAMPILAN » SESUAIKAN.
3. Cari menu CSS Tambahan dan salin kode CSS di sini.
4. Simpan perubahan.

Untuk kodenya sendiri saya ambil dari tutorial yang dibuat oleh Tim Strifler. Sebelum kita membuat efek salju dengan CSS, download tiga gambar berikut ini lalu upload ke cloud storage, situs hosting gambar, atau situs kamu sendiri. Setelah itu catat link menuju gambar tersebut. Setelah itu salin kode berikut ini dan ganti link gambar pada background-image: url dengan link gambar kamu sendiri.

body {
position: relative;
}
​
body:before {
content: '';
   display: block;
   position: absolute;
   z-index: 999999999999999 !important;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none;
background-image: url('https://www.dropbox.com/s/bgwuzfu83pjb5s1/divi-life-snowflakes-a-2.png?dl=1'),
url('https://www.dropbox.com/s/54le1eyh01vb253/divi-life-snowflakes-b.png?dl=1'),
url('https://www.dropbox.com/s/gfm01rozxanf3ub/divi-life-snowflakes-d.png?dl=1');   
    -webkit-animation: snow 15s linear infinite;
    -moz-animation: snow 15s linear infinite;
    -ms-animation: snow 15s linear infinite;
    animation: snow 15s linear infinite;
  
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

Untuk menampilkan efek salju hanya pada pos atau laman tertentu saja, kita bisa memodifikasi kode di atas menjadi seperti ini. Dengan begitu kita hanya perlu menambahkan class="life-snow" saja.

.life-snow {
   position: relative;
}
​
.life-snow:after {
content: '';
   display: block;
   position: absolute;
   z-index: 999999999999999 !important;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none;
background-image: url('https://www.dropbox.com/s/bgwuzfu83pjb5s1/divi-life-snowflakes-a-2.png?dl=1'),
url('https://www.dropbox.com/s/54le1eyh01vb253/divi-life-snowflakes-b.png?dl=1'),
url('https://www.dropbox.com/s/gfm01rozxanf3ub/divi-life-snowflakes-d.png?dl=1');
    -webkit-animation: snow 15s linear infinite;
    -moz-animation: snow 15s linear infinite;
    -ms-animation: snow 15s linear infinite;
    animation: snow 15s linear infinite;
  
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}   

3. Cara membuat efek salju dengan plugin di WordPress

Untuk kamu yang tidak mau ambil pusing dengan koding, kamu bisa menggunakan plugin khusus untuk menambahkan efek salju di website. Namun sayang hal ini hanya bisa dilakukan pemiik website WordPress saja.

Salah satu kelebihan menggunakan plugin adalah menu pengaturan yang sangat mudah dan lengkap sehingga kita bisa mengatur tampilan efek salju sesuai dengan keinginan kita. Beberapa hal yang bisa kita ubah antara lain ukuran salju, kecepatan salju, hingga tipe salju. Plugin yang bisa digunakan untuk menampilkan efek salju di WordPress antara lain,

• WP Snow Effect
• Tribulant Snow Storm
• Snow My WP

Kesimpulan

Seperti kamu lihat, ada banyak cara untuk menambahkan efek salju di website/blog. Meski begitu kamu harus tahu ada beberapa catatan untuk masing-masing metode.

JS:

• Kadang terlalu berat sehingga animasi tidak tampak berjalan mulus.
• Tidak akan muncul pada browser yang menonaktifkan Javascript.
• Kode JS SnowStorm yang saya gunakan di atas tidak akan muncul pada smartphone agar situs tidak lambat saat diakses melalui perangkat mobile.

CSS:

• Sering tidak kompatibel dengan beberapa browser seperti Safari, Internet Explorer, atau browser yang sudah lama tidak diupdate.

Untuk menampilkan efek salju degan plugin sendiri saya tidak menemukan kekurangan tertentu. Animasi efek salju sendiri berjalan denan baik dan kita dapat mengubah tampilannya dengan mudah. Tapi jika kamu menemukan kekurangan lainnya, jangan segan untuk berbagi di kolom komenar di bawah ini yah!