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.
- Login pada akun blogspot kalian (ini wajib).
- Setelah masuk pada dashbord blogger, klik bagian TEMA.
- Edit HTML.
- Cari kode ]]></b:skin>, kalau gak ketemu silahkan pakai ctrl + f pada keyboard.
- 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} - 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 beres, di save dahulu. Selesai
- DEMOnya kelupaan... nih,
DEMO silahkan 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), .
Posting Komentar untuk "Cara Membuat Efek Salju di Blogger"