Welcome!

Cara-caranya ikuti dibawah ini:
1.Masuk ke:  
Untuk Dashboard Baru Masuk : Blogger » Layout » Add Widget/Tambah Widget 
Untuk Dashboard Lama Masuk : Blogger » Rancangan » Layout » Add Widget/Tambah Widget 

2.Jika sudah mengklik Add Widget/Tambah Widget, pilih HTML/JavaScript.
 
3.Pastekan kode dibawah ini,, pilih salah satu yang kalian suka: 
1. Keyframe AtasBawah: yaitu animasi yang bergerak keatas dan kebawah
<style type="text/css">
#atasbawah
{
background:red;
width:100px;
height:100px;
font-size:20pt;
position:relative;
animation:atasbawah 2s infinite;
-moz-animation:atasbawah 2s infinite; /* Firefox */
-webkit-animation:atasbawah 2s infinite; /*Safari and Chrome*/
}
@keyframes atasbawah
{
0% {top:0px;}
50% {top:20px;}
100% {top:0px;}
}

@-moz-keyframes atasbawah /* Firefox */
{
0% {top:0px;}
50% {top:20px;}
100% {top:0px;}
}

@-webkit-keyframes atasbawah /* Safari and Chrome */
{
0% {top:0px;}
50% {top:20px;}
100% {top:0px;}
}
</style>
<div id='atasbawah'>Atas Bawah</div>
 
2. Keyframe Muter-Muter: yaitu animasi yang bergerak muter-muter
<style type="text/css">
#mutermuter
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mutermuter 5s infinite;
-moz-animation:mutermuter 5s infinite; /* Firefox */
-webkit-animation:mutermuter 5s infinite; /*Safari and Chrome*/
}
@keyframes mutermuter
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

@-moz-keyframes mutermuter /* Firefox */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

@-webkit-keyframes mutermuter /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
</style><div id="mutermuter">
Muter Muter</div>
 
3. Keyframe Kiri-Kanan: yaitu animasi yang bergerak ke kiri dan ke kanan
<style type="text/css">
#kirikanan
{
width:100px;
height:100px;
font-size:20pt;
background:red;
position:relative;
animation:kirikanan 5s infinite;
-moz-animation:kirikanan 5s infinite; /* Firefox */
-webkit-animation:kirikanan 5s infinite; /*Safari and Chrome*/
}
@keyframes kirikanan
{
0% {top:0px; left:0px; }
50% {top:0px; left:100px; }
100% {top:0px; left:0px;}
}

@-moz-keyframes kirikanan /* Firefox */
{
0% {top:0px; left:0px; }
50% {top:0px; left:100px; }
100% {top:0px; left:0px;}
}

@-webkit-keyframes kirikanan /* Safari and Chrome */
{
0% {top:0px; left:0px; }
50% {top:0px; left:100px; }
100% {top:0px; left:0px;}
}
</style>
<center><div id='kirikanan'>Kiri kanan</div></center>