Menú horizontal

3 de marzo de 2017

Estilo CSS en los botones de redes sociales del blog

Aplicar estilo CSS a los botones sociales


Después de añadir los iconos de redes sociales al blog voy a ver cómo puedo personalizarlos mediante código CSS.

Los botones de redes sociales los he añadido en el gadget HTML/Javascript dentro de la sección sidebar-right-1 de la plantilla del blog y se muestran en el lateral derecho, centrado sobre el menú Etiquetas.

Iconos de redes sociales sin CSS


El código que he añadido a este gadget HTML/Javascript es similar al que se muestra a continuación,

<div class="separator" style="clear: both; text-align: center;">
<a href="URL enlace a mi perfil Facebook"><img border="0" src="URL imagen icono facebook.png" /></a>
<a href="URL enlace a mi perfil Google plus"><img border="0" src="URL imagen icono google_plus.png" /></a>
<a href="mailto:midirecciondecorreo@correo.com"><img border="0" src="URL imagen icono mail-social-media.png" /></a></div>


Para aplicar estilo mediante código CSS debo identificar los elementos de los botones haciendo unos cambios:

- Elimino la etiqueta de apertura <div class="separator" style="clear: both; text-align: center;">

- La sustituyo por <div class='bar_iconos_rrss'> para identificar la caja, que contiene los iconos de las redes sociales, con el nombre 'bar_iconos_rrss'.

- Por último agrego la etiqueta <ul> para convertir los iconos en una lista no ordenada donde cada elemento incluido dentro de la etiqueta <li> es cada uno de los iconos. A todos los elementos de la lista no ordenada (todos los iconos) los identifico con el nombre 'icono_rrss'.

<div class='bar_iconos_rrss'>
   <ul>
       <li class='icono_rrss'><a href="URL enlace a mi perfil Facebook"><img border="0" src="URL imagen icono facebook.png" /></a>
       </li>
       <li class='icono_rrss'><a href="URL enlace a mi perfil Google plus"><img border="0" src="URL imagen icono google_plus.png" /></a>
       </li>
       <li class='icono_rrss'><a href="mailto:midirecciondecorreo@correo.com"><img border="0" src="URL imagen icono mail-social-media.png" /></a>
       </li>
   </ul>
</div>


La etiqueta <div> permite agrupar distintos elementos que están relacionados, definiendo un bloque de contenido para aplicar estilo de forma conjunta a todos ellos.
El atributo class asigna un nombre de clase a un elemento, que en este caso es el bloque de contenido <div>.


Aplicar CSS_Botones de redes sociales en la sección sidebar-right-1 del blog


En este primer ejemplo voy a aplicar estilo CSS a los iconos de redes sociales que están incluidos dentro de la sección sidebar-rigth-1 del blog, sobre el menú Etiquetas.

Los botones de las redes sociales estarán incluidos dentro de una caja con fondo degradado y borde redondeado con sombra, a los que aplicaré efecto hover para que al posicionarse el ratón sobre ellos, su tamaño se reduzca. La caja estará centrada sobre el menú de Etiquetas. (Ver imagen).

Resultado de iconos de redes sociales en lateral derecho del blog


Después de hacer una copia de seguridad de la plantilla voy al menú de Blogger:   Tema (antes Plantilla) → Editar HTML.

Localizo dentro de la plantilla </b:skin> con el buscador (CTRL+F) y justo arriba pego el código CSS siguiente,

/*Botones redes sociales en sidebar-rigth-1
---------------------------------------------------------------------*/
.bar_iconos_rrss {                    /*caja contenedor del bloque con la lista no ordenada*/
display: inline-block;            /*la caja se comporta como bloque pero en línea*/
margin-bottom: -15px;     /*margen inferior con referencia al sidebar-right-1*/
margin-left: 0px;             /*margen izquierdo con referencia al sidebar-right-1*/ 
width:105%;                 /*para igualarlo al ancho de la caja etiquetas*/
position: relative;     /*posición relativa respecto al sidebar-right-1*/

}

.bar_iconos_rrss ul {      /*caja contenedora de los elementos de la lista no ordenada - iconos*/
background: linear-gradient(wheat 30%, snow 90%, silver);      /*fondo degradado lineal de la caja*/
box-shadow: 1px 2px 3px rgba(139,69,19,0.90);                        /*sombra del borde de la caja*/ 
border-radius: 16px;                                            /*borde redondeado de la caja*/
border-style: outset;                                         /*estilo del borde de la caja*/
border-color: #7a7a0f;                                   /*color del borde de la caja*/
border-width: 2px 0px 2px 1.5px;              /*ancho del borde de la caja*/
padding:4px 5px 2px 6px;                         /*relleno entre los iconos*/ 
float: right;                                   /*desplazamiento a la derecha de la caja para no quedar oculta*/
margin: 0px 32px 0px 0px;      /*margen de la barra de iconos dentro de la caja para centrarla*/
}

.bar_iconos_rrss li.icono_rrss {         /*estilo para cada caja contenedora de un icono*/
margin: 4px;                 /*margen caja de cada icono*/
padding: 2px;             /*relleno caja de cada icono*/
display: inline;          /*los iconos se muestran en línea*/
float:left;                 /*desplazamiento a la izquierda caja de cada icono para no quedar oculta*/
}

.bar_iconos_rrss li:hover {              /*efecto hover sobre los iconos*/
transform: scale(0.8,0.8);             /*transforma en 2D la escala (eje X, eje Y) de cada icono*/
transition: all 0.35s ease;           /*tiempo de transición de 0.35 sg para el efecto hover . Empieza lento, continúa rápido y finaliza lento*/
}



Aplicar CSS_Botones de redes sociales en la cabecera del blog


En este segundo ejemplo la barra de botones de las redes sociales la voy situar en la cabecera, debajo del título del blog. En el blog de pruebas he incluido hasta el momento el buscador y he añadido posteriormente el gadget de Páginas. 

Si accedo al diseño de la plantilla (menú Diseño) me doy cuenta que no puedo añadir a la cabecera ningún gadget más porque no se muestra + Añadir un gadget.

Gadgets de la cabecera del blog


Para añadir un nuevo gadget en la Cabecera tengo que modificar el parámetro maxwidgets de Header (cabecera). Esto supone que debo modificar la plantilla, y como siempre en este caso, hago primero una copia de seguridad de la plantilla y del blog.

A continuación voy al menú de Blogger:
Tema (antes Plantilla) → Editar HTML

y dentro de la ventana busco con CTRL+F la siguiente línea, 
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
(para la plantilla con la cabecera sin widgets añadidos).

Mi blog de pruebas como ya tenía añadido el gadget de Páginas muestra el valor 2 para el parámetro maxwidgets.
<b:section class='header' id='header' maxwidgets='2' name='Header' showaddelement='yes'> 

Y modifico esta línea en negrilla por, 

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
(primer caso de cabecera sin widgets añadidos.) 

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
(cabecera del blog de prueba con un widget añadido).

Guardo la plantilla y veo cómo ha quedado el diseño de la plantilla tras esta modificación.

Añadido un nuevo gadget a la cabecera del blog


Ahora se muestra + Añadir un gadget que me permite añadir el gadget HTML/Javascript encima del gadget Páginas

Añadido gadget redes sociales en cabecera


Como en el ejemplo anterior, edito el gadget y añado el mismo código HTML.
 
<div class='bar_iconos_rrss'>
   <ul>
       <li class='icono_rrss'><a href="URL enlace a mi perfil Facebook"><img border="0" src="URL imagen icono facebook.png" /></a>
       </li>
       <li class='icono_rrss'><a href="URL enlace a mi perfil Google plus"><img border="0" src="URL imagen icono google_plus.png" /></a>
       </li>
       <li class='icono_rrss'><a href="mailto:midirecciondecorreo@correo.com"><img border="0" src="URL imagen icono mail-social-media.png" /></a>
       </li>
   </ul>
</div>

 
Una vez guardada la disposición de la plantilla voy al menú de Blogger:
Tema (antes Plantilla) → Editar HTML.

Justo encima de  </b:skin>  pego el código CSS siguiente, que es muy parecido al utilizado en el ejemplo anterior.

/*Botones redes sociales en cabecera debajo de gadget Páginas
-------------------------------------------------------------------------------------*/
.bar_iconos_rrss {                    /*caja contenedor del bloque con la lista no ordenada*/
display: inline-block;             /*la caja se comporta como bloque -caja en línea*/
margin-left: 650px;              /*margen izquierdo relativo*/ 
margin-bottom: -120px;   /*margen inferior relativo respecto a caja buscador*/
position: relative;            /*posición relativa respecto al resto de elementos de la cabecera*/
width:228px;                 /*para igualarlo al ancho de la caja buscador*/
}

.bar_iconos_rrss ul {    /*caja contenedora de los elementos de la lista no ordenada - iconos*/
margin-left: 10px;      /*para centrarla bajo la caja buscador*/
}

.bar_iconos_rrss li.icono_rrss {       /*estilo para cada caja de icono*/
margin: 4px;                 /*margen caja de cada icono*/
padding: 2px;             /*relleno caja de cada icono*/
display: inline;         /*los iconos se muestran en línea*/
float:left;                /*desplazamiento a la izquierda caja de cada icono para no quedar oculta*/
}

.bar_iconos_rrss li:hover {       /*efecto hover sobre los iconos*/
transform: scale(0.8,0.8);      /*transforma en 2D la escala (eje x,eje y) de cada icono*/
transition: all 0.35s ease;    /*el efecto de 0.35sg se inicia lento, continúa rápido y termina lento*/
}


Guardo la plantilla y voy a ver el blog.

Los iconos de las redes sociales se muestran en la cabecera (bajo la caja del buscador) y sin fondo, para integrarse completamente con el resto de los elementos pero detecto un problema porque la posición del gadget de Páginas (que también está dentro de la cabecera) se ha visto afectada al desplazarse hacia abajo. Esto se debe a que ambos gadgets tienen establecida la posición en valores relativos.

Menú Páginas desplazado habia abajo


El gadget del buscador, que también está dentro de la cabecera, no se ha movido al añadir el nuevo gadget porque su posición es absoluta.

Solucionar este problema no es complicado. Solamente hay que establecer una posición relativa a la caja contenededora del gadget de Páginas, ajustándola a la posición que tenía antes. 
Para esto tengo que añadir código CSS al widget de Páginas, sobre la línea  .PageList ul {   el código CSS  marcado en azul.
(Ver entrada "Añadir el Gadget de Páginas en la cabecera del blog").

 /*Menú páginas sobre título cabecera
---------------------------------------------------*/ 
.PageList {   
position: relative;
top: -32px !important;
}


.PageList ul {          
background: none !important;
}
....
Resultado de incluir los iconos de redes sociales en la cabecera


Ahora el menú de Páginas está a la misma altura que la barra del buscador.



Iconos de redes sociales en la cabecera, bajo el título del blog


Si los iconos de las redes sociales los queremos situar bajo el título del blog, tan solo tenemos que modificar la posición dentro de la plantilla, modificando los valores marcados en azul.

.bar_iconos_rrss {    
display: inline-block; 
margin-left: 661px;              /*para igualar el margen derecho del buscador*/ 
margin-bottom: -310px;     /*para situarlo bajo el título del blog*/
position: relative;         
width:228px;                
z-index: 1;    /*para que no queden oculto los iconos y sus efectos bajo otros elementos de la cabecera*/
}
 
La cabecera del blog con estos cambios tiene este aspecto,


Iconos de redes sociales en cabecera bajo el título del blog



Anexo_Código CSS para personalizar los iconos de redes sociales


.bar_iconos_rrss {        /*caja contenedor del bloque con la lista no ordenada*/


background: gold;
Se puede aplicar fondo a la caja contenedor de la barra de iconos.

Ejemplo background en bar_iconos_rrss


.bar_iconos_rrss ul {      /*caja contenedora de los elementos de la lista no ordenada - iconos*/


list-style-image:none;
Esta propiedad establece una imagen como marcador de los elementos de una lista. Como esta propiedad se hereda, es posible que sea necesario incluirla con el atributo none para que no muestre ningún marcador en los iconos.
 
list-style-type:none;
Esta propiedad especifica el tipo de marcador de los elementos de una lista. Como esta propiedad se hereda, es posible que sea necesario incluirla con el atributo none para que no muestre con los iconos.


.bar_iconos_rrss li.icono_rrss {   /*estilo para cada caja contenedora de un icono*/


background: black !important;
Podemos aplicar color al fondo de la caja contenedor de cada icono.

Ejemplo background en negro para los iconos redes sociales


.bar_iconos_rrss li:hover {      /*efecto hover sobre los iconos*/


Propiedad transform

🌑  transform: translatey(-12px);
Transforma un elemento (un icono en estos ejemplos) desplazándolo sobre el eje Y (vertical). Cada icono se desplaza hacia arriba (eje y /pixeles negativos). Hacia abajo sería 12px.
Si el desplazamiento se produce horizontalmente cambiamos la y por la x.
transform: translatex(12px); desplaza el icono hacia la derecha (-12px hacia la izquierda).
🌑  transform: translate(-1px,-12px);
Desplazamiento en 2D sobre eje X y eje Y. Cada icono se desplaza arriba hacia la izquierda.

🌑  transform: skew(12deg,12deg);
Sesgo en 2D para cada elemento (icono) a lo largo del eje X y eje Y.

🌑  transform: rotatez(360deg);
Rotación en 3D de 360 grados de cada icono sobre eje Z que corresponde al fondo/profundidad de un elemento en 3D.
🌑  transform: rotatey(360deg);
Rotación en 3D de 360 grados de cada icono sobre eje Y vertical.
🌑  transform: rotatex(360deg);
Rotación en 3D de 360 grados de cada icono sobre eje X horizontal.
🌑  transform: rotate(-360deg);
Rotación en 2D de 360 grados de cada icono. Rota sobre su eje con un giro de 360 grados hacia la izquierda. A la derecha serían (360deg). Se pueden modificar los grados.

🌑 transform: matrix(1,-0.1,0.4,0.5,0.3,0);   
Transforma un elemento en 2D en función de una matriz de 6 valores.