Menú horizontal

13 de diciembre de 2016

Añadir una página de archivo en Blogger

Añadir una página de archivo en el menú horizontal del blog


El aumento del número de entradas en un blog supone un incremento de registros en el gadget de archivo del blog. Si este gadget lo tenemos en la barra lateral puede resultar incómoda su consulta y ocupa demasiado espacio. Por este motivo quiero que el archivo del blog se muestre en una página independiente.

Para eso tengo que crear una página. Las páginas de Blogger permiten resaltar aspectos importantes del blog de forma atemporal, sin tener que mostrarse con datos de fecha de publicación; por ejemplo, la página de información tipo "A cerca de mí" o una página de contacto.

Crear una página en Blogger


Es sencillo. Vamos a Páginas-Página nueva. En el título de la página he puesto Archivo y lo he publicado sin escribir ningún contenido.

Página en Blogger

Añadir una página a la barra horizontal del menú páginas del blog


Una vez que está creada la página "Archivo" voy a añadirla a la barra horizontal del menú del blog para que se muestre como una pestaña más. Para eso tengo que ir a Diseño y editar el menú horizontal.


Menú Diseño en Blogger


Se abre la siguiente ventana donde me aparece el nombre de la nueva página que he creado. La selecciono. A continuación en Orden de la lista se muestran todas las pestañas que tiene el blog en el menú horizontal. Podemos cambiar su distribución arrastrando con el ratón al punto deseado.

Lista de páginas


Si visualizamos el blog veremos la nueva página "Archivo" que se ha añadido a la barra de menú horizontal del blog.

Nueva página Archivo

Voy a necesitar la URL de la página "Archivo" así que pincho sobre la pestaña Archivo y copio su dirección en el navegador. En mi caso es,

https://prodpersonal.blogspot.com.es/p/archivo.html

El siguiente paso será lograr que el widget de Archivo del Blog se muestre unicamente cuando se acceda a la página Archivo.


Agregar el widget de Archivo del Blog debajo del widget de Entradas del blog


Hasta el momento el widget de Archivo del blog se mostraba en la columna derecha pero ahora necesito moverlo y situarlo a continuación del widget de las Entradas del blog.

Mover widget Archivo del Blog

A partir de este cambio el widget del Archivo del blog se mostrará al final de todas las páginas y entradas del blog pero lo que necesito es que solo se muestre en la página que he creado exclusivamente para el archivo del blog (pestaña "Archivo" del menú horizontal).

Debo por lo tanto hacer uso de condicionales y modificar el HTML de la plantilla.


Modificar la plantilla para que el widget de archivo del blog se muestre solo en la página Archivo


Me queda el último paso que es modificar la plantilla. Como siempre en los casos que vamos a realizar cambios en la plantilla, debemos hacer copia de seguridad.

Voy a Plantilla-Editar HTML

Editar Plantilla HTML

Se abre la ventana con el código, abro el buscador con CTRL+F y escribo </skin>.

Inmediatamente después de la etiqueta </skin> abro una nueva fila y añado el siguiente contenido,

<b:if cond='data:blog.url != &quot;https://prodpersonal.blogspot.com/p/archivo.html&quot;'>
<style>
#BlogArchive1{
display: none;
}
</style>
</b:if>

<b:if cond='data:blog.url == &quot;https://prodpersonal.blogspot.com/p/archivo.html&quot;'>
<style>
#Blog1{
display: none;
}
</style>
</b:if>


¿Qué dice este código?

En el primer párrafo, si la página que se está viendo no es != la página de "Archivo" (URL de la página "Archivo" en cursiva) entonces el widget del Archivo del blog #BlogArchive1 no se muestra display:none

En el segundo párrafo, si la página que se está viendo es = la página de "Archivo" (URL de la página "Archivo" en cursiva) entonces el widget de Entradas del blog #Blog1 no se muestra display:none

Una vez que se haya guardado este cambio en la plantilla vamos a comprobar si realmente se ve el widget de Archivo de blog cuando se visita la página de "Archivo" y, por el contrario, cuando se visita cualquier otra página del blog, el widget de Archivo de Blog está oculto.

Efectivamente es así, el resultado al acceder a la página "Archivo" es el siguiente,


Resultado de añadir página archivo


Se mantiene el mismo estilo que se había establecido inicialmente (ver entrada Modificar el gadget de archivo del blog en Blogger).

Como ahora el espacio disponible para el widget de Archivo del blog es mayor, voy a modificar su estilo para mejorar su usabilidad y visibilidad.

En la plantilla HTML hago los siguientes cambios,

#BlogArchive1 {  /*contenedor de la caja del archivo*/
     display: block; 
     width: 960px;    /*ancho de la caja*/
     margin: 0px 0px 0px -10px;  /*margen de la caja del archivo*/
     padding: 0px;  /*relleno de la caja*/
     border: none;
     background: linear-gradient(wheat 20%, white 90%, silver);

}

El aspecto de la página "Archivo" es como se muestra a continuación,

Modificar estilo widget Archivo del blog

Ahora el cuadro del Archivo del blog se ha ajustado al ancho de la página.

Como disponemos de más espacio, podemos mostrar las entradas del archivo en una única línea, para eso tenemos que modificar de nuevo el widget #BlogArchive1 dentro de la plantilla HTML.

#BlogArchive1 ul {  /*texto de la caja de las entradas*/
    width: 600px;      /*ancho de la caja de las entradas*/
    font-size: 16px; 

    font-weight:normal; 
    list-style:none;
}

Ahora la página "Archivo" se mostrará así,

Widget Archivo del blog en una página