Continuando con la entrada anterior donde probé una barra de menú fija en la zona superior del blog, en la entrada de hoy voy a añadir al lateral izquierdo del blog una barra con los botones de redes sociales que se mantendrá fija mientras el lector se desplaza por la pantalla. Para conseguirlo solo voy a utilizar HTML y CSS.
Añadir una barra social fija en el lado izquierdo del blog
El diseño de mi blog de prácticas solo tiene barra lateral derecha (sidebar-right) por lo que en principio no puedo añadir ningún widget en la barra lateral izquierda (sidebar-left).
Probé a modificar el diseño de la plantilla en menú Tema (antes Plantilla) → Personalizar → Diseño → Diseño del cuerpo del blog, seleccionando la plantilla con las dos barras laterales.
Ahora Blogger ya me permitía añadir gadgets a la barra lateral izquierda.
Pero esta opción no fue muy útil para mi blog porque parte de los gadgets que he añadido y personalizado se modificaron, perjudicando por completo su aspecto. Podría ir modificándolos uno a uno pero me supondría una pérdida importante de tiempo con el riesgo añadido de dañar la estructura de la plantilla.
Nunca me olvido de realizar copia de la plantilla y del blog pero es posible que en caso de pérdida de datos el restablecimiento de la copia no permita una restauración exacta.
Nunca me olvido de realizar copia de la plantilla y del blog pero es posible que en caso de pérdida de datos el restablecimiento de la copia no permita una restauración exacta.
Así nos lo advierte Blogger.
Los iconos de las redes sociales ya están añadidos a la cabecera del blog,
(Ver entrada "Añadir los iconos de las redes sociales en Blogger").
(Ver entrada "Estilos CSS en los botones de redes sociales del blog").
Voy a intentar desplazar esta barra con las redes sociales que está en la cabecera y moverla hacia el lateral izquierdo del blog.
Para eso tengo que modificar el CSS de la plantilla referente a este gadget.
Voy al menú de Blogger:
Tema (antes Plantilla) → Editar HTML.
El div que añadí en el gadget HTML/Javascript tiene definida una clase <div class='bar_iconos_rrss'>
Con el buscador CTRL + F busco "bar_iconos_rrss" y borro todo el código CSS referente al gadget.
------------------------------------------------------------------------*/
.bar_iconos_rrss {
.bar_iconos_rrss ul {
.bar_iconos_rrss li:hover {
Y en su lugar copio el código siguiente,
/*Botones redes sociales fijos en barra lateral
--------------------------------------------------------------*/
.bar_iconos_rrss { /*contenedor de la barra social*/
position: fixed; /* posición fija en pantalla sea fija para que siempre se muestre*/
left: 150px; /* posición en la izquierda */
top: 250px; /* la barra se mueve hacia abajo*/
background: transparent; /*fondo transparente*/
z-index: 999; /*evita superposición de otro elemento*/
}
.bar_iconos_rrss ul { /*caja contenedora de la lista de iconos*/
background: transparent; /*fondo transparente*/
margin:0px;
}
.bar_iconos_rrss ul li { /*caja contenedora de cada icono*/
display: block; /*elimina los puntos de la lista*/
background: linear-gradient(to top left, #CD6C0A 0%, #F2E8DE 115%);
position: relative;
margin-left: -45px;
padding: 15px;
border-radius: 20px; /*borde redondeado*/
border-style: solid; /*estilo del borde*/
border-color: rgba(139,69,19, 0.7); /*color del borde*/
border-width: 0.5px 1px 3.25px 0.5px; /*ancho del borde*/
}
.bar_iconos_rrss ul li:hover { /*efecto hover sobre iconos*/
transform:translatex(30px); /*hover desplaza icono hacia la derecha*/
transition: all 0.35s ease; /*el efecto de 0.35sg se inicia lento, continúa rápido y termina lento*/
}
--------------------------------------------------------------*/
.bar_iconos_rrss { /*contenedor de la barra social*/
position: fixed; /* posición fija en pantalla sea fija para que siempre se muestre*/
left: 150px; /* posición en la izquierda */
top: 250px; /* la barra se mueve hacia abajo*/
background: transparent; /*fondo transparente*/
z-index: 999; /*evita superposición de otro elemento*/
}
.bar_iconos_rrss ul { /*caja contenedora de la lista de iconos*/
background: transparent; /*fondo transparente*/
margin:0px;
}
.bar_iconos_rrss ul li { /*caja contenedora de cada icono*/
display: block; /*elimina los puntos de la lista*/
background: linear-gradient(to top left, #CD6C0A 0%, #F2E8DE 115%);
position: relative;
margin-left: -45px;
padding: 15px;
border-radius: 20px; /*borde redondeado*/
border-style: solid; /*estilo del borde*/
border-color: rgba(139,69,19, 0.7); /*color del borde*/
border-width: 0.5px 1px 3.25px 0.5px; /*ancho del borde*/
}
.bar_iconos_rrss ul li:hover { /*efecto hover sobre iconos*/
transform:translatex(30px); /*hover desplaza icono hacia la derecha*/
transition: all 0.35s ease; /*el efecto de 0.35sg se inicia lento, continúa rápido y termina lento*/
}
Ahora la barra social ha cambiado su posición anterior en la cabecera para situarse en el lado izquierdo del blog.
Pero se repite el mismo problema que cuando añadí la barra social a la cabecera; el menú de páginas se ha desplazado.
Lo corrijo modificando los valores de la posición relativa de los submenús del gadget de Páginas.
Dentro de la edición de la plantilla (Tema → Editar HTML) busco .PageList li {
(Ver entrada "Añadir el Gadget de Páginas en la cabecera del blog").
.PageList li {
display: inline;
background: black;
margin: 2px;
padding: 10px 8px 5px;
position: relative;
top: 0px;
right: 15px;
border-radius: 6px;
border: 2px solid white;
}
display: inline;
background: black;
margin: 2px;
padding: 10px 8px 5px;
position: relative;
top: 0px;
right: 15px;
border-radius: 6px;
border: 2px solid white;
}
El valor anterior de 15px para la propiedad top lo cambio a 0px para que los submenús del menú Páginas se desplacen hacia arriba.
Ahora el menú de Páginas está situado en su posición correcta.
