Cara Membuat Efek Salju di Blog

Halo teman-teman semua, pada kesempatan kali ini admin bakal kasih tutorial kepada kalian Cara Membuat Efek Salju di Blog.

Mungkin dari kalian pernah melihat website dengan efek salju yang turun dari header blog atau atas blog.

Bagaimana menurut kalian tentang efek salju tersebut, apakah indah dan menarik? Mungkin dari kalian ingin situs WordPress atau Blogger anda memiliki efek salju putih yang akan berterbangan di layar pada saat musim dingin juga?.

Ini akan menjadi hal yang sangat meriah untuk acara musim dingin atau winter anda, mungkin ini akan menarik dan menghibur pengunjung anda setiap tahunnya.

Disini admin akan memberikan sedikit tutorial source code yang mungkin berguna untuk menghias salju pada situs web kalian.

Source code ini tidak menggunakan JavaScript, hanya menggunakan full css dan simbol pada html saja.

Pastinya untuk tutorial kali ini tidak akan membuat blog atau situs web kalian menjadi berat dan pastinya cukup simple dan sangat mudah.

Untuk kalian yang ingin melihat hasil yang sudah jadi silahkan klik link demo di bawah ini yang sudah admin siapkan.

Demo

Cara Membuat Efek Salju pada Blog

Step 1 : Di step pertama ini kalian hanya tinggal ke pemanggilan CSS, silahkan cari kode ]]></b:skin> pada tema atau template kalian

Step 2 : Silahkan salin atau copy kode yang sudah saya siapkan di bawah dan pastekan kode di bawah ini, tepat di atas kode ]]></b:skin>

.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial;
  text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running;text-shadow:0 0 5px #fff;filter:blur(0.2px);}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}

Step 3 : Selanjutnya Salin atau Copy kode di bawah ini, tepat di atas kode </body>

<div class="snowflakes" aria-hidden="true">
  <div class="snowflake">❅</div>
  <div class="snowflake">❅</div>
  <div class="snowflake">❅</div>
  <div class="snowflake">❅</div>
  <div class="snowflake">❅</div>
  <div class="snowflake">❅</div>
  <div class="snowflake">❅</div>
  <div class="snowflake">❅</div>
  <div class="snowflake">❅</div>
  <div class="snowflake">❅</div>
</div>

Step 4 : Jika semua kode sudah di terapkan dengan benar, silahkan klik simpan atau save.

Step 5 : Selesai.