Presentar los posts populares como barras de colores – Justicia

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 quedarmuy 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 enHelpBlogger 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íaeliminar 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 paragenerar unas variables que después podremos utilizar desde elDiseñ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 yen 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 pseudoclasefirst-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 cadacontent también los podéis cambiar por otra cosa, como por ejemplo una flecha o un asterisco. Cualquierentidad HTML os podría servir, pero también está la opción decolocar una pequeña imagen. En fin por ahí van los tiros para modificar cosas.

3Ahora hay que buscar unb:widget parainsertar el nuevo artilugio. En un principio se podría poner detrás o delante de cualquiera pero si buscáis lasection 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'
h2data:title//h2
/b:if
div class='widget-content popular-posts'
ul
b:loop values='data:posts' var='post'
li
b:if cond='data:showThumbnails == "false"'
b:if cond='data:showSnippets == "false"'
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 == "false"'
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/AVvXsEiBNKTfDCUQfcs_MUfRt1IypZ_xeCKRGkPDVyIB15xONmlIcWWbNEAHQSx95Bsrfr_WPKWFMa0IYghGjGJXLm_T1Qs4ZEu3MC0713H4Z1msqEXKhcP6j0DQX45CVEFY4PJN8fwPc-IQHT0/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/AVvXsEiBNKTfDCUQfcs_MUfRt1IypZ_xeCKRGkPDVyIB15xONmlIcWWbNEAHQSx95Bsrfr_WPKWFMa0IYghGjGJXLm_T1Qs4ZEu3MC0713H4Z1msqEXKhcP6j0DQX45CVEFY4PJN8fwPc-IQHT0/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 desdeDiseño, bien con el icono de edición rápida y marcamosMostrar un máximo de 5 entrada(s), tantas como colores hemos definido con los anteriores códigos.