Personalizando el Gadget Archivo

11.12.16

Coding

Este tutorial es un resumen de lo que por mucho tiempo busqué en sitios hispanos y aún no he encontrado: cómo personalizar el Gadget (o widget si lo prefieres) Archivo en su modalidad Jerarquía.

El código original es de una chica llamada Stephanie y su blog es Thesepapersites.com, yo simplemente le he dado un toque más femenino y le agrego el plus de que el gadget se mantenga siempre colapsado, efecto que me parece más adecuado.

El resultado del código que a continuación comparto sería:



PASO #1

Tener instalado el Gadget 'Archivo del Blog'.

PASO #2

En la Edición HTML de la plantilla, pegamos el siguiente código dentro de la etiqueta ]]></b:skin>:
/* Archive Widget Cabecera del Año */
#ArchiveList ul > li > a.post-count-link{font-size:18px;width:100%;margin:0 0 1px 0;padding:0 15px;line-height:38px;background-color:#d287a3;box-sizing:border-box;letter-spacing:1px;color:#333333;}
/* Cabecera del Mes */
#ArchiveList ul ul li a.post-count-link{font-size:16px;width:auto;margin:0 5px;padding:8px 25px;line-height:1;background:transparent;text-transform:uppercase;color:#333333;}
#ArchiveList .zippy{visibility:hidden}
#ArchiveList ul li a.toggle{position:absolute;top:0;left:0;width:100%;display:block;height:38px;z-index:5}
#ArchiveList ul ul li a.toggle{position:absolute;top:0;left:0;width:30px;height:24px;display:block;z-index:0}
#ArchiveList .toggle{position:relative}
#ArchiveList ul ul .zippy {color:#fff;visibility:visible;text-shadow:none}
#ArchiveList ul ul .zippy:before {content:'\f105';font-family:FontAwesome; position:absolute; top:3px; left:12px; padding:4px; line-height:1; font-size:18px; color:#d287a3;}
#ArchiveList ul ul .toggle-open:before{content:'\f107';position:absolute;top:3px;left:10px;font-size:16px}
#ArchiveList ul li{padding:0!important;text-indent:0!important;margin:0!important;position:relative}
#ArchiveList ul .post-count-link{padding:10px 0;display:inline-block;margin:0 5px}
#ArchiveList ul ul .posts li{margin:0 10px 10px 30px !important;text-transform:none;font-size:17px;color:#333333;}
#ArchiveList ul{margin:0 0 2px!important}
span.post-count{position:absolute;right:10px;top:7px;color:#333333;font-size:16px}

Este código tal cual te dará el aspecto que muestro en la imagen de presentación y puedes cambiarlo así:

  • En #ArchiveList ul > li > a.post-count-link  background-color controla el color de la cabecera del año, sólo escoge el que desees e incluso puedes usar una imagen de fondo. Allí también puedes cambiar el color con que aparece el año, para esto cambia color:#333333; por el color que desees o si quieres elimina esa línea y tomará el color que ya tengas establecido para los enlaces en tu plantilla. 
  • #ArchiveList ul ul li a.post-count-link controla el enlace que colapsa o expande los meses, allí puedes cambiar también el color (igual que en el punto anterior) o colocar una fuente tipográfica distinta a la que ya tengas programada.
  • Las flechas que colapsan los meses son íconos de FontAwesome, para ello debes tenerlo instalado y además le asigné el mismo color que la cajilla del año. Y las que suelen venir por defecto están 'ocultas' con el color blanco (#fff) así que si tienes un color de fondo distinto en tu blog, sustituye esta línea por el mismo tono que usas, esto se hace en #ArchiveList ul ul .zippy
  • span.post-count controla la posición y aspecto de la cantidad de entradas que aparece en paréntesis "(9)"

PASO #3

Localiza ahora </body> y antes de ello pega el script que mantiene colapsado el gadget:
<script>
    //<![CDATA[
 if ( $('.archivedate').hasClass('expanded')) 
{ 
$('.archivedate').removeClass('expanded'); 
$('.archivedate').addClass('collapsed'); 
} 
    //]]></script>
    

Y así termina la explicación de cómo tener un aspecto distinto en el Gadget Archivo, siempre colapsado para un acabado más 'limpio'.






yo, cyball

Escrito por Cyball Ruiz

Creadora de ANMATT Studio donde encuentras recursos y consejos para tu espacio en Blogger.






Otros artículos...



Se ha comentado...

  1. Hola!!

    Mil gracias por la aportación, me parece que queda mucho mejor! Como tú dices, más limpio, porque la lista puede llegar a ser demasiado larga. A ver si cuando tenga tiempo la pongo en practica jajaja Un beso!

    ResponderEliminar
  2. como cambia un blog cuando la gente lo cuida, lo mima y se preocupa por personalizarlo...y no sólo importar una plantilla y cambiar el contenido. un post genial para que la gente pueda darle su estilo a su blog!

    ResponderEliminar
  3. Hola!. Me encanta este tipo de entradas, el widget de archivo nunca fue de mis favoritos por lo que siempre lo acabo sacando, pero no pensé que habría una forma de adornarlo. Lo tendré en cuenta! Saludos

    ResponderEliminar