Animasi Efek loading sliding di blog

 

Selamat datang di websiteaeria . pada tutorial kali ini saya akan memberikan beberapa cara dalam membuat efek loading sliding di blog menggunakan css .

okay kita langsung saja :

 

1. Masuk ke Edit HTML Template blogger sobat.

2. Tambahkan kode css dibawah ini dengan cara klik CTRL+F dan cari kode ]]><</b:skin> lalu letakkan kode dibawah ini tepat diatasnya

 

@keyframes sliding{

from{transform:translate(-1000px,0px);opacity:0}

to{transform:translate(0px,0px);opacity:1,1;}

}

 

3. Sisipkan kode animation : Sliding 2s; ke bagian yang ingin anda beri efek , misalkan pada #main-wrapper , contohnya :

 

#main-wrapper{animation:sliding 2s;}

 

4. Save Template

 

Untuk cara pertama mungkin tidak support untuk semua browser , jika begitu hapus saja dan ganti dengan kode dibawah ini . langkah-langkahnya sama saja seperti diatas

 

1. Masuk Edit Html Template Sobat.

2. Tambahkan kode dibawah ini ke CSS sobat dengan cara : Cari kode

]]></b:skin> lalu letakkan kode dibawah ini tepat di atasnya

 

@-webkit-keyframes slide{

from{transform:translate(-1000px,0px);}

to{transform:translate(0px,0px);}}

@keyframes slide{

from{transform:translate(-1000px,0px);opacity:0}

to{transform:translate(0px,0px);opacity:1.1;}

}

 

3. sisipkan kode –moz-animation:slide 4s ;-webkit-animation:slide 4s;

animation:slide 4s ke bagian yang ingin anda beri efek , misalkan pada #main-wrapper . contohnya:

 

#main-wrapper{-moz-animation:slide 4s;-webkit-animation:slide 4s;

animation:slide 4s}

 

4. Save Template

 

untuk kecepatan loading tinggal sobat setting misalnya 4s di turunkan menjadi 2s untuk efek loading cepat

 

++