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.