Tutorial kali ni saya akan ajar 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 >>
http://faiz-tutorial.blogspot.com/2013/02/tutorial-backuprestore-template.html1. Login ke akaun blogger anda.
2. Klik pada Template
3. Klik
Edit HTML4. 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 seperti contoh 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 jika ok, klik Save Template
