Entradas Populares de forma horizontal

Como hemos visto en otros post, 

1.  Cinco estilos de Entradas populares 
2. Gadget de entradas populares en dos columnas  
3. Varios estilos diferentes de Entradas Populares

podemos insertar en nuestro blog un gadget de entradas más populares.

Pero vamos a mostraros como lo podemos hacer para que se vea de forma horizontal.

Lo primero que tenemos que tener el gadget de entradas populares en nuestro blog.

Para ello nos vamos a Diseño > Añadir un Gadget  y buscamos Entradas Populares.

Luego marcamos las secciones tal y como vemos en la imagen.

Guardamos los cambios. El segundo paso es irnos a Tema > HTML y buscamos

]]></b:skin> y justo encima pegamos este código:

/*

-------Entradas Populares por www.oloblogger.com------------------------- */

      .popular-posts {margin-top:10px;}

.popular-posts ul {width: 830px; margin: 0 auto; text-align:center;}

.popular-posts .item-snippet{display: none;}

.popular-posts ul li {position:relative; float:left; list-style-type: none; padding: 0 0 0 5px ;}

.popular-posts ul li a {text-decoration:none; color: #000;}

.popular-posts li img {background: #666666; padding: 2px; filter:alpha(opacity=100); -moz-opacity:1; -webkit-opacity:1;-o-opacity:1;-ms-opacity:1; opacity:1;

transition: all .5s linear; -o-transition: all .5s linear; -moz-transition: all .5s linear; -webkit-transition: all .5s linear;}

.popular-posts li img:hover {filter:alpha(opacity=60); -moz-opacity:.6; -webkit-opacity:.6; -o-opacity:.6; -ms-opacity:.6; opacity:.6;}

.popular-posts li .item-title a {z-index:1; width: 150px; height: auto; line-height: 16px; padding: 5px; font-style: italic; font-size: 14px; text-decoration:none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; border: 2px solid #cc0000; background: #eeeeee; background: rgba(255,255,255,0.8); -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; border-radius: 5px; pointer-events: none; position: absolute; left: 50%; margin-left: -75px; bottom:190px; box-shadow: 1px 1px 2px rgba(0,0,0,0.1);

filter:alpha(opacity=0); -moz-opacity:0; -webkit-opacity:0;-o-opacity:0;-ms-opacity:0; opacity:0;

-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}

.popular-posts li:hover .item-title a {bottom:80px; filter:alpha(opacity=100); -moz-opacity:1; -webkit-opacity:1;-o-opacity:1;-ms-opacity:1; opacity:1;}

Guardamos y listo