Crea enlaces de paginación fijos con texto vertical a los lados de tu blog de Squarespace
En esta entrada del blog, te mostraremos cómo crear enlaces de paginación fijos con texto vertical a la derecha y a la izquierda de tu blog. Este diseño es perfecto para quienes quieran añadir un toque único y moderno a la navegación de su página web.
Así es como se generó el código, utilizando ChatGPT.
/* Variables */
:root {
--pagination-width: 50px;
--link-color: #245959;
--hover-background-color: rgba(0, 0, 0, 0.1);
}
/* Pagination links */
.collection-type-blog .pagination a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
float: none;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
writing-mode: vertical-rl;
position: fixed;
}
/* Next and older posts links */
.collection-type-blog .pagination a.next-item, .collection-type-blog .pagination a.older-posts {
right: 0 !important;
left: auto !important;
text-align: center;
width: var(--pagination-width);
}
/* First child link */
.collection-type-blog .pagination a:first-child {
left: 0;
text-align: center;
width: var(--pagination-width);
}
/* Link colors */
body a, body a:link, body a:visited {
color: var(--link-color);
}
/* Link hover effect */
.collection-type-blog .pagination a:hover {
background-color: var(--hover-background-color);
cursor: pointer;
}
Con este código CSS, puedes crear enlaces de paginación fijos con texto vertical a la derecha y a la izquierda de tu blog. Este diseño exclusivo aporta un toque moderno a la navegación de tu página web y mejora la experiencia del usuario. ¡Solo tienes que añadir el código CSS proporcionado a la hoja de estilos de tu página web y ya está!
