Cara Membuat Animasi Pada BLoG TiTLe

Cara Membuat Animasi Pada Blog Title |judul blog|

"Askum Sobat bloger.." Pada topik ini Mari kita membahas bagaimana Cara Membuat Animasi Pada Blog Title | judul blog | menggunakan css3 animation". Saya sudah mencobanya dan berhasil ( Lihat Judul Blog saya diatas ). Langsung aja Brow.. tanpa saya banyak mengetik. disini ada 4 (cara variasi animasi) yang akan Sobat pilih, terserah sobat pilih yang mana . ^__^ .

1. Animasi css3 (pertama)

@keyframes GRbt_anima{0%{transform:translate(-50px,0);}50%{transform:translate(0,0);}100%{transform:translate(50px,0);}}
@-o-keyframes GRbt_anima{0%{-o-transform:translate(-50px,0);}50%{-o-transform:translate(0,0);}100%{-o-transform:translate(50px,0);}}
@-ms-keyframes GRbt_anima{0%{-ms-transform:translate(-50px,0);}50%{-ms-transform:translate(0,0);}100%{-ms-transform:translate(50px,0);}}
@-moz-keyframes GRbt_anima{0%{-moz-transform:translate(-50px,0);}50%{-moz-transform:translate(0,0);}100%{-moz-transform:translate(50px,0);}}
@-webkit-keyframes GRbt_anima{0%{-webkit-transform:translate(-50px,0);}50%{-webkit-transform:translate(0,0);}100%{-webkit-transform:translate(50px,0);}}
h1.title a,h1.title{ /* original code by : http://agungalbani.blogspot.com - 30 Juni 2012 */
animation:GRbt_anima 4s infinite linear alternate;  /* Standart */
-o-animation:GRbt_anima 4s infinite linear alternate;  /* Opera */ 
-ms-animation:GRbt_anima 4s infinite linear alternate; /* IE */ 
-moz-animation:GRbt_anima 4s infinite linear alternate; /* Firefox */ 
-webkit-animation:GRbt_anima 4s infinite linear alternate; /* Safari and Chrome */  
}

2. Animasi css3 (kedua)

px,0);color:black;}}
@-ms-keyframes GRbt_anima{0%{-ms-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;}50%{-ms-transform:translate(0,0);color:red;}65%{color:blue;}85%{color:magenta;}100%{-ms-transform:translate(50px,0);color:black;}}
@-moz-keyframes GRbt_anima{0%{-moz-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;}50%{-moz-transform:translate(0,0);color:red;}65%{color:blue;}85%{color:magenta;}100%{-moz-transform:translate(50px,0);color:black;}}
@-webkit-keyframes GRbt_anima{0%{-webkit-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;}50%{-webkit-transform:translate(0,0);color:red;}65%{color:blue;}85%{color:magenta;}100%{-webkit-transform:translate(50px,0);color:black;}}
h1.title a,h1.title{ /* by : http://agungalbani.blogspot.com - 30 Juni 2012 */
animation:GRbt_anima 4s infinite linear alternate;  /* Standart */
-o-animation:GRbt_anima 4s infinite linear alternate;  /* Opera */ 
-ms-animation:GRbt_anima 4s infinite linear alternate; /* IE */ 
-moz-animation:GRbt_anima 4s infinite linear alternate; /* Firefox */ 
-webkit-animation:GRbt_anima 4s infinite linear alternate; /* Safari and Chrome */

3. Animasi css3 (ketiga)

@keyframes GRbt_anima{0%{transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;transform:rotate(-10deg) scale(0.2);}50%{transform:translate(0,0) scale(0.8) rotate(15deg);color:red;}65%{color:blue;transform:rotate(-10deg) scale(0.2);}85%{color:magenta;}100%{transform:translate(50px,0);color:black;}}
@-o-keyframes GRbt_anima{0%{-o-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;-o-transform:rotate(-10deg) scale(0.2);}50%{-o-transform:translate(0,0) scale(0.8) rotate(15deg);color:red;}65%{color:blue;-o-transform:rotate(-10deg) scale(0.2);}85%{color:magenta;}100%{-o-transform:translate(50px,0);color:black;}}
@-ms-keyframes GRbt_anima{0%{-ms-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;-ms-transform:rotate(-10deg) scale(0.2);}50%{-ms-transform:translate(0,0) scale(0.8) rotate(15deg);color:red;}65%{color:blue;-ms-transform:rotate(-10deg) scale(0.2);}85%{color:magenta;}100%{-ms-transform:translate(50px,0);color:black;}}
@-moz-keyframes GRbt_anima{0%{-moz-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;-moz-transform:rotate(-10deg) scale(0.2);}50%{-moz-transform:translate(0,0) scale(0.8) rotate(15deg);color:red;}65%{color:blue;-moz-transform:rotate(-10deg) scale(0.2);}85%{color:magenta;}100%{-moz-transform:translate(50px,0);color:black;}}
@-webkit-keyframes GRbt_anima{0%{-webkit-transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;-webkit-transform:rotate(-10deg) scale(0.2);}50%{-webkit-transform:translate(0,0) scale(0.8) rotate(15deg);color:red;}65%{color:blue;-webkit-transform:rotate(-10deg) scale(0.2);}85%{color:magenta;}100%{-webkit-transform:translate(50px,0);color:black;}}
h1.title a,h1.title{ /* original code by : http://agungalbani.blogspot.com - 30 Juni 2012 */
animation:GRbt_anima 12s infinite linear alternate;  /* Standart */
-o-animation:GRbt_anima 12s infinite linear alternate;  /* Opera */ 
-ms-animation:GRbt_anima 12s infinite linear alternate; /* IE */ 
-moz-animation:GRbt_anima 12s infinite linear alternate; /* Firefox */ 
-webkit-animation:GRbt_anima 12s infinite linear alternate; /* Safari and Chrome */  
}

4. Animasi css3 (keempat)

-ms-transform:translate(0,0) scale(1.0);}}
@-moz-keyframes GRbt_anima{0%{color:black;-moz-transform:translate(0,0) scale(1.0);}19%{color:red;}25%{color:brown;-moz-transform:translate(50px,0) scale(1.0);}40%{color:blue;}55%{color:green;-moz-transform:scale(0.1) rotate(-15deg);}70%{color:orange;}85%{color:magenta;-moz-transform:scale(0.3) rotate(375deg);}100%{color:black;-moz-transform:translate(0,0) scale(1.0);}}
@-webkit-keyframes GRbt_anima{0%{color:black;-webkit-transform:translate(0,0) scale(1.0);}19%{color:red;}25%{color:brown;-webkit-transform:translate(50px,0) scale(1.0);}40%{color:blue;}55%{color:green;-webkit-transform:scale(0.1) rotate(-15deg);}70%{color:orange;}85%{color:magenta;-webkit-transform:scale(0.3) rotate(375deg);}100%{color:black;-webkit-transform:translate(0,0) scale(1.0);}}
h1.title a,h1.title{ /* original code by : http://agungalbani.blogspot.com - 30 Juni 2012 */
animation:GRbt_anima 8s infinite linear alternate;  /* Standart */
-o-animation:GRbt_anima 8s infinite linear alternate;  /* Opera */ 
-ms-animation:GRbt_anima 8s infinite linear alternate; /* IE */ 
-moz-animation:GRbt_anima 8s infinite linear alternate; /* Firefox */ 
-webkit-animation:GRbt_anima 8s infinite linear alternate; /* Safari and Chrome */  
}

Cara yang sobat harus lakukan adalah :

1. Login ke Blogger.
2. Edit HTML.
3. Backup Template.
4. Cari Kode ]]></b:skin>, lalu lekatkan kode css3 Animasi yang "Sobat pilih tepat diatasnya.
5. Simpan Template.
6. Selesai ... Lihat perubahan yang sobat sudah lakukan... Ajib !!!

Untuk merubah warna, Sobat tinggal merubah warna kodenya, sobat bisa melihat tabel lengkap di :Kode Warna Lengkap Html  >>> " Tunggu Posting Terbaru Saya Selanjutnya " Terima Kasih . ^___^ .