Revista Blog

Cómo poner los iconos sociales en tu blog

Publicado el 05 marzo 2014 por Lireth
¡Hola!
Ya estamos a miércoles, pasa el tiempo volando.
Hoy voy a explicaros un tutorial que esta en el Curso blogger 2 que publiqué hace poco. Fue gracioso porque estaba ya editando el curso cuando Cristina de Mujer después de los 40, en un coment no recuerdo bien de que post, me preguntaba justamente como poner los iconos de las redes sociales tal como los tengo yo.
Así que como el curso iba a salir al día siguiente o a los pocos días después de que comentara, pensé pues le pongo el tutorial en el curso y seguro lo lee. Porque conozco a mis lectoras y encima ese Curso fue hecho de la manera que ellas mismas pidieron que fuera.
Así fue como lo incluí en el curso, pero claro, siempre pienso que si publico todos los tutoriales aquí, en el blog, de forma gratuita, ¿por qué voy a cambiar ahora?
Sería raro, así que publico el tutorial aquí también para los despistados, gente con vaguitis que no tenga ganas de bajarse el curso y para que todos los tutoriales estén igual de accesibles.
Cómo poner los iconos sociales en tu blog
Cómo poner los iconos sociales en tu blogComo siempre que queramos agregar un gadget nuevo nos iremos a Diseño y en nuestra sidebar (barra lateral) agregaremos un gadget nuevo elegiremos el de HTML.
Se nos abre una ventanita como siempre y en el título no pondremos nada, lo dejaremos vacío esta vez. Sólo rellenaremos el campo de código con lo siguiente:
<div align="center"><a href="URL DE TU RSS" target="_blank"><img alt="Sígueme vía RSS" src="URL_DE_TU_IMAGEN" /></a><a href="URL DE TU FACEBOOK" target="_blank"><img alt="Sígueme en Facebook" src=" URL_DE_TU_IMAGEN" /></a><a href="URL DE BLOGLOVIN" target="_blank"><img alt="Sígueme en Bloglovin" src=" URL_DE_TU_IMAGEN" /></a><a href="URL DE TU TWITTER" target="_blank"><img alt="Sígueme en Twitter" src=" URL_DE_TU_IMAGEN" /></a><a href="URL DE TU PINTEREST/" target="_blank"><img alt="Sígueme en Pinterest" src=" URL_DE_TU_IMAGEN" /></a></div>
Cambiando lo que veis en AZUL por la dirección de vuestro sitio (ya sea facebook, twitter, etc….) y lo ROJO por la URL de la imagen del botoncito que queráis poner.
Así, todo seguido, os aparecerá en el blog un icono al lado del otro horizontalmente, si lo queréis en vertical tan solo tendréis que poner un enter entre cada </a> y <a>
Os quedaría así:
<div align="center"><a href="URL DE TU RSS" target="_blank"><img alt="Sígueme vía RSS" src="URL_DE_TU_IMAGEN" /></a><a href="URL DE TU FACEBOOK" target="_blank"><img alt="Sígueme en Facebook" src=" URL_DE_TU_IMAGEN" /></a><a href="URL DE BLOGLOVIN" target="_blank"><img alt="Sígueme en Bloglovin" src=" URL_DE_TU_IMAGEN" /></a><a href="URL DE TU TWITTER" target="_blank"><img alt="Sígueme en Twitter" src=" URL_DE_TU_IMAGEN" /></a><a href="URL DE TU PINTEREST/" target="_blank"><img alt="Sígueme en Pinterest" src=" URL_DE_TU_IMAGEN" /></a></div>

¿Quieres que tus iconos sociales aparezcan ENCIMA de la cabecera?Nos iremos esta vez a Plantilla y Editar HTML.Buscaremos en nuestra plantilla (con los artiugios desplegados) Ctrl + f lo siguiente:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
y reemplazamos el 'no' por 'yes' y el '1' por un '2'.

Quedará así:<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>Apunte: en este ejemplo ponemos un 2 pero pueden ser hasta 5 sitios de gadgets los que podemos añadir.
Guardamos. Vamos a Diseño y vemos que encima de la cabecera ahora aparece un hueco donde añadir un gadget
Cómo poner los iconos sociales en tu blog
El 1 --> Es el hueco donde podemos agregar el gadget que queramos que aparezca encima de la cabecera.El 2--> El gadget lateral de los iconos sociales. como veis NO LE PONGÁIS TÍTULO para que así aparezcan solamente los iconos. Si le ponéis título aparecerá el titulo encima y no quedara tan bien como quedan solamente los iconos.
Y ya tenéis los botones de vuestras redes sociales en el blog.Espero que os haya gustadoBesotes!
Lireth's Notebook ¡Gracias por suscribirte! Muchos besos. ❀Lireth❀

Volver a la Portada de Logo Paperblog