Cara Membuat Efek Salju pada Blog

Snow Effect - Mungkin Anda telah mengunjungi situs web dengan efek salju yang turun. Indah dan menarik, bukan? Anda mungkin ingin situs WordPress, Blogger atau Website Anda memiliki kepingan salju putih yang beterbangan di layar pada saat musim dingin juga? Ini akan menjadi hal yang meriah untuk acara musim dingin atau Natal Anda, mungkin ini akan menarik dan menghibur pengunjung Anda setiap tahunnya. Disini saya akan membagikan sedikit Source Kode yang mungkin berguna untuk menghias situs kalian.

Source code ini tidak memnggunakan javascript, hanya menggunakan css dan simbol pada html saja. Jadi bisa di bilang, ini tidak terlalu membuat berat website kalian dan ini Efek salju ini bisa dibilang cukup simpel dan mudah.

Tutorial Membuat Efek Salju pada Blog/Website :

• Pertama, tempelkan pemanggilan css ini di atas kode </style>, </head> atau ]]></b:skin> pada tema / template kalian (terapkan pada salah satu saja).

  .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}

• Selanjutnya, silahkan tempel kode di bawah ini sebelum </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>

• Jika semua sudah diterapkan, silahkan untuk disimpan (save) dahulu.
• Selesai

Sekian tentang tutorial kali ini "Cara Membuat Efek Salju di Blog/Website" atau dalam bahasa inggrisnya "How to Create a Snow Effect on Blog or Website". Terimakasih atas Kunjungannya :)

Selamat membaca artikel Cara Membuat Efek Salju pada Blog. Jangan lupa untuk support web kami dengan like, comment dan share. Kunjungi terus HNFISLMN untuk artikel bermanfaat lainnya. Thanks ~