Cuando se selecciona en el blog una página del menú de etiquetas, las entradas que incluyen esa etiqueta se visualizan todas y en su totalidad, dificultando su acceso y visibilidad al usuario y ocasionando un mayor tiempo de espera en su carga.
Estos inconvenientes se verán agravados cuanto mayor
sea el número de entradas que integran la etiqueta seleccionada.
Para evitar estos problemas, una opción es hacer solo visible el título de las entradas. De esta forma el usuario que decide consultar una página de etiquetas verá fácilmente el título de todas las entradas, pudiendo hacer clic sobre cualquiera de ellas para leerla en su totalidad.
Visibles solo los títulos de las entradas en las páginas del menú de etiquetas
Como en todos los casos en los que vamos a realizar cambios en el código de la plantilla, hacemos primero una copia de seguridad
Una vez hecha la copia de seguridad, vamos a Plantilla → Editar HTML.
Dentro de la ventana que se abre con el código, activamos el buscador con CTRL+F y buscamos la siguiente línea de código,
<b:include data='post' name='post'/>
Una vez esté localizada, la eliminamos y la sustituimos por el siguiente código,
<b:if cond='data:blog.homepageUrl !=data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<li type="square"><data:post.title/></li></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<li type="square"><data:post.title/></li></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
Ahora al seleccionar una etiqueta del blog, Blogger ya no mostrará las
entradas en su totalidad, solamente su título.
Podemos personalizar la imagen del blog cuando el usuario selecciona una etiqueta, mediante código CSS.
Dar estilo con CSS a las páginas de etiquetas (entradas sin incluir listas)
Si ninguna de las entradas del blog incluye listas (ordenadas o no ordenadas)...
se puede añadir directamente código CSS a la plantilla.
Si alguna entrada contiene listas, el estilo que apliquemos a las páginas de etiquetas afectará al estilo de cada lista que esté incluida en las entradas, tomando el mismo formato y aspecto que las páginas de etiquetas.
Se debe a que la línea que hace referencia al título de la entrada está entre la etiqueta <li>, por lo tanto es un elemento de una lista (ver cuadro de arriba).
<li
type="square"><data:post.title/></li></a>
Vamos a Plantilla → Editar HTML.
Activamos el buscador con CTRL+F, buscamos </b:skin> y pegamos las siguientes líneas justo encima de </b:skin>.
/* Estilo página etiquetas
----------------------------------------------- */
.post-outer li{ /*contenido caja títulos entradas de las etiquetas*/
background: navy; /*fondo elementos*/
height:20px; /*altura de la caja de cada entrada*/
margin-left:20px; /*margen izquierdo*/
margin-right:20px; /*margen derecho*/
padding:0px 0px 5px 10px; /*relleno*/
font-size:18px; /*tamaño fuente*/
font-family: 'CENTURY GOTHIC', sans-serif; /*tipo letra*/
font-weight:bold; /*negrilla*/
font-style:italic; /*cursiva*/
color:white; /*color*/
border-radius:10px; /*bordes redondeados*/
box-shadow: 5px 2px 9px #666666; /*sombra caja*/
transition: all .1s ease-in-out; /*efecto de transición*/
}
.post-outer li:hover{ /*estilo para la transición*/
color:white; /*color fuente elemento seleccionado*/
font-size:18.7px; /*tamaño fuente elemento seleccionado*/
font-style:normal; /*estilo normal*/
font-weight:500; /*ancho fuente*/
text-align:center; /*texto alineado al centro */
margin-left:10px; /*margen desplazamiento elemento seleccionado*/
}
----------------------------------------------- */
.post-outer li{ /*contenido caja títulos entradas de las etiquetas*/
background: navy; /*fondo elementos*/
height:20px; /*altura de la caja de cada entrada*/
margin-left:20px; /*margen izquierdo*/
margin-right:20px; /*margen derecho*/
padding:0px 0px 5px 10px; /*relleno*/
font-size:18px; /*tamaño fuente*/
font-family: 'CENTURY GOTHIC', sans-serif; /*tipo letra*/
font-weight:bold; /*negrilla*/
font-style:italic; /*cursiva*/
color:white; /*color*/
border-radius:10px; /*bordes redondeados*/
box-shadow: 5px 2px 9px #666666; /*sombra caja*/
transition: all .1s ease-in-out; /*efecto de transición*/
}
.post-outer li:hover{ /*estilo para la transición*/
color:white; /*color fuente elemento seleccionado*/
font-size:18.7px; /*tamaño fuente elemento seleccionado*/
font-style:normal; /*estilo normal*/
font-weight:500; /*ancho fuente*/
text-align:center; /*texto alineado al centro */
margin-left:10px; /*margen desplazamiento elemento seleccionado*/
}
Los títulos de las entradas se muestran dentro de un marco con efecto sombra, de bordes redondeados, fondo navy y letra white.
Se ha incluido en el código CSS el efecto hover. Si se sitúa el ratón sobre el título de una entrada el aspecto será el siguiente,
Esta modificación en el blog facilita al usuario su consulta y navegación.
Dar estilo con CSS a las páginas de etiquetas (entradas que incluyen listas)
Si alguna entrada del blog contiene listas (ordenadas o no ordenadas) no podemos aplicar código CSS a la plantilla porque se modificará el estilo de las listas que se incluyen en las entradas.
Necesitamos que el esitlo que se visualice en las páginas de etiquetas no sea el mismo que el de la
página principal del sitio. Ambas páginas son del mismo tipo lo que nos obliga a hacer uso de las estructuras condicionales de HTML.
En Blogger hay cuatro tipos de páginas (pageType):
item Son las publicaciones o entradas individuales:
P.ej. https://prodpersonal.blogspot.com/2016/06/margin-padding-y-border.html
archive Son las
páginas del gadget Archivo del blog:
P.ej. https://prodpersonal.blogspot.com/2016_12_01_archive.html
static_page Son las
páginas estáticas:
P.ej. https://prodpersonal.blogspot.com.es/p/archivo.html
index Son el resto de páginas como el home (página principal), entradas antiguas o las etiquetas:
P.ej. https://prodpersonal.blogspot.com/search/
P.ej. https://prodpersonal.blogspot.com.es/search/label/Blogger
homepageUrl Es la página de Inicio del blog.
Añadir condicionales para aplicar estilo a la página de etiquetas
Se accede al editor de plantilla HTML del blog y se localiza con CTRL+F la etiqueta </skin>.
A continuación de la etiqueta </skin> se abre una nueva fila y se añade el siguiente código,
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<style>
.post-outer li{ /*contenido caja títulos entradas de las etiquetas*/
background: navy; /*fondo elementos*/
height:20px; /*altura de la caja de cada entrada*/
margin-left:20px; /*margen izquierdo*/
margin-right:20px; /*margen derecho*/
padding:0px 0px 5px 10px; /*relleno*/
font-size:18px; /*tamaño fuente*/
font-family: 'CENTURY GOTHIC', sans-serif; /*tipo letra*/
font-weight:bold; /*negrilla*/
font-style:italic; /*cursiva*/
color:white; /*color*/
border-radius:10px; /*bordes redondeados*/
box-shadow: 5px 2px 9px #666666; /*sombra caja*/
transition: all .1s ease-in-out; /*efecto de transición*/
}
.post-outer li:hover{ /*estilo para la transición*/
color:white; /*color fuente elemento seleccionado*/
font-size:18.7px; /*tamaño fuente elemento seleccionado*/
font-style:normal; /*estilo normal*/
font-weight:500; /*ancho fuente*/
text-align:center; /*texto alineado al centro */
margin-left:10px; /*margen desplazamiento elemento seleccionado*/
}
</style>
</b:if>
</b:if>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<style>
.post-outer li{ /*contenido caja títulos entradas de las etiquetas*/
background: navy; /*fondo elementos*/
height:20px; /*altura de la caja de cada entrada*/
margin-left:20px; /*margen izquierdo*/
margin-right:20px; /*margen derecho*/
padding:0px 0px 5px 10px; /*relleno*/
font-size:18px; /*tamaño fuente*/
font-family: 'CENTURY GOTHIC', sans-serif; /*tipo letra*/
font-weight:bold; /*negrilla*/
font-style:italic; /*cursiva*/
color:white; /*color*/
border-radius:10px; /*bordes redondeados*/
box-shadow: 5px 2px 9px #666666; /*sombra caja*/
transition: all .1s ease-in-out; /*efecto de transición*/
}
.post-outer li:hover{ /*estilo para la transición*/
color:white; /*color fuente elemento seleccionado*/
font-size:18.7px; /*tamaño fuente elemento seleccionado*/
font-style:normal; /*estilo normal*/
font-weight:500; /*ancho fuente*/
text-align:center; /*texto alineado al centro */
margin-left:10px; /*margen desplazamiento elemento seleccionado*/
}
</style>
</b:if>
</b:if>
Este código permite que las páginas de etiquetas y las páginas de entradas antiguas se muestren con un estilo diferente a la página de inicio del blog, mejorando la usabilidad del blog y la experiencia del usuario con un acceso fácil y rápido al contenido del blog.