Tempatnya Download Aplikasi full Apk, Mod, Pro, Premium untuk semua Sahabat Android.

Sunday, September 24, 2017

Animated Loading Effect


Tutorial kali ni aku akan didik cara untuk buat 'Animation Transform Effect' pada blogger anda. Anda boleh pilih sama ada ingin buat transform (bergerak) ke kiri , ke kanan , ke atas atau ke bawah untuk digunakan sama ada pada header , sidebar dan footer semasa 'loading' pada blog anda ..

Tutorial:

PS: PASTIKAN ANDA BACKUP DAHULU TEMPLATE BLOG ANDA UNTUK LANGKAH KESELAMATAN . Lihat sini >> 

1. Login ke akaun blogger anda.
2. Klik pada Template

3. Klik Edit HTML

4. Klik pada ruang edit html dan tekan CTRL+F untuk paparkan ruang search

5. Cari (CTRL + F) kod dibawah:
]]></b:skin>
6. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah , sebelum kod ]]></b:skin>
/*---------------------------------
ANIMATION KEYFRAME CODE - START
-----------------------------------*/
/*TRANSFORM KE BAWAH*/
@-webkit-keyframes FTloading{
from{-webkit-transform:translate(0px,-1000px);opacity:0}
to{-webkit-transform:translate(0px,0px);opacity:1.1;}
}
@-moz-keyframes FTloading{
from{-moz-transform:translate(0px,-1000px);opacity:0}
to{-moz-transform:translate(0px,0px);opacity:1.1;}
}
@-ms-keyframes FTloading{
from{-ms-transform:translate(0px,-1000px);opacity:0}
to{-ms-transform:translate(0px,0px);opacity:1.1;}
}
@keyframes FTloading{
from{transform:translate(0px,-1000px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}
}
/*TRANSFORM KE ATAS*/
@-webkit-keyframes FTloading2{
from{-webkit-transform:translate(0px,1000px);opacity:0}
to{-webkit-transform:translate(0px,0px);opacity:1.1;}
}
@-moz-keyframes FTloading2{
from{-moz-transform:translate(0px,-1000px);opacity:0}
to{-moz-transform:translate(0px,0px);opacity:1.1;}
}
@-ms-keyframes FTloading2{
from{-ms-transform:translate(0px,1000px);opacity:0}
to{-ms-transform:translate(0px,0px);opacity:1.1;}
}
@keyframes FTloading2{
from{transform:translate(0px,1000px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}
}

/*TRANSFORM KE KANAN*/
@-webkit-keyframes FTloading3{
from{-webkit-transform:translate(-1000px,0px);opacity:0}
to{-webkit-transform:translate(0px,0px);opacity:1.1;}
}
@-moz-keyframes FTloading3{
from{-moz-transform:translate(-1000px,0px);opacity:0}
to{-moz-transform:translate(0px,0px);opacity:1.1;}
}
@-ms-keyframes FTloading3{
from{-ms-transform:translate(-1000px,0px);opacity:0}
to{-ms-transform:translate(0px,0px);opacity:1.1;}
}
@keyframes FTloading3{
from{transform:translate(-1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}
}
/*TRANSFORM KE KIRI*/
@-webkit-keyframes FTloading4{
from{-webkit-transform:translate(1000px,0px);opacity:0}
to{-webkit-transform:translate(0px,0px);opacity:1.1;}
}
@-moz-keyframes FTloading4{
from{-moz-transform:translate(1000px,0px);opacity:0}
to{-moz-transform:translate(0px,0px);opacity:1.1;}
}
@-ms-keyframes FTloading4{
from{-ms-transform:translate(1000px,0px);opacity:0}
to{-ms-transform:translate(0px,0px);opacity:1.1;}
}
@keyframes FTloading4{
from{transform:translate(1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}
}

/*-------------------------------
ANIMATION KEYFRAME CODE - END
---------------------------------*/
7. Untuk jalankan fungsi animation, pilih sama ada pada header , sidebar, footer , atau content dan sertakan kod di menyerupai teladan dibawah (letak sebelum ]]></b:skin>):

CONTOH 1: Di bahagian header (bergerak dari atas kebawah)
#header-wrapper {
animation:FTloading 3s;
-webkit-animation:FTloading 3s;
-o-animation:FTloading 3s;
-moz-animation:FTloading 3s;
-ms-animation:FTloading 3s;
}
CONTOH 2: Di bahagian sidebar (bergerak dari atas kebawah)
#sidebar-wrapper {
animation:FTloading 3s;
-webkit-animation:FTloading 3s;
-o-animation:FTloading 3s;
-moz-animation:FTloading 3s;
-ms-animation:FTloading 3s;
}
CONTOH 3: Di bahagian content  (bergerak dari atas kebawah)
#main-wrapper {
animation:FTloading 3s;
-webkit-animation:FTloading 3s;
-o-animation:FTloading 3s;
-moz-animation:FTloading 3s;
-ms-animation:FTloading 3s;
}
Keterangan:
- Untuk ubah arah gerakan animation, ubah kepada
a) FTloading     =>  animation transform gerakan dari atas ke bawah.
b) FTloading2   =>  animation transform gerakan dari bawah ke atas.
c) FTloading3   =>  animation transform gerakan dari kiri ke kanan.
d) FTloading4   =>  animation transform gerakan dari bawah ke kiri.

- Kod diatas boleh digunakan pada mana-mana bahagian CSS blogger anda. Ikut kreativiti anda ok :) .


8. Klik Preview template dan kalau ok, klik Save Template


Sumber https://faiz-tutorial.blogspot.co.id/

Share on Facebook
Share on Twitter
Share on Google+

Related : Animated Loading Effect