Como Añadir Efecto Zoom A Imagenes En Blogger

En este tutorial te mostrare como añadir un simple efecto de zoom o ampliacion a tus imagenes en blogger.Este efetco se activa cuando pasar el cursor del mouse sobre la imagen.Este esta hecho con css3y ademas es muy facil de implementar, este le brinda la experiencia al visitante de interactuar en la pagina de tu blog.Para añadir este extraordinario efecto de css3 sigue estos simples pasos.
Ejemplo:

1.Entra en tu cuenta de Blogger>>Plantilla>>Editar Html

2.Busque la siguiente etiqueta </b:skin> usando CTRL Y F

3.Pegue el codigo de abajo antes de la etiqueta </b:skin>

/*URL: http:www.ciudadblogger.info */
.hovergallery img{
-webkit-transform:scale(0.8); 
-moz-transform:scale(0.8); 
-o-transform:scale(0.8); 
-webkit-transition-duration: 0.5s; 
-moz-transition-duration: 0.5s; 
-o-transition-duration: 0.5s; 
opacity: 0.7; 
margin: 0 10px 5px 0;
}

.hovergallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1); 
-o-transform:scale(1.1); 
opacity: 1;
}

4.Luego puedes añadir este efecto de zoom (Ampliacion) a tu imagen.Te dare un ejemplo.

5.Da Click en "Entradas" >> "Nueva Entrada"y ve a editar HTML y pega el sigueiente codigo.

<a class="hovergallery" href="http://www.ciudadblogger.info" target="_blank">
<img src=" https://fbexternal-a.akamaihd.net/safe_image.php?d=AQDO9IelozUWu-pO&url=https%3A%2F%2Ffbcdn-vthumb-a.akamaihd.net%2Fhvthumb-ak-prn1%2Fs403x403%2F158498_501472716563744_501471263230556_12156_1336_b.jpg&jq=100" /></a>

*Reemplace  http://www.ciudadblogger.info  con tu enlace
*Reemplace  https://fbexternal-a.akamaihd.net/safe_image.php?d=AQDO9IelozUWu-pO&url=https%3A%2F%2Ffbcdn-vthumb-a.akamaihd.net%2Fhvthumb-ak-prn1%2Fs403x403%2F158498_501472716563744_501471263230556_12156_1336_b.jpg&jq=100 con la URL de tu Imagen

6. Ahora puedes pulsar el boton de click publicar entrada y tus visitantes disfrutaran de este efecto zoom de imagnes al pasar el cursor del mouse sobre las mismas.

Read More

Como Añadir efecto swing a las Imagenes en Blogger

Vamos a usar el Codigo CSS3 para imagenes que se moveran cada 5 segundos de atras hacia delante. Con esta animacion traeras la atencion de los visitantes ademas que añadiras un atractivo especial a tu blog o pagina web.Esta Animacion de swing  o sea la imagen o objeto se movera de atras hacia y delante suspendido de la parte de arriba como en un tendedero.

Ejemplo Truco de Imagenes Suspendidas:


Para aplicar este sencillo truco a tu blog de blogger sigue los siguientes simple pasos.

1.Entra a la Interface de Blogger>>Plantilla>Edite Html
2.Busque la siguiente etiqueta </head>
3.Copie el codigo de abajo y peguelo despues de </head>

<style>

.swing{
 -webkit-animation:swinging 10s ease-in-out 0s infinite;
 -moz-animation:swinging 10s ease-in-out 0s infinite;
 animation:swinging 10s ease-in-out 0s infinite;
 -webkit-transform-origin:50% 0;
 -moz-transform-origin:50% 0;
 transform-origin:50% 0;
}

@-webkit-keyframes swinging{
 0% { -webkit-transform: rotate(0); }
 5% { -webkit-transform: rotate(10deg); }
 10% { -webkit-transform: rotate(-9deg); }
 15% { -webkit-transform: rotate(8deg); }
 20% { -webkit-transform: rotate(-7deg); }
 25% { -webkit-transform: rotate(6deg); }
 30% { -webkit-transform: rotate(-5deg); }
 35% { -webkit-transform: rotate(4deg); }
 40% { -webkit-transform: rotate(-3deg); }
 45% { -webkit-transform: rotate(2deg); }
 50% { -webkit-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
 100% { -webkit-transform: rotate(0); }
}

@-moz-keyframes swinging{
 0% { -moz-transform: rotate(0); }
 5% { -moz-transform: rotate(10deg); }
 10% { -moz-transform: rotate(-9deg); }
 15% { -moz-transform: rotate(8deg); }
 20% { -moz-transform: rotate(-7deg); }
 25% { -moz-transform: rotate(6deg); }
 30% { -moz-transform: rotate(-5deg); }
 35% { -moz-transform: rotate(4deg); }
 40% { -moz-transform: rotate(-3deg); }
 45% { -moz-transform: rotate(2deg); }
 50% { -moz-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
 100% { -moz-transform: rotate(0); }
}

@keyframes swinging{
 0% { transform: rotate(0); }
 5% { transform: rotate(10deg); }
 10% { transform: rotate(-9deg); }
 15% { transform: rotate(8deg); }
 20% { transform: rotate(-7deg); }
 25% { transform: rotate(6deg); }
 30% { transform: rotate(-5deg); }
 35% { transform: rotate(4deg); }
 40% { transform: rotate(-3deg); }
 45% { transform: rotate(2deg); }
 50% { transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
 100% { transform: rotate(0); }
}

</style>

4.Luego vaya a Diseño y seleccione Html/Javascript y anada el siguiente codigo.

<img class="swing" src="winter.jpg" /> 


<img class="swing" src="winter.jpg" style="
 animation-delay: 0.8s;
 -webkit-animation-delay: 0.8s;
 -moz-animation-delay: 0.8s;
 animation-delay: 0.8s;
 "
/> 


<img class="swing" src="winter.jpg" style="
 animation-delay: 0.5s;
 -webkit-animation-delay: 0.5s;
 -moz-animation-delay: 0.5s;
 animation-delay: 0.5s;
 "
/> 

Nota: Recuerda que debes cambiar las imagenes en el codigo anterior
winter.jpg   por tus imagenes.


 5.Guarda el Html/Javascript y Listo .

Read More

Como Optimizar Las Imagenes Para Mejor SEO

Hay una cantidad inumerable de escritores de articulos o bloggers que usamos imagenes o fotos en nuesto articulos.Pero no todos saben como optimizarlos para los motores de busqueda.

La busqueda de imagenes o fotos en google brinda la oportunidad de anadir mas trafico a tu blog o website.

Existen muchas maneras de optimizar tus imagenes en tu articulo o blog donde los tags alternativos y title tag  juegan un papel fundamental en el Seo de Imagenes.

Que son los alt tags and title tags

Alt tags and title tags son usados en imagenes y describe a los buscadores de la red de que se trata la imagen los robots de busqueda no pueden leer el texto en las imagenes.Anadiendo estos  tags a las imagenes aumentara tu trafico organico..
Los textos del titulo y del  tag son los mismos.. 

Consejos para hacer que nuestros tags de imagenes sean buscados en internet.(SEO).

• Use las palabras claves para sus imagenes en los alt tags and title tags pero no utilice las mismos.
• No haga oraciones enteras. Por ejemplo: Si escribe sobre el trafico de visitantes. No escriba esto "5 consejos para el trafico en blogger blog" en su lugar escribalo asi  "Consejos trafico  blog", "Aumentar Trafico".
• Mantenga  lo escrito en los tags limitado a 2  a 4 palabras maximo. 

Como Anadir los alt tag ytitle tag en blogger

Como sabemos blogger implemento un nuevo parte de SEO este ano,las propiedades de las imagenes en blogger . Esto le ayuda facilmente crear los alt tagytitle tag para las imagenes.

Ahora puede anadior los alt tag y title tag sin tener que usar los codigos HTML. 

Aqui esta como anadir los tags en tus imagenes para mejor SEO.

• Conectate a blogger.com.
• Crea un nuevo post y sube una imagen o foto.
• Da Click en uploaded image, encontraras el link de propiedades,  dale click.

• Escriba el titulo de su imagen en title text.
• Escriba el tag de la imagen en alt text.
• Dale Click OK y ya listo!

Read More