14 de julio de 2016

Modificar el gadget de archivo del blog en Blogger

Añadir el gadget Archivo del blog y personalizar su estilo

Continúo con la tarea de mejorar mi blog de prácticas. Me está suponiendo cada vez un mayor esfuerzo localizar las entradas por fecha.

Al inicio de este blog incorporé a la plantilla el gadget de Archivo del Blog  siendo así fácil encontrar las entradas que necesitaba consultar en cada momento porque eran muy pocas.

Ahora son más de 20 y se visualizan como se muestra a continuación,

Archivo del blog


Como se puede comprobar, no es visible el título de las entradas en la mayoría de los casos y tampoco se puede ver la fecha en la que fueron publicadas.

He modificado el aspecto pero las entradas siguen sin verse completas aunque rebaje el tamaño de la letra y tampoco muestra la fecha de publicación.

Añadir a la plantilla el gadget Archivo del Blog


Lo primero es ir al menú Diseño.

Menú Diseño

A continuación vemos las distintas disposiciones de la plantilla del blog en las que podemos añadir, editar o suprimir los gadgets en el blog, como nos informa Blogger.


Añadir gadgets en un blog

A continuación añado el gadget haciendo clic sobre +Añadir un gadget de la columna derecha (Sidebar-right-1).


Añadir gadget en columna derecha


 Se nos abre una ventana donde podemos configurar este gadget de archivo del blog.


Configurando el archivo del blog con estilo jerarquía y frecuencia mensual


El aspecto es el que se muestra al inicio de la entrada. Cuando el blog contiene muchas entradas no es práctio el estilo lista porque ocupará mucho espacio en el sidebar (barra lateral que está al lado del cuerpo de las entradas) así que selecciono el estilo jerarquía que mediante desplegables nos permite ver las entradas por años y meses (seleccionada la opción Mensualmente en la Frecuencia de archivo). De todos modos sigue ocupando mucho espacio, no ofrece información de la fecha de publicación de las entradas y no permite ver su título al completo.

Configurar Archivo del blog


Configurando el archivo del blog con estilo jerarquía y frecuencia diaria



Configurando gadget archivo blog


El aspecto del gadget de Archivo del blog es el que se puede ver a continuación. Nos presenta el archivo del blog siguiendo un orden cronológico igual que el caso anterior mediante desplegables pero ahora las entradas están agrupadas y clasificadas por año-mes-día.
Ahora ya puedo localizar con mayor celeridad una entrada de una determinada fecha pero sigue ocupando mucho espacio en el sidebar y tampoco me permite ver el título completo de las entradas.


Gadget Archivo blog


Configurando el archivo del blog con estilo menú desplegable y frecuencia diaria


Archivo del blog menú desplegable
Pruebo un nuevo estilo "Menú desplegable" con frecuenta de archivo Diariamente.
Ahora el gadget del archivo del blog se presenta con un menú desplegable.

Gadget Archivo del blog menú desplegable


Si se pincha en la flecha del menú, éste se despliega tomando este aspecto.

Archivo del blog desplegado

Como puede verse en la imagen superior, se muesta una relación de las entradas agrupadas por día, en el que se indica el número de entradas correspondientes a una misma fecha. Esta configuración no es la más adecuada cuando un blog contiene muchas entradas porque la lista desplegable será extensa. Añadido a esto, falta información del año en el que se han publicado las entradas y tampoco muestra su título. Por último, si se accede a un día con más de una entrada, se nos mostrarán todas las entradas publicadas en ese día.



Personalizar el gadget Archivo del Blog con CSS


Las posibilidades que me ofrece Blogger para mejorar el gadget de Archivo del blog no se ajustan a mis necesidades así que voy a intentar cambiar su aspecto mediante el código de estilos CSS.

Para eso me voy a editar HTML de la plantilla.

Editar HTML Blogger

A continuación me sitúo en cualquier punto de la ventana donde se muestra el código HTML y abro el buscador con CTRL+F y escribo /* Widgets.

Búsqueda /* Widgets


Una vez dentro del apartado de /* Widgets veo que los primeros códigos están relacionados con las entradas más populares (#PopularPosts1) que ya he personalizado en la entrada "Personalizar gadget de páginas más visitadas".

Busco los últimos códigos relacionados con #PopularPosts1 y a continuación escribo el código bajo la imagen, para personalizar el gadget de archivo del blog (#BlogArchive1), siendo su resultado final el que se muestra a continuación.


Gadget archivo del blog

Nota: El texto incluido entre /* ... */ corresponde a notas aclaratorias que no tienen efecto sobre el blog

/* Estilos del Archivo jerarquía */

#BlogArchive1 {                                   /*contenedor de la caja del gadget*/
     display: block;                                 /*muestra los elementos en una caja*/
     width: 275px;                                 /*ancho de la caja*/
     margin: 0px 0px 0px -30px;         /*margen de la caja del gadget*/
     padding: 0px;                              /*relleno de la caja*/
     border: none;                             /*sin borde*/
     background: linear-gradient(wheat 20%, white 90%, silver);    /*color de la caja*/
}

#BlogArchive1 h2 {                          /*título del gadget*/
     padding:12px;
     margin: 0;
     border: 1px solid #ffffff;            /*borde del título*/
     font-size: 18px;
     font-family:  'CENTURY GOTHIC', sans-serif; 
     color:rgba(101,48,8);              /*color del título*/
     text-transform: lowercase;     /*transforma el texto en minúsculas*/
     text-align: center;                  /*título alineado al centro*/
     border-radius:5px;  
     background: radial-gradient(circle, burlywood 20%, white 80%, silver);   /*fondo del título*/ 
     text-shadow: 1px 1px 1px peru;         /*efecto sombra letras del título color peru*/
     margin:0px;
     padding:5px 8px;
}

#BlogArchive1 ul.hierarchy {                 /*selector de jerarquía en caja entradas*/
     line-height: 0.5em;                            /*controla separación entre lineas*/
     margin: 5px 5px 0px 20px;             /*margen*/
     padding: 2px 0px 2px 0px;            /*relleno*/
     font-size: 13px;                            /*tamaño de los números del contador*/   
     color:#972D07;                           /*color flechas y contador (número)*/
     font-weight:bold;                       /*negrilla de flechas y contador*/
}

#BlogArchive1 ul {                    /*texto de la caja de las entradas*/
    width: 212px;                        /*ancho de la caja de las entradas*/

    font-size: 16px; 
    font-weight:normal;           /*evita que se mantenga la negrilla*/
    list-style:none; 
}

#BlogArchive1 ul li {
    float:center;                    /*posicionamiento flotante de la caja al centro*/
    position: relative;
    left: -15px;                   /*posición izquierda caja flotante*/
    bottom: -1px;             /*posición interior caja flotante*/
}

#BlogArchive1 ul li a:hover {            /*efecto hover para selección de años meses y entradas*/
    color:#000040;                              
    font-weight:bold;                          /*negrilla*/
    font-style:italic;                           /*cursiva*/
    font-size: 15px;
}

#BlogArchive1 ul li a {                /*títulos entradas*/
    text-align:left;                          /*texto alineado a la izquierda*/  
    color:#462003;                       /*color texto*/
    font-size: 14px;                     /*tamaño texto años meses entradas*/
    font-family: 'CENTURY GOTHIC', sans-serif;     /*tipo de letra*/
    letter-spacing: 0.08em;       /*espaciado entre letras*/
    padding: 0px;
    text-decoration:  none;      /*elimina las posibles decoraciones heredadas*/
}

#BlogArchive1 ul li a:focus {
    color:darkorange;  /*color del elemento seleccionado*/
}




4 comentarios:

  1. Muy interesante. Acabo de prácticar lo que recomiendas y me funcionó, aunque yo lo que quería era que en lugar de las fechas que vienen por defecto sólo se publicaran los títulos de los pots.

    ResponderEliminar
  2. Hola Clem, muchas gracias por tu comentario. Me alegra saber que te ha servido de alguna ayuda el artículo.

    En relación a la cuestión que planteas sobre la posibilidad de eliminar la fecha de publicación en el Gadget de Archivo del Blog, me parece realmente interesante.

    He probado y por el momento he encontrado esta solución, espero que te funcione.

    Tienes que buscar dentro de la edición de la plantilla HTML las siguientes líneas.

    b:includable id='interval' var='intervalData'>
    b:loop values='data:intervalData' var='interval'>
    ul class='hierarchy'>
    li expr:class='"archivedate " + data:interval.expclass'>
    b:include cond='data:interval.toggleId' data='interval' name='toggle'/>
    a class='post-count-link' expr:href='data:interval.url'>
    data:interval.name/>
    /a>
    span class='post-count' dir='ltr'>()
    /span>
    b:include cond='data:interval.data' data='interval.data' name='interval'/>
    b:include cond='data:interval.posts' data='interval.posts' name='posts'/>
    /li>
    /ul>
    /b:loop>
    /b:includable>
    ----------------------------------------------------------------------------------

    data:interval.name/>
    Elimina el nombre de las fechas

    b:include cond='data:interval.data' data='interval.data' name='interval'/>
    Elimina la jerarquía de meses y días. Quedan así solo las entradas ordenadas por año, desapareciendo el número del año al eliminar la línea anterior.

    Ahora el Archivo del Blog se muestra con la flecha del desplegable para cada año y el total de número de entradas.

    Es decir, te aparecerá
    > (20) …..en el caso de que tengas 20 entradas en el año A
    > (10)…en el caso de que tengas 10 entradas en el año B

    Si quieres que se muestre un único total deberás localizar en las líneas anteriores la siguiente,
    span class='post-count' dir='ltr'>()
    /span>

    y modificarla por esta que te incluyo a continuación,
    span class='post-count' dir='ltr'>(total entradas )
    /span>

    De esta forma, y siguiendo el ejemplo anterior ahora el Gadget de Archivo del Blog se mostrará así,
    > (total entradas 30)

    Espero que te sirva de ayuda. Si tienes algún problema no dudes en dejar un comentario.
    Saludos.
    Victoria

    Nota: Están eliminadas las etiquetas de apertura del código HTML para evitar conflictos en la publicación del comentario.

    ResponderEliminar
  3. Hola, he tratado de buscar en todos lados la opción para poder cambiar el tamaño de este gadget. Quizás sea yo la ciega pero no lo he encontrado (O quizás no exista) Te agradecería mucho si me ayudas.

    ResponderEliminar
    Respuestas
    1. Hola, muchas gracias por tu visita y consulta.

      Entiendo por tus palabras que deseas modificar el tamaño de la caja que contiene el Archivo del Blog.

      En el ejemplo que se muestra en esta entrada se especifica un ancho para el gadget de 275px.
      Si te fijas en el cuadro con el código CSS, verás al inicio..

      #BlogArchive1 { (corresponde al elemento contenedor o caja del gadget)

      dentro de las propiedades que se incluyen para controlar y configurar el aspecto de este gadget está la propiedad widht.

      width: 275px;

      con esta propiedad estoy indicando que la caja del gadget (es decir, BlogArchive1), tenga un ancho de 275px. Si quieres modificar el ancho debes modificar los píxeles. Un valor por ejemplo de 350px mostrará la caja más ancha y un valor de 150px, más estrecha.

      Si quieres ajustar el alto de la caja simplemente añades la propiedad height.

      Por ejemplo, si incluyes estas dos propiedades con el valor igual de 150px mostrará una caja cuadrada inferior a la del ejemplo.

      width: 150px;
      height: 150px;

      Otra posibilidad que puedes valorar es que la caja del gadget se ajuste al contenido actual. Es decir, su tamaño se adaptará en función del contenido que está mostrando en cada momento. Si en un principio el gadget solo muestra los años y se despliegan las jerarquías para ver el archivo también por meses, la caja se expandirá para incluir el nuevo contenido.

      En este caso las propiedades de ancho (width) y alto (height) tiene el valor "auto".

      widht: auto;
      height: auto;

      Espero que esta sea la duda que planteas y la respuesta pueda servirte de ayuda.
      En caso contrario me avisas y trataré de ayudarte en todo lo que me sea posible.

      ¡Un saludo!

      Eliminar