Multilenial.com


Tips membuat efek Fade In saat membuka halaman blog | 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!

Cara membuat efek fade in saat membuka halaman blog

  • 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.
  • 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 &lt;head&gt;
  • 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>

  • 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!
Tags

Berkomentar

Posting Komentar

Lebih baru Lebih lama