Hace unos días vi un widget de entradas populares, no recuerdo donde, solo recuerdo que era un blog de Wordpress, que mostraba las entradas dando la apariencia de una barra estadística que va de mayor a menor según la popularidad.


Me gusto esa forma de mostrarla y ayer se me ocurrió transformar el widget de Entradas Populares, que Blogger nos ofrece en nuestras plantillas, para darle ese aspecto.

Esta realizado usando JQuery que me permite añadir automáticamente una clase diferente a cada li de una lista. Una vez hecho esto, el resto solo consiste en darle el aspecto que queramos a cada clase usando un poco de CSS.


Solo debemos añadir

<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#PopularPosts1 ul&#39;).children(&#39;li&#39;).addClass(function (i) {
return &#39;barra&#39; + (i+1);
});
});
</script>

Con eso le vamos añadir la clase "barra" más un número, según el orden de las entradas populares, la primera tendrá la clase "barra1", la segunda "barra2", y así sucesivamente.

Solo nos queda usar el CSS para darle la forma a nuestro widget de Entradas Populares

#PopularPosts1 {width:280px;margin: 40px 0 0;}
#PopularPosts1 li {width:280px;height:50px;margin: 5px 0;padding: 10px;}
.barra1 { background: #8787ff; }
.barra2 { background: #9797ff;width:97% !important;}
.barra3 { background: #a7a7ff;width:94% !important;}
.barra4 { background: #b7b7ff;width:91% !important;}
.barra5 { background: #c7c7ff;width:88% !important;}

Un par de detalles, a la hora de crear el widget, debéis seleccionar solo la opción de mostrar el titulo de las entradas, sin imagen en miniaturas y sin resumen. Además dependiendo del numero de entradas que queráis mostrar, deberéis ampliar el CSS arriba, realizado para mostrar 5 entradas, con .barra6..., .barra7, etc. Las medidas del widget que indico están ajustadas al ancho de mi sidebar, deberéis ajustarlos según vuestras medidas.

He ido un poco más lejos y ya que estaba, se me ocurrió numerarlos para darle este aspecto



Le añado la numeración con JQuery, además de las clases a cada li

<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#PopularPosts1 ul&#39;).children(&#39;li&#39;).addClass(function (i) {
return &#39;barra&#39; + (i+1);
});
$(&quot;#PopularPosts1 ul&quot;).each(function() {
$(&quot;li&quot;, this).each(function (i) {
$(this).prepend(&quot;<span class='num'>&quot; + (i+1) + &quot;</span>&quot;);
});
});
});
</script>

Además de la numeración le he añadido una clase "num" que me va a permitir estilizar los números con CSS

#PopularPosts1 {width:280px;margin: 40px 0 0;}
#PopularPosts1 li {width:280px;height:50px;margin: 5px 0;padding: 10px;}
.barra1 { background: #8787ff; }
.barra2 { background: #9797ff;width:97% !important;}
.barra3 { background: #a7a7ff;width:94% !important;}
.barra4 { background: #b7b7ff;width:91% !important;}
.barra5 { background: #c7c7ff;width:88% !important;}
.num {font-size:80px; margin: 20px 5px 10px 0px; float:left; color:#f5f5f5;}

Eso es todo, el resultado no queda mal ¿verdad?
Autor: . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también