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

Añadir Sombra a Imagenes y Expandirlas en Blogger

CSS es muy divertido para manipularlo y crear efectos especiales especialmente en tu blog de blogger.con el desarrollo creciente de la hoja de estilo cascada o CSS y la aceptacion de los mayores navaegadores de la internet,el diseno de la red se ha convertido mas y mas creativo.


Recuerdo que usabamos Photoshop manualmente para anadir sombra a las imagenes pero ahora gracias a CSS3  puedes anadir sombra a todas las imagenes automaticamente. Aprenderemos hoy como minimizar el tamano de las imagenes grandes y como hacer que estas se expandan a su tamano original al poner el mouse sobre las mismas.Estoy seguro que te gustara.


Ejemplo de este efecto:

Como Añadir Sombra y Alargar Imagenes al Pasae el Mouse sobre las mismas?

El Metodo es uno simple.

1. Entra en Blogger > Plantilla > Editar HTML
2. Haga Copia de tu Plantilla
3. Busca la siguiente etiqueta ]]></b:skin>
4. Arriba de esta etiqueta ]]></b:skin> pegue el siguiente codigo

.MBT-CSS3 img{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
opacity: 0.5;
margin: 0 10px 5px 0;
}
.MBT-CSS3 img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}

Nota: Si deseato desminuir el tamano de la imagen aun mas ,entonces bajele un 0.7 y si desea desaparecer la foto aun mas bajele un 0.5


Ya estamos casi listos. Ahora cuando desee aplicarle a una imagen este efecto , simplemente use el siguiente codigo.,

<div class="MBT-CSS3">
<img src="La Url de la Imagen Va Aqui" />
</div>

Suba una imagen al Editor de Blogger y reemplace La Url de la Imagen Va Aqui con el enlace de la imagen.Listo. Ahora visita tu blog para ver el efecto en accion.
Si desea anadir este efecto a otra imagen siga anadiendo <img src="La Url de la Imagen Va Aqui " /> antes de </div>
Este efecto es compatible con las ultimas versiones de Mozilla, Safari, Opera, Chrome y como de costumbre no tan efectiva con IE.Espero te guste..

Read More