Instalar los iconos de redes sociales en el header y sidebar de blogger

En una entrada anterior te conté cómo instalar una fuente llamada fontawesome para utilizar iconos en tus listas, páginas y entradas de blogger, para darles ese toque diferente y original que las haga especiales y visualmente atractivas. Puedes volver a revisar la entrada e instalar la fuente que te digo en el siguiente botón:

CÓMO INSTALAR ICONOS EN BLOGGER

Hoy, vamos a utilizar nuestros iconos para reducir el número de imágenes que tenemos en el blog, mejorar su velocidad de carga y mantener ese atractivo visual que nos ayuda a conectar emocionalmente con nuestro público ideal.

Para empezar, necesitarás tener instalada la fuente que activará el uso de iconos, por lo que si no hiciste click en el enlace, hazlo ahora y sigue los pasos para instalar Fontawesome en Blogger. No se tarda nada. Y cuándo integres tus iconos dónde ahora tienes imágenes, notarás la diferencia en el tiempo de carga. Y Google también.

CÓMO PONER ICONOS EN TUS REDES SOCIALES

Mis actuales redes sociales son iconos de esta familia tipográfica. Los he personalizado a mi gusto, como vimos en la entrada para instalar la fuente en blogger. Y los he instalado en mi blog siguiendo los tutoriales de siempre.

Pero partiendo de que ya tienes la fuente instalada, vamos a ver cómo poner tus nuevos iconos en la cabecera de tu blog, dónde tenía yo los míos antes del último cambio de plantilla ¿de acuerdo?

1.- Entra en tu plantilla HTML.

2.- Pincha en cualquier zona dentro del cuadro blanco del código, para activar tu plantilla.

3.- Abre el buscador pulsando a la vez: Control (Ctrl) y la tecla F.

4.- Busca: ]]></b:skin>

5.- Justo encima pega:

#redes_sociales {
display: block;
position: absolute;
z-index:100;
margin-top: -70px;
margin-left: 733px !important;
}

6.- Guarda los cambios. Vamos a instalar nuestras redes sociales en Diseño y después volveremos a este fragmento para personalizarlo.

7.- Entra en Diseño y añade un nuevo gadget HTML/Javascript.

8.- Pega el siguiente código:

<div id='redes_sociales'>
  <table class='redes_sociales'>
   <tr>

<td>
<a href='#' target='_blank'><i class="fa fa-facebook"></i></a>
</td>

<td>
<a href='#' target='_blank'><i class="fa fa-twitter"></i></a>
</td>

<td>
<a href='#' target='_blank'><i class="fa fa-pinterest"></i></a>
</td>

<td>
<a href='#' target='_blank'><i class="fa fa-instagram"></i></a>
</td>

<td>
<a href='#' target='_blank'><i class="fa fa-google-plus"></i></a>
</td>

<td>
<a href='#' target='_blank'><i class="fa fa-linkedin"></i></a>
</td>

<td>
<a href='#' target='_blank'><i class="fa fa-youtube-play"></i></a>
</td>

<td>
<a href='#' target='_blank'><i class="fa fa-rss"></i></a>
</td>

  </tr>

</table>
</div>

9.- ¿Qué significa cada fragmento? Si estás familiarizada con las tablas html y con los iconos, no tendrás problema para personalizar tus redes sociales, añadir o quitar iconos y poner tus enlaces. Pero, por si acaso, te cuento un poco:

Cada uno de estos fragmentos:

<td>
<a href='#' target='_blank'><i class="fa fa-facebook"></i></a>
</td>

Es una celda de tu tabla:

Por lo tanto, si quieres eliminar alguna, solo tienes que borrar el fragmento de la red social que no vayas a utilizar desde <td> hasta </td>.

Si solo necesitas facebook, twitter y pinterest, quedaría así:

<div id='redes_sociales'>
  <table class='redes_sociales'>
   <tr>

<td>
<a href='#' target='_blank'><i class="fa fa-facebook"></i></a>
</td>

<td>
<a href='#' target='_blank'><i class="fa fa-twitter"></i></a>
</td>

<td>
<a href='#' target='_blank'><i class="fa fa-pinterest"></i></a>
</td>

  </tr>

</table>
</div>

Y, por último, tus enlaces. Solo tienes que sustituir el símbolo # por la utl de tu perfil o página en cada red social. Así:

<td>
<a href='https://www.facebook.com/elperrodepapel' target='_blank'><i class="fa fa-facebook"></i></a>
</td>

Super sencillo ¿verdad?


10.- Los enlaces llevan la orden target='_blank'. Esto hace que los enlaces se abran en una nueva pestaña. Muy recomedable para no echar a tus visitas de tu blog cada vez que visiten una página externa.

Pero también puedes indicar a Google que no indexe esos enlaces añadiendo otro pequeño fragmento:

<td>
<a href='https://www.facebook.com/elperrodepapel' target='_blank' rel='nofollow'><i class="fa fa-facebook"></i></a>
</td>

Tendrías que añadirlo a cada una de tus celdas para que Google lo tenga en cuenta. O no, porque a veces hace lo que le apetece. Pero tú al menos has indicado que es un enlace nofollow.


11.- Ahora, por último, vamos a colocar tus redes sociales dónde quieras. Volvemos a la plantilla HTML y buscamos el código que instalamos antes:

#redes_sociales {
display: block;
position: absolute;
z-index:100;
margin-top: -70px;
margin-left: 733px !important;
}

margin-top: margen superior de tus redes sociales.
margin-left: margen izquierdo de tus redes sociales.

Jugando con estos valores, puedes colocar tu tabla de iconos sociales dónde quieras.

¿Y SI QUIERO PONER MIS ICONOS SOCIALES EN LA SIDEBAR? 

Sin problema.

Porque el gadget anterior no se verá en la Vista Móvil, así que colocarlas en tu sidebar es una buena opción para no perderlas.

1.- Añade un nuevo gadget HTML en tu sidebar y añade el siguiente código:

---

<div align='center'>
<img alt='TUS PALABRAS CLAVE' border='0' src='URL DE TU FOTO'  />
</div>

<br/>

<div align='center'>
<font size='3' face="Oswald" color="#000000">¡Hola, soy Celia!<br /> Amante del <strong>diseño gráfico, el marketing, la fotografía y el mundo blogger</strong>.<br /> Desde este blog quiero ayudarte a hacer realidad tu idea y cambiar tu estilo de tu vida.<br /> ¿Te animas a <strong>marcar la diferencia</strong>?</font>

</div>

<br/>

<div align='center'>
<a href='#' target='_blank'><i class="fa fa-facebook"></i></a>
<a href='#' target='_blank'><i class="fa fa-twitter"></i></a>
<a href='#' target='_blank'><i class="fa fa-pinterest"></i></a>
<a href='#' target='_blank'><i class="fa fa-instagram"></i></a>
<a href='#' target='_blank'><i class="fa fa-google-plus"></i></a>
<a href='#' target='_blank'><i class="fa fa-linkedin"></i></a>
<a href='#' target='_blank'><i class="fa fa-youtube-play"></i></a>

</div>

---

2.- Este es mi código completo del ABOUT ME. Vamos a desglosarlo para que puedas personalizarlo.

La foto:

ROSA: La fotografía + la frase clave por la que quiero posicionarme. Ten en cuenta el ancho de tu columna para diseñar la fotografía que usarás en tu about me. O, en su defecto, añade una orden de ancho fijo, así:

<img alt='TUS PALABRAS CLAVE' border='0' src='URL DE TU FOTO' width='220px'  />

Cambia el 220px por el ancho de tu sidebar hasta que quede tal y como quieres. Pero recuerda que la imagen puede perder calidad durante este proceso, por eso es aconsejable diseñarla con la medida exacta.


3.- El texto:

AZUL: Mi texto de presentación, con la tipografía que quiero que aparezca y marcando las palabras clave con <strong></strong>.

Si quieres que tu texto aparezca con el tipo de letra que usas habitualmente en tu sidebar, solo tienes que eliminar la orden font del fragmento. Así:

<div align='center'>
¡Hola, soy Celia!<br /> Amante del <strong>diseño gráfico, el marketing, la fotografía y el mundo blogger</strong>.<br /> Desde este blog quiero ayudarte a hacer realidad tu idea y cambiar tu estilo de tu vida.<br /> ¿Te animas a <strong>marcar la diferencia</strong>?

</div>

Cada <br /> es un salto de línea. Y las palabras que van encerradas entre <strong></strong> son mis palabras clave, que aparecerán en negrita e indicarán a Google la temática de mi blog.

4.- Las redes sociales:

MORADO: Como ves, aparece solo el enlace, sin tablas ni celdas ni nada de nada.

<div align='center'>
<a href='#' target='_blank'><i class="fa fa-facebook"></i></a>
<a href='#' target='_blank'><i class="fa fa-twitter"></i></a>
<a href='#' target='_blank'><i class="fa fa-pinterest"></i></a>
<a href='#' target='_blank'><i class="fa fa-instagram"></i></a>
<a href='#' target='_blank'><i class="fa fa-google-plus"></i></a>
<a href='#' target='_blank'><i class="fa fa-linkedin"></i></a>
<a href='#' target='_blank'><i class="fa fa-youtube-play"></i></a>

</div>

Añade tus enlaces dónde aparece el símbolo #, elimina las que no necesites y guarda los cambios.

5.- Pero, si utilizas la plantilla sencilla de blogger y compruebas la vista móvil, no aparecen ¿verdad? Voy a decirte cómo activar el nuevo gadget que hemos añadido con nuestro ABOUT ME + REDES SOCIALES en tu vista móvil.

ACTIVAR UN GADGET EN LA VISTA MÓVIL

1.- Abre tu gadget HTML/Javascript y amplia la pantalla tirando de una de las esquinas, necesitamos ver el código del gadget.

El ID de tu gadget es el código que verás al final de la URL, después del símbolo =.

En mi caso, se llama HTML8.

2.- Apunta o memoriza el nombre de tu gadget, sal de Diseño y entra en tu plantilla HTML.

3.- ¿Ves el desplegable superior? En el que pone IR AL WIDGET.

4.- Busca el ID de tu gadget y haz click encima.

5.- Irás automáticamente a la zona de tu plantilla dónde se encuentra el widget. Pero tendrás que buscarlo porque no se marcará en amarillo como cuándo utilizas el buscador.

Encontrarás un código similar a este:

<b:widget id='HTML8' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

Si no lo encuentras, abre el buscador y busca el ID de tu gadget, así se te marcará en amarillo y puede que te sea más sencillo localizarlo.

6.- Cuándo lo tengas, vamos a activarlo en la vista móvil de una forma sencillísima. Fíjate en la primera línea:

<b:widget id='HTML8' locked='false' title='' type='HTML'>

7.- Añade el siguiente fragmento: mobile='yes'

Así:

  <b:widget id='HTML8' locked='false' mobile='yes' title='' type='HTML'>

8.- ¡Ya está! Guarda los cambios y comprueba si se ve en la vista móvil. Puedes acceder desde tu teléfono o tablet. Aunque también puedes comprobarlo desde tu navegador añadiendo ?m=1 al final de tu URL. Así:

http://www.elperrodepapel.com/?m=1

Solo cambia mi url por la tuya, con cuidado de no comerte el símbolo /.

¡Ahí está! Ahora que conoces este truco para activar gadgets en tu vista móvil, puedes aplicarlo a todos los que tienes instalados en Diseño. Así no pierdes secciones importantes que quieras mostrar a las visitas que te llegan desde dispositivos móviles.

¿PUEDO UTILIZAR ICONOS EN OTRAS ZONAS DEL BLOG?

¡Por supuesto! Puedes utilizar los iconos de fontawesome en:


Tu paginación:

En tu botón Subir como puedes ver en ESTA PLANTILLA PREMIUM.


En tu menú de páginas para darle un toque más original:

Ver plantilla funcionando

En el icono de comentarios:

Ver plantilla funcionando

En tu formulario de suscripción e iconos para compartir en redes sociales:

Ver plantilla funcionando

Como ves ¡las posibilidades son infinitas! Y no solo queda estéticamente mejor, sino que reducirás el tiempo de carga de tu blog y eso gustará más a tus visitas y también a Google. Así que si todavía no has instalado Fontawesome en tu blog de blogger ¿a qué esperas?

QUIERO INSTALARLO AHORA

---

¡HOLA EMPRENDEDORA!

¿Cansada de pasar tantas horas delante del ordenador sin ver resultados?

DESCARGA GRATIS MI GUÍA DE MARKETING EMOCIONAL + PLANTILLA PROFESIONAL PARA BLOGGER

Aprende a conectar con tu público ideal
¡Y DISFRUTA DE TU TIEMPO LIBRE!

DESCARGAR AHORA

RESUMEN SEMANAL

Cada Viernes Novedades en tu Correo: Últimas entradas, novedades y noticias sobre blogging, marketing y emprendimiento.

¡Hecho! Revisa tu correo cada viernes y no te pierdas nada.

There was an error submitting your subscription. Please try again.

Tu Correo

Powered by ConvertKit