Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Efek Salju di Blogger

Cara Membuat Efek Salju di Blogger

DzDesu - Animasi salju yang indah untuk situs Anda yang membuat Natal atau acara lainnya menjadi lebih terlihat di situs kalian.
Karena sebentar lagi Natal, kali ini saya akan menyediakan tutorial untuk membuat serpihan salju animasi yang indah atau jenis serpihan lainnya yang akan membuat tampilan situs kalian makin menawan namun tetap ringan. Misalnya, Anda dapat menggunakan berbagai ikon sebagai serpihan salju, teks khusus, dan banyak lagi.

Dikarenakan saya sudah bosan tentang kalimat pembukaan, saya akan langsung menunjukkan tutorial yang sangat simpel ini di bawah.

  1. Login pada akun blogspot kalian (ini wajib).
  2. Setelah masuk pada dashbord blogger, klik bagian TEMA.
  3. Edit HTML.
  4. Cari kode ]]></b:skin>, kalau gak ketemu silahkan pakai ctrl + f pada keyboard.
  5. Tempeklan kode ini di atas ]]></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}
  6. 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>
  7. Jika semua sudah beres, di save dahulu. Selesai
  8. DEMOnya kelupaan... nih, DEMOsilahkan di cek dulu kalo masih ragu.

Bagaimana? Blog/Webnya sudah banjir salju belum?
Sekian tentang tutorial kali ini "Cara Membuat Efek Salju di Blogger". Bagi yang belum paham, itu kolom komentar di bawah masih berfungsi. Silahkan tulis saja disitu, admin akan berusaha bantu sebisa mungkin. Cara membuat efek salju pada website, cara membuat salju pada blog, simple snow css, css salju, snow effect (simple css), .
Tampilkan Komentar
Sembunyikan Komentar

Posting Komentar untuk "Cara Membuat Efek Salju di Blogger"