Efecto Animado De Subida A La Barra Del Lado De Blog De Blogger

Hola! Te mostrare como anadir un efecto de transformacion  de la barra del lado o cualquier otro elemento de tu blog usando CSS3. Una vez tengas configurado el codigo del elemento/barra lateral este se movera hacia arriba saliendo desde la parte inferior y acomodandose en su posision real.o donde por costumbre va situada.

Para chequear este efecto en vivo da click en dibujo demostracion.

En el caso que estuvieras en otra pagina mientras bajabas la pagina que te di, dale refresh para ver el efecto de nuevo,En el ejemplo la unica barra de la derecha se mueve desde abajo hasta acomodarse en su lugar.

Este efecto de transformacion con CSS3 hace lucir tu sitio uno mas atractivo y llamativo. Aqui abao esta el tutorial como pudes anadir este  super truco de diseno a tu blog de blogger.

Configurando este efecto:

Primero entra en Blogger>> Tu Blog → Plantilla → Editar HTML. Presione Ctrl + F. busca el siguiente codigo<b:skin>....</b:skin> [As per the new HTML editor]
Anade el siguiente codigo debajo de  ]]></b:skin>

<style>
    @-webkit-keyframes transform-translate{
      from{-webkit-transform:translate(0px,1000px)}
      to{-webkit-transform:translate(0px,0px)}
    }
    @-moz-keyframes transform-translate{
      from{-moz-transform:translate(0px,1000px)}
      to{-moz-transform:translate(0px,0px)}
    }
    @-ms-keyframes transform-translate{
      from{-ms-transform:translate(0px,1000px)}
      to{-ms-transform:translate(0px,0px)}
    }
    @-o-keyframes transform-translate{
      from{-o-transform:translate(0px,1000px)}
      to{-o-transform:translate(0px,0px)}
    }
    @keyframes transform-translate{
      from{transform:translate(0px,1000px)}
      to{transform:translate(0px,0px)}
    }
    .sidebar {
      -webkit-animation:transform-translate 4s;
      -moz-animation:transform-translate 4s;
      -ms-animation:transform-translate 4s;
      -o-animation:transform-translate 4s;
      animation:transform-translate 4s;
    }
    </style>

Nota:1.(Si deseas hacer cambio sino dejalo como esta)Cambia .sidebar al por el nombre de otro elemento si deseas para anadir este efecto al elemento. 
         2.Cambia 4s por cualquier otro numero si desea aumentar o disminuir el tiempo que se toma en subir . Por defecto es de 4 segundos.

Guarde la plantilla. Listo. Usted y su visitantes ahora podran de este efecto effect en la barra del lado de tu blog de blogger.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati