x About... Servicios Portfolio BLOG Mis guest posts Contacto Codificando tu estilo
- 20.9.16 - Tutorial

Personalizando el Gadget Archivo

Personaliza el archivo gadget de Blogger

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.

Cuando hice el cambio de plantilla de las clásicas de Blogger a una personalizada algo que no me gustaba era el aspecto estándar de este gadget tan utilizado, y sinceramente pasé muchísimo tiempo buscando la manera de tenerlo más acorde con mi estilo.

Me encantaría decir que lo he diseñado yo, pero hasta esas habilidades aún no llego, creo que mi súper poder es la perseverancia y el rastreo en webs en idiomas ajenos al mío.

El código original es de una chica llamada Stephanie y su blog es Thesepapersites.com donde comparte códigos no sólo de Blogger sino que diseña en Wordpress además, yo simplemente le he dado un toque más femenino y le agrego el plus de que el gadget se mantenga siempre colapsado, idéntico a como lo tengo en El Blog de Cyball.

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


Ahora sí, voy directo al grano:

PASO #1:
 Tener instalado el Gadget tal cual lo muestro en la siguiente imagen:



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}
#ArchiveList ul ul 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 que está instalado en uno de mis blogs de pruebas 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
  • #ArchiveList ul ul 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 type='text/javascript'>
    //<![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'. Si tienes alguna duda con el código siempre puedes comentar y te responderé en la brevedad que el peque me permita .


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. Hola!
    Un post que puede ser de mucha ayuda, yo me canso muy pronto y suelo cambiar la forma de vision , así que anotado queda
    Bss

    ResponderEliminar
  3. Buena idea lo de personalizar, mi blog es de wordpress, no se si podre personalizarlo de la misma manera,pero voy a probar y ver si no hago un destrozo, jajaj.
    Gracias!

    ResponderEliminar
  4. 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
  5. 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

Dejar comentario

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *