Cara membuat Effect Animasi Pada Header Blogger

Cara membuat Effect Animasi Pada Header Blogger :

Dipublikasikan oleh : http://worldinfotechno.blogspot.com/

• Klik Desain

• Lalu Klik Template

• Lalu Klik Edit HTML

• Nah Setelah klik Edit HTML , nanti akan muncul gambar seperti ini

• Lalu Pencet Ctrl + F , nanti akan muncul gambar seperti ini

• Nah , sekarang cari kode  script    ]]></b:skin>    , Contohnya seperti gambar dibawah

• Nah , sekarangkan udah cari kode script    ]]></b:skin>  
• Lalu masukkan kode css berikut tepat di bawah kode ]]></b:skin> berikut kodenya :

<style>#header{width:auto;
height:50;
background:none;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}

@-moz-keyframes mymove /* Firefox */
{
0% {left:0px;color:green}
50% {left:200px;color:red}
100% {left:0px;color:orange}
}

@-webkit-keyframes mymove /* Firefox */
{
0% {left:0px;color:green}
50% {left:200px;color:red}
100% {left:0px;color:orange}
}

@-ms-keyframes mymove /* Firefox */
{
0% {left:0px;color:green}
50% {left:200px;color:red}
100% {left:0px;color:orange}
}

@-o-keyframes mymove /* Firefox */
{
0% {left:0px;color:green}
50% {left:200px;color:red}
100% {left:0px;color:orange}
}</style>

 

• Cara masukkan kode css berikut tepat di bawah kode ]]></b:skin>  , contoh seperti gambar dibawah ini

• Nah Setelah Selesai memasukkan kode css berikut tepat di bawah kode ]]></b:skin>
• Nah sekarang tinggal langkah terkahir nih
• Langkah terakhir , Klik Simpan Template

Oke , Terima kasih untuk yang sudah mencoba Tutorial ini....

Tutorial Dipublikasikan oleh : http://masmahfid.blogspot.com