• image01
    TRUCOS PARA TU BLOG
  • image02
    TUTORIALES
  • image03
    VIDEOTUTORIALES
  • image04
    PROGRAMAS
Mostrando las entradas con la etiqueta Efecto Zoom en las Entradas Populares de tu Blog. Mostrar todas las entradas
Mostrando las entradas con la etiqueta Efecto Zoom en las Entradas Populares de tu Blog. Mostrar todas las entradas

Efecto "Zoom" en Imágenes de tus Entradas Populares en Blogger

Con este truco le daremos un efecto especial a nuestras imágenes de las entradas populares en nuestro Blog, el mismo que se ejecutara cuando tus lectores pasen  el cursor sobre la imagen.


1. Entramos en el diseño de nuestro blog y en edición html buscamos, con CTRL+F o CTRL+G el siguiente código: ]]></b:skin> y justo despues pondremos lo siguiente:


 <style type='text/css'>
.PopularPosts .item-title{display:none}
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}
.PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
</style>

2. Clic en guardar plantilla y ya esta.
Nota.- Para realizar este efecto ,es necesario tener el Gadget "Entradas Populares"
El mismo que se añade en: Diseño / Agregar Gadget / Entradas Populares.