add

Como añadir un Drop Shadows para imágenes y ampliarlo al momento que pase el ratón en blogger.


Como añadir un Drop Shadows para imágenes y ampliarlo al momento que pase el ratón en blogger.

CSS para uso en blogger es una forma muy divertida. Con el desarrollo de estilos de blogger podemos crear nuevas formas de diseños para nuestro blog de blogger. Hoy vamos aprender como reducir al mínimo el tamaño de las imágenes y luego al pasar el ratón por enzima de la imagen nos muestre su tamaño original. Este gran truco de blogger lo voy a compartir con ustedes.

A continuación mire su demostración 


Luego de que usted haya mirado su demostración siga las siguientes instrucciones simples para su instalación en blogger.

1 Ir a Blogger
2 Diríjase a “Plantilla
3 De un clic donde dice “Edición de HTML” y luego en “Continuar
4 Presione “F3” y busque este código ]]></b:skin>  
5 Pegue el siguiente código justo encima de ]]></b:skin>  

.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;
}


Si desea reducir aún más el tamaño de la imagen a continuación disminuir 0,7 o si usted quiere que su imagen este bastante desvanecida, solo tiene que disminuir 0,5  hasta lo que usted necesite.

6 Ahora dele un clic en “Guardar plantilla

Ya tenemos nuestro código CSS3 insertado en nuestro código HTML de blogger, ahora lo único que falta hacer es lo siguiente.

Recuerde que cada vez que necesitemos hacer este truco de efecto en nuestras publicaciones, tenemos que insertar un código en el articulo que van a publicar.

A continuación realice lo siguiente

1 Ir a Entradas
2 Abrir nueva Entrada
3 Escribe tu artículo en tu entrada y carga una imagen en tu artículo.
4 Luego da un clic en la parte superior izquierda de tu entrada donde dice “HTML”
5 Se te abrirá el código HTML de tu entrada, en el cual tienes que realizar lo siguiente
6 Copia el siguiente código enzima del código de la imagen que cargaste.

<div class="MBT-CSS3">
<img src=" El URL de la imagen va aquí " />
</div>

7 Copia la URL de la imagen que cargaste después de “src” y insértelo donde dice “El URL de la imagen va aquí”, eso es todo.

8 No te olvides de borrar el antiguo código de la imagen, por ejemplo mira las imágenes a continuación y te darás cuenta como es que tiene que quedarte paso a paso. Te recuerdo que cada imagen esta enumerada para que no te confundas.

2
4
6
  
7
  
8

8 Si quieres añadir este efecto a otra imagen solo vasta con añadir este código <img src=" El URL de la imagen va aquí " /> antes del cierre </div>.

Este efecto de imagen es compatible con los navegadores siguientes Mozilla, Safari, Opera, Chrome y no tan eficaz con el navegador Internet Explorer que es muy aburrido.

Cualquier preguntas no dude en hacérmelo saber y de inmediato le responderé.

Saludos.

2 comentarios:

  1. En mi plantilla no aparece esto ]]> amigo

    ResponderEliminar
    Respuestas
    1. Todas las plantillas tienen ]]> busca bien tu plantilla, saludos

      Eliminar

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios