Create Animation on Blog Title with css3 Animation

Menganimasikan blog title di template blogger dengan memanfaatkan css3 animation adalah proyek selanjutnya setelah kita buat efek warna pelangi pada hover link yang juga hanya menggunakan kode css3 animation. Yang kita maksudkan dengan posting kali ini adalah Cara membuat animasi pada blog title (nama blog) dengan menggunakan css3 animation" atau "Create Animation on Blog Title". Ada beberapa variasi animasi yang akan kita buat, silahkan anda pilih yang dirasa cocok. Animasi pertama hanya berupa pergerakan blog title kearah kanan & kiri, yang kedua disertai perubahan warna teks, yang ketiga disertai animasi membentuk sudut & perubahan warna, sedang yang ke empat ada penambahan animasi berupa gerak memutar (rotasi).
Ada 2 buah demo yang dapat anda lihat, dimana demo ini sekedar sebagai sebuah bukti bahwa tutorial ini sudah melalui uji coba pada blog. Anda jangan menggunakan kode di halaman demo karena ada perbadaan kode yang berkaitan dengan enggunaan syntax.

Tutorial animasi blog title ini dapat dipergunakan pada template blogger baru/new blogger template/blogger template designer dan template tata letak/lyout template. Setelah klik demo-1 dan demo-2, silahkan lihat animasi yang berhasil terbentuk pada blog title (nama blog) yang terletak di halaman teratas.

D E M O-1D E M O-2

4 Macam Animasi Blog Title:

1. Ada 4 kode css yang masing-masing mempunyai bentuk animasi berbeda.
2. Anda bisa menggunakan salah satu kode css untuk membuat animasi blog title.
3. Kode css dapat dikembangkan lagi untuk mendapatkan bentuk animasi berbeda.
4. Gunakan browser terbaru karena css3 hanya berfungsi dengan baik di browser terbaru yang sudah mendukung css3 animation. Anda bisa download melalui menu disebelah kiri halaman blog (Download browser).

Kode CSS Animasi Blog Title-1:

@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://gubhugreyot.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 */  
}

Kode CSS Animasi Blog Title-2:

@keyframes GRbt_anima{0%{transform:translate(-50px,0);color:black;}15%{color:green;}35%{color:orange;}50%{transform:translate(0,0);color:red;}65%{color:blue;}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;}50%{-o-transform:translate(0,0);color:red;}65%{color:blue;}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;}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{ /* original code by : http://gubhugreyot.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 */  
}

Kode CSS Animasi Blog Title-3:

@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://gubhugreyot.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 */  
}

Kode CSS Animasi Blog Title-4:

@keyframes GRbt_anima{0%{color:black;transform:translate(0,0) scale(1.0);}19%{color:red;}25%{color:brown;transform:translate(50px,0) scale(1.0);}40%{color:blue;}55%{color:green;transform:scale(0.1) rotate(-15deg);}70%{color:orange;}85%{color:magenta;transform:scale(0.3) rotate(375deg);}100%{color:black;transform:translate(0,0) scale(1.0);}}
@-o-keyframes GRbt_anima{0%{color:black;-o-transform:translate(0,0) scale(1.0);}19%{color:red;}25%{color:brown;-o-transform:translate(50px,0) scale(1.0);}40%{color:blue;}55%{color:green;-o-transform:scale(0.1) rotate(-15deg);}70%{color:orange;}85%{color:magenta;-o-transform:scale(0.3) rotate(375deg);}100%{color:black;-o-transform:translate(0,0) scale(1.0);}}
@-ms-keyframes GRbt_anima{0%{color:black;-ms-transform:translate(0,0) scale(1.0);}19%{color:red;}25%{color:brown;-ms-transform:translate(50px,0) scale(1.0);}40%{color:blue;}55%{color:green;-ms-transform:scale(0.1) rotate(-15deg);}70%{color:orange;}85%{color:magenta;-ms-transform:scale(0.3) rotate(375deg);}100%{color:black;-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://gubhugreyot.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 menyimpan Kode CSS Animasi blog title yang dibuat dengan css3 animation:

1. Login ke Blogger.
2. Dasbor (Dasboard).
3. Design (Rancangan).
4. Edit HTML.
5. Backup Template.
6. Cari Kode ]]></b:skin>, kemudian letakkan kode css tepat di atasnya.
7. Klik Simpan Template (Save Template)

Catatan/keterangan:

1. Untuk merubah warna agar sesuai dengan keinginan, sampeyan bisa melihat tabel lengkap data setiap warna berikut namanya dengan klik di sini.
2. Panduan cara Backup Template, cara cari kode dan berbagai cara menyimpan kode css, javascript dan xHTML dapat dibuka pada Special Tutorials di menu sebelah kiri halaman.
3. Jika anda menggunakan Antarmuka Blogger Baru (New Bloogger Interface), anda dapat mengikuti panduan cara menyimpan kode css-nya melalui link berikut:
   Cara simpan kode html di New Blogger Interface
4. Anda dapat mencoba setiap bentuk animasi blog title dengan menggunakan 4 macam kode css yang telah disediakan.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Posting » Setu Kliwon, Juni, 30, 2012

» Happy Blogging - gubhugreyot «