Tutoriales Sobre Blogger: Encabezado de nubes en movimientos con CSS: Parte 1

Hola amigos!! Hoy volvemos con mas tutoriales para su agrado. En este tutorial veremos con agregar un encabezado con nubes en movimientos, ustedes podrán cambiar la URL de la imagen por la que ustedes
quieran. Ya que podremos agregar un titulo y una descripción a nuestro encabezado  en movimiento.

Antes de comenzar veremos una demostracion:

Demo

Comencemos: 

• Paso 1: Vamos a Blogger>> Plantilla>> Edicion HTML>>
• Paso 2: Buscamos la siguiente linea (Ctrol + F)

]]></b:skin>

• Paso 3: Justo por encima de ]]></b:skin> pegamos la siguiente linea CSS

#nubes {
background-color:#C0DEED;
background: url(https://abs.twimg.com/images/themes/theme1/bg.png) center top repeat-x;
padding-top:100px;
padding-bottom:10px;
  width: 100%;      Ancho del Banner
  height: 135px;    Alto del Banner
  animation: awan-animasi 10s linear infinite;   Velocidad de 10 segundos
  -ms-animation: awan-animasi 10s linear infinite; Velocidad de 10 segundos
  -moz-animation: awan-animasi 10s linear infinite; velocidad de 10 segundos
  -webkit-animation: awan-animasi 10s linear infinite; velocidad de 10 segundos 
}
@keyframes awan-animasi {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 100% 0;
  };
}

@-webkit-keyframes awan-animasi {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 100% 0;
  };
}

@-ms-keyframes awan-animasi {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  };
}
@-moz-keyframes awan-animasi {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  };
}

• Paso 4: Todabia en la plantilla Buscamos la siguiente linea (Ctrol + F)

  </head>

• Paso 5: Justo por debajo pegamos la siguiente linea HTML.

<div id="nubes">
  <h1>
.. Tutoriales Blogger ..
  </h1>
  <h3>
  Nube de encabezado</h3>
</div>

• Paso 6: Guardamos los cambios realizados en nuestra plantilla Recuerda puedes cambiar la URL de la imagen por la que tu desees