Entradas populares en horizontal + CSS y efectos añadidos

Hace unos días me puse a trajinar con dos o tres códigos de entradas populares que tenía por ahí, por probar, a ver lo que salía, y el resultado la verdad es que me agradó.

Se trata del gadget de entradas populares de blogger pero retocado con algunos estilos CSS y demás. Lo conseguí utilizando el código de entradas populares en horizontal que ya vimos en otro post y agregándole lineas y estilos.

Si lo quieres poner en tu blog, tan solo sigue estos sencillos pasos.

1. Nos dirigimos a editar la plantilla en HTML y buscamos (Ctrl+f) ]]></b:skin>
2. una vez encontrado pegamos encima el siguiente código:

#crosscol-wrapper{margin: 0 auto; padding: 0px}
#PopularPosts1{width: 100%; margin: 0px auto; padding: 5px 0px} /*define que o widget ocupe 100% de largura */
#PopularPosts1 h2{font-size:18px;text-align:left; border-bottom: 3px dotted #559CC9} /*estilo para el título del widget */
.PopularPosts .widget-content{float:left;margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
.PopularPosts .widget-content ul {margin: 0px auto;padding: 0px 0px;width: 100%; list-style:none; } /* estilo para a lista de posts */
#PopularPosts1 li {
width:286px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:left;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

Con esto ya tenemos las entradas populares en horizontal mas los estilos CSS que le hemos dado y que tu puedes personalizar a tu antojo.


Pero si aun quieres ponerle algo mas, como por ejemplo... un efecto zoom rotatorio al pasar el cursor por encima de las imágenes del gadget, entonces pega este código también antes de ]]></b:skin>

/* Entradas populares con Zoom
----------------------------------------------- */
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;padding: 0 !important;margin: 5px !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: 0px 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) ;}
.PopularPosts .item-title {line-height:1.8;text-align:top;display:inline;padding-top:20px;}

Pues por hoy he terminado, espero que os guste y os resulte tan bien como a mi o mejor :-)

Y recuerda...