Presentar los posts populares como barras de colores

Este efecto consiste en transformar el gadget de entradas más populares de manera que en lugar del típico blogroll, se vean unas barras gruesas de distintos colores y tamaños que contendrán el título (y enlace) del post y una pequeña miniatura.

Para ciertos diseños puede quedar muy cuco y aunque el código es un poco largo, realmente se instala en unos pocos pasos y la mayoría son de copiar y pegar.

Supongo que estará en más sitios, pero un servidor vio esto en HelpBlogger y sólo ha añadido el código para edición rápida del gadget, algunas pequeñas explicaciones adicionales y esta página de demostración dónde se puede ver en acción.

Demo

0Un paso previo sería eliminar el gadget de serie caso de que lo tuviéramos instalado. Se podría sustituir por el que veremos más adelante, pero creo que es más fácil así. Sin miedo, que si no os sale esto -que os saldrá- o no os gusta una vez puesto, con añadirlo de nuevo estará todo solucionado.

Escritorio ► Diseño ► Gadget Entradas Populares ► Editar ► Eliminar

1Ahora editamos la plantilla. Mejor NO expandir plantillas de artilugios para que el código no se haga muy largo y confuso.

Escritorio ► Plantilla ► Edición HTML ► Continuar

Lo primero sería copiar justo después de /* Variable definitions =========== el código necesario para generar unas variables que después podremos utilizar desde el Diseñador de plantillas para cambiar fácilmente los colores.

Para las últimas versiones de plantillas sería este:

<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable default="#fa4242" description="background color1" name="PopularPosts.background.color1" type="color" value="#ff4c54"/>
<Variable default="#ee6107" description="background color2" name="PopularPosts.background.color2" type="color" value="#ff764c"/>
<Variable default="#f0f" description="background color3" name="PopularPosts.background.color3" type="color" value="#ffde4c"/>
<Variable default="#ff0" description="background color4" name="PopularPosts.background.color4" type="color" value="#c7f25f"/>
<Variable default="#0ff" description="background color5" name="PopularPosts.background.color5" type="color" value="#33c9f7"/>
</Group>

Para las plantillas anteriores (no las clásicas), sería este otro y la diferencia es que no nos saldrían todos los colores en la misma opción del menú:

<Variable default="#fa4242" description="background color1" name="PopularPosts.background.color1" type="color" value="#fa4242">
<Variable default="#ee6107" description="background color2" name="PopularPosts.background.color2" type="color" value="#ee6107">
<Variable default="#f0f" description="background color3" name="PopularPosts.background.color3" type="color" value="#ff00ff">
<Variable default="#ff0" description="background color4" name="PopularPosts.background.color4" type="color" value="#ffff00">
<Variable default="#0ff" description="background color5" name="PopularPosts.background.color5" type="color" value="#00ffff">

2Ahora nos vamos algo más abajo y en la parte CSS insertamos el estilo. Para no fallar, lo hacemos justo antes de ]]></b:skin>:

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none;}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px;}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%;}
#PopularPosts1 ul li:first-child:after{content:"1";}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%;}
#PopularPosts1 ul li:first-child + li:after{content:"2";}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%;}
#PopularPosts1 ul li:first-child + li + li:after{content:"3";}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%;}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4";}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%;}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5";}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none;}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none;}

Además de otras propiedades más comunes como márgenes, bordes, fuentes, etc., si os fijáis todo esto no es más que asignar un color de fondo distinto a cada uno de los elementos de la lista que forma la relación de posts, usando las variables que generamos en el paso anterior. Para ello utilizamos la pseudoclase first-child y los selectores que nos permiten usar el siguiente elemento (+li), el siguiente del siguiente (+li+li) y así hasta completar los cinco que vamos a poder conseguir con este código.

Si queréis añadir más de cinco ya tenéis los dos primeros sitios que habrá que ampliar: las variables y el estilo. Si no vais a necesitar/querer el diseñador para cambiar los colores, el paso 1 os lo podéis saltar y directamente ponéis un código de color hexadecimal en lugar de $(PopularPosts.background.colorX).

Los números en cada content también los podéis cambiar por otra cosa, como por ejemplo una flecha o un asterisco. Cualquier entidad HTML os podría servir, pero también está la opción de colocar una pequeña imagen. En fin por ahí van los tiros para modificar cosas.


3Ahora hay que buscar un b:widget para insertar el nuevo artilugio. En un principio se podría poner detrás o delante de cualquiera pero si buscáis la section correspondiente al bloque dónde lo queréis colocar, pues os ahorráis luego tener que moverlo. Por ejemplo, en la plantilla demo lo coloqué en la sidebar, justo el primero:

<b:section-contents id='sidebar-right-1'>
AQUÍ PARA QUE SALGA EL PRIMERO
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
TAMBIÉN PODRÍA IR AQUÍ
<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
O AQUÍ

Este es el código que habría que insertar en ese lugar:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDQl9MG_mSGrGJMiI6TuNeVI74ZE1ghznEhceB3H6XefYV-i-Yx_sqFXjhgPuIQc2nWJg_j4q69Y1zVPDSaJtEmIIqYlntyNpuoU-iFt5-EhrUSfW2QeDEyjB0rF1Dhk_D5hMGnGb89b8/s1600/default.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
<b:else/>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDQl9MG_mSGrGJMiI6TuNeVI74ZE1ghznEhceB3H6XefYV-i-Yx_sqFXjhgPuIQc2nWJg_j4q69Y1zVPDSaJtEmIIqYlntyNpuoU-iFt5-EhrUSfW2QeDEyjB0rF1Dhk_D5hMGnGb89b8/s1600/default.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>

</div>
</b:includable>
</b:widget>

Guardamos y ya tenemos nuestras coloridas barras a falta de unos pequeños ajustes.


4Seleccionar el número correcto de entradas a mostrar para lo cual editamos el gadget bien desde Diseño, bien con el icono de edición rápida y marcamos Mostrar un máximo de 5 entrada(s), tantas como colores hemos definido con los anteriores códigos.

5Por último, si queremos cambiar los colores de cada barra sólo habrá que acudir al Diseñador de Plantillas...

Escritorio ► Plantilla ► Personalizar ► Avanzado ► PopularPosts Backgrounds

...y desde allí ir seleccionando los que nos gustan.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter