Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock

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 
- - 0 Comentarios
Tag

Comentarios (0)

:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar