Tips membuat efek Fade In saat membuka halaman blog
MULTILENIAL.COM | Menambah efek animasi Fade In ketika membuka halaman di blog, merupakan salah satu cara untuk mempercantik sebuah blog. Efek animasi ini menggunakan Pure CSS jadi tidak akan memberikan dampak pada kecepatan blog Anda. Anda bisa lihat efeknya seperti pada Blog Multilenial ini.
Untuk Anda yang hendak memasang efek animasi ini pada blog, simak baik-baik tutorial yang saya tulis kali ini. Bagaimana caranya Membuat efek Fade In saat membuka halaman blog? Cekidot!
Backup Template
Sebelum mengeksekusi, hendaklah mem-backup template terlebih dahulu. Karena ketika hasilnya tidak sesuai harapan dan kita ingin mengembalikan seperti semula akan membuat lebih praktis dan mudah.
Sebelum mengeksekusi, hendaklah mem-backup template terlebih dahulu. Karena ketika hasilnya tidak sesuai harapan dan kita ingin mengembalikan seperti semula akan membuat lebih praktis dan mudah.
Edit HTML
Yang pertama, Anda harus masuk ke dashboar Blogger kemudian pilih Tema dan pilih Edit HTML.
Setelah itu cari kode
<Head>
Atau anda bisa cari kode penggantinya seperti ini
<head>
Kemudian copy dan pastekan kode berikut tepat dibawah kode tadi
<style>
.fade, body {
-webkit-animation-name: fade;
-webkit-animation-duration: 3s;
animation-name: fade;
animation-duration: 3s;}
@-webkit-keyframes fade {
from {opacity: 0}
to {opacity: 1}}
@keyframes fade {
from {opacity: 0}
to {opacity: 1}}
</style>
.fade, body {
-webkit-animation-name: fade;
-webkit-animation-duration: 3s;
animation-name: fade;
animation-duration: 3s;}
@-webkit-keyframes fade {
from {opacity: 0}
to {opacity: 1}}
@keyframes fade {
from {opacity: 0}
to {opacity: 1}}
</style>
Kemudian simpan
Taraa!
Efek animasi Fade In telah berhasil dibuat. Anda bisa langsung melihat efeknya.
Sekian artikel tentang Tips membuat efek Fade In saat membuka halaman blog. Terimkasih telah membaca artikel ini. Semoga bermanfaat. Salam blogger!
0 Response to "Tips membuat efek Fade In saat membuka halaman blog"
Post a Comment