Tecnología

El Perro de Papel Idea guardada 7 veces
Sé la primera persona en valorar esta idea Valorar

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

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 its 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





Fuente: este post proviene de El Perro de Papel, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Envía una notificación de una presunta infracción de derechos. También puedes hacerlo a través de nuestro formulario de contacto.
¿Qué te ha parecido esta idea?

Recomendamos

¡No te pierdas nuestra selección diaria!

Suscríbete y recibirás en tu correo nuestras mejores ideas

Suscríbete ahora

Relacionado

acuarelas diseño watercolour ...

Iconos de Redes Sociales

Hola!!! Hace unas semanas estuve ocupada haciendo estos pequeños iconos de varias redes sociales para colocar el gadget de sígueme en el blog, que ya hacía tiempo que lo tenía en mente, pero un día por otro lo había dejado pasar. Os los podéis descargar desde este enlace. Están preparados en dos tamaños, 48x48 y 32x32, para que uséis el que os vaya mejor.Os voy a explicar también como los he puest ...

BLOG intermedio tblog ...

Cómo hacer listas con iconos de colores en Blogger

Esta entrada surgió también en la fanpage, tuvo buena respuesta y me decidí a cambiarla por otra sobre marketing que tenía preparada. Llevamos ya un tiempo sin publicar tutoriales sobre blogger y este detalle que voy a compartir contigo hoy es muy original, además de sencillo, verás que si ya has tocado la plantilla HTML y tienes nociones básicas de programación, no te cuesta nada diseñar tu prime ...

icono botón redes sociales ...

Cómo insertar botones de Redes Sociales en Blogger

Hoy les traigo el Tutorial de cómo insertar los botones de las Redes Sociales en Blogger. Lo primero que vamos a hacer es Descargarnos los Botones que más nos gusten y alojarlos en hosting (hay muchos gratuitos), pero yo uso el Google Drive, que me parece más sencillo y más completo. Una vez tengamos las imágenes subidas a Google Drive, tenemos que averiguar su URL, (si no sabes cómo hacerlo, te l ...

watercolour acuarelas free printable ...

Iconos de Redes Sociales

Hola!!! Hace unas semanas estuve ocupada haciendo estos pequeños iconos de varias redes sociales para colocar el gadget de sígueme en el blog, que ya hacía tiempo que lo tenía en mente, pero un día por otro lo había dejado pasar. Os los podéis descargar desde este enlace. Están preparados en dos tamaños, 48x48 y 32x32, para que uséis el que os vaya mejor.Os voy a explicar también como los he puest ...

internet blog tblog ...

Consultoría Blogger - Resolviendo dudas de tutoriales 3

Hola a todos!!! Ya estamos de nuevo a final de mes y vengo a resolver las dudas de tutoriales antiguos que os han surgido y que se habían quedado pendientes de resolver. Cómo añadir un menú con imágenes en Blogger Este es el código que Celia proporcionaba para poner el menú con imágenes: <div > <table> <tbody> <tr> <td> <a href="URL DE TU PÁGINA/ETIQUETA" ...

avanzado BLOG blogging ...

Cómo instalar un slider de imágenes en blogger

Esta semana he recibido un correo con esta duda: ¿Cómo instalar un slider de imágenes debajo del cabecero en blogger? Y no es la primera vez que me preguntan por el mismo tema. Este tipo de correos no puedo contestarlos uno a uno, prefiero anotar las dudas y cuándo se repiten mucho, desarrollar un tutorial en el blog, para que pueda verlo todo el mundo. Si me conoces un poco, ya sabes que no soy m ...

general social

Cómo poner botones para que te sigan en las redes sociales en Blogger

Poner botones para redes sociales con los que tus usuarios puedan seguirte te ayudará a incrementar la presencia de tus contenidos en Internet. Si bien muchas veces preferimos utilizar botones al final de nuestra entradas para que nuestros usuarios compartan si lo desean nuestras entradas, es importante también que puedan seguirnos por las redes sociales si así lo desean. Qué mejor sitio para que ...

general seo

Los datos estructurados en Blogger: solución de problemas.

Los datos estructurados son una herramienta fundamental en la presentación de los resultados de búsqueda en Google. Gracias a ellos, Google puede presentar información de eventos, rangos de precios, evaluación media del sitio (con estrellas) y gran cantidad de datos en el resumen de la búsqueda que pueden hacer que un usuario se interese más por ese resultado que por otros que no se aprovechan de ...

blogger tutorial blogger

Tutorial Blogger, poner firma en los comentarios.

¡Buenos días! hoy comienza la serie de tutoriales blogger sencillos. Como poner el enlace a tu blog como firma cuando haces un comentario. Si estas empezando en este mundo 2.0, ya sabes lo bueno que es pasar por otros blogs, conocer a gente que hace tu mismo trabajo, leer los comentarios que le escriben y comentar tu también. Cuando comentas en un post muestras tu interés, que te ha gustado y es ...

general

Creación y personalización de menús en Blogger paso a paso.

La creación de menús en páginas web es fundamental para la estructuración de la información a la que los usuarios pueden acceder. En los Blogs, al igual que en cualquier publicación web, el orden y la presentación de las categorías de la información que manejamos puede ordenarse mediante un menú. La exposición de contenidos mediante un menú facilita a los usuarios el acceso a la información, consi ...