OK Amigos continuando con los tutoriales de encabezado con movimiento, en esta segunda parte vamos con algo aun mas atractivo a nuestro blog. Pondremos un titulo en el encabezado con movimiento solo con
CSS. Espero que sea de su agrado..

Parte 1

Encabezado de nubes en movimientos con CSS: Parte 1


Antes de comenzar veremos una demostración:

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
TBlogger {
  cursor: default;
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  bottom: 1;
  height: 0px;
  margin: auto;
  display: block;
  
  -webkit-animation: bounce .3s ease infinite alternate;
  
  font-family: 'Titan One', cursive;
  font-size: 80px;
  color: #FFF;
  text-align: center;
  line-height: 100px;
  text-shadow: 0 1px 0 #CCC,
               0 2px 0 #CCC,
               0 3px 0 #CCC,
               0 4px 0 #CCC,
               0 5px 0 #CCC,
               0 6px 0 transparent,
               0 7px 0 transparent,
               0 8px 0 transparent,
               0 9px 0 transparent,
               0 10px 10px rgba(0, 0, 0, .6);
}
/* ANIMATION */
@-webkit-keyframes bounce {
  100% {
    top: -30px;
    
    text-shadow: 0 1px 0 #CCC,
                 0 2px 0 #CCC,
                 0 3px 0 #CCC,
                 0 4px 0 #CCC,
                 0 5px 0 #CCC,
                 0 6px 0 #CCC,
                 0 7px 0 #CCC,
                 0 8px 0 #CCC,
                 0 9px 0 #CCC,
                 0 30px 30px rgba(0, 0, 0, .3);
  }
}

Recuerden en la primera parte de estos tutoriales buscamos la etiqueta </head> y justo debajo de ella pegamos el código HTML siguiente

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

</div>

  • Paso 4: Elimina lo que se encuentra entre <div id="nubes"> y su etiqueta de cierre </div>
  • Paso 5: Y agrega la siguiente linea HTML
  <TBlogger>Tutoriales Blogger</TBlogger>
  • Paso 6: Guardamos los cambios realizados en nuestra plantilla
Recuerda que no estas hobligado a seguir la parte N°1 de este tutorial, solo puedes seguir este tutorial 
- - 1 Comentarios
Tag

Comentarios (1)

:))
:((
: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