Cara Membuat Animasi Pada Judul Blog

Kali ini saudara saudari sebangsa dan seperjuangan blogger (kayak pidato presiden aja :P), Saya akan berbagi tips walau sebenarnya tips sudah basi dan sudah banyak tahu. Tetapi karena ingin berbagi ilmu bagi siapa saja yang belum mengerti tentang Cara Membuat Animasi Pada Judul Blog termasuk saya salah satunya.

Ilustrasi. Dok. Dodhy Jelleg

Cara Membuat Animasi pada Judul Blog adalah dimana judul blog kita akan berubah warna dengan sendirinya atau bergerak kesana kesini pada saat blog kita dibuka.

Tutorial animasi blog title ini dapat dipergunakan pada template blogger baru/new blogger template/blogger template designer dan template tata letak/layout template. 

Untuk DEMO silahkan sobat lihat disini pada Judul Blog bang Dodhy Jelleg yang sekarang dipakai, disini Animasi Judul Blognya ada 4 pilihan, jadi silahkan saudara saudari pilih sesuai selera masing-masing.

4 Macam Animasi Judul Blog:

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).

CODE CSS ANIMASI JUDUL BLOG 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{

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 */ 

}

CODE CSS ANIMASI JUDUL BLOG 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{ 

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 */ 

}

CODE CSS ANIMASI JUDUL BLOG 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{ 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 */ }

CODE CSS ANIMASI JUDUL BLOG 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{

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 Judul Blog :

• Login ke Blogger.
• Dasbor (Dasboard).
• Design (Rancangan).
• Edit HTML.
• Backup Template.
• Cari Kode ]]></b:skin>, kemudian letakkan kode CSS tepat di atasnya.
• Klik Simpan Template (Save Template).

Sekian dulu yah saudara saudari, semoga ilmu ini dapat bermanfaat bagi semua.. salam :)