¡Hola, hola! Ya hace dos semanas que no publico nada sobre
la saga Cómo crear una blog-novela,
mucho menos sobre blogging o diseño; pero en esta tenemos un todo en uno. :D
La última vez hablamos sobre el diseño de la cabecera y les
enseñé cómo hacerlo con Pickmonkey. En esta ocasión, hablaremos un poco sobre losiconos
de las redes socialesy les enseñaré
cómo instalarlos. Además, ¡te regalo un pack con 40 botones descargables! para que escojas el que mejor
combine con tu blog-novela.
Como sabes, las redes sociales juegan un papel fundamental
al momento de promocionarnos. Muchas personas prefieren seguirte por
este medio, además de que es una forma de interactuar mejor con los lectores.
Pero eso lo veremos más adelante cuando hablemos sobre cómo promocionar tu blog-novela.
El punto es que debemos tener en el blog un Gadget con el link a nuestras redes sociales para que los lectores nos sigan en la
que más les convenga, pues sabemos que no todos tienen cuenta en todas las redes sociales. Mientras más opciones para seguirte tengas, mejor. Lo ideal es que tú mismo diseñes los iconos, pues así lo
personificarás según el diseño y la gama de colores que hayas establecido. Pero si no sabes hacerlo no te preocupes, pues más abajo podrás descargar unos cuantos para que los utilices
según prefieras.
¿Cómo instalar los botones de las redes sociales?
- Ve a Diseño en Blogger y en la columna donde vayas a poner los iconos, selecciona Añadir un Gadget. Escoge el que dice HTML / Javascript.
- Te saldrá una pestaña donde harás las configuraciones necesarias. En el Título no pongas nada. Yo prefiero una imagen que diga Contacto o ¡Sígueme en las redes sociales!, pero si no la sabes hacer o te quieres facilitar las cosas, escribe en esta área lo que desees. Recuerda que te saldrá con el formato de tamaño y tipografía que hayas escogido anteriormente.
- En Contenido vamos a añadir los códigos HTML necesarios según las redes sociales que tengas y, obviamente, ya configurados según el diseño de tu blog (más abajo te explico todo).
- Damos Guardar en la pestaña y verificamos que todo haya quedado como queremos. Puedes mover el Gadget por distintas partes de la plantilla hasta que quede donde deseas. Y si no te gusta cómo quedó, empieza desde cero, cambia el tamaño, escoge otro diseño… juega con esto una y otra vez hasta que quedes satisfecho.
Códigos HTML para
Redes Sociales
Lo primero es que debes seguir los pasos tal cual te
indico. Si lo haces así, los botones quedarán posicionados uno al lado del otro (entiéndase, no distorsionados). También es importante que sigas las
instrucciones para que queden centralizados en la columna, si es que lo deseas
así. Sin embargo, si en el transcurso cometes algún error, te recomiendo borrar
y volver a comenzar, sobre todo si eres nuevo en esto.
Eso sí, no le des Guardar hasta que no estés seguro de que
todo quedó correctamente. En el área de Diseño puedes verificarlo en Vista
Previa. Pero si quieres asegurarte de que no dañaras el diseño que ya tiene, lo
mejor es que hagas una copia de seguridad. (Ve a Plantilla y arriba del todo, a la derecha, la encontrarás).
Bien, ahora vamos a escoger los códigos de las redes
sociales que tienes. Ya sé que hay muchas, pero yo me quedé con las más
utilizadas: Google+, Twitter, Facebook, Pinterest y el E-mail (que aunque no es
una red social, siempre nos pueden contactar por ahí). Los códigos:
- Google+: <a href='Aquí tu URL de Google+' target='_blank'><img alt=”google+” src='Aquí tu URL del botón' title='Google+' /></a>
- Twitter: <a href='Aquí tu URL de Twitter' target='_blank'><img alt=”Twitter” src=''Aquí tu URL del botón' title='Twitter' /></a>
- Pinterest: <a href='Aquí tu URL de Pinterest' target='_blank'><img alt=”Pinterest” src='Aquí tu URL del botón' title='Pinterest' /></a>
- Facebook: <a href='Aquí tu URL de Facebook' target='_blank'><img alt=”Facebook” src=''Aquí tu URL del botón' title='Facebook' /></a>
- E-mail: <a href='mailto:Aquí tu Mail' target='_blank'><img alt=”Email” src='Aquí tu URL del botón' title='Mail' /></a>
Como ves, hay dos partes en cada código que están en rojo.
Estas corresponden a las modificaciones que vas a hacer según la red social. En
la primera debes poner la URL donde vas a redirigir a las personas cuando den
clic sobre la imagen. Por ejemplo, en Facebook vas a poner la URL de tu página
o perfil. El de Cafetera de letras es: www.facebook.com/cafeteradeletras.
La segunda URL es la imagen del botón, ya sea alguno de los que te dejo
más abajo o el que hayas diseñado. Recuerda que debes cambiarle el tamaño. Lo
normal es que sea 40x40, aproximadamente. Pero todo dependerá del diseño de tu blog. Eso sí, todos deben tener el mismo
tamaño, que si no te quedarán disparejos. Puedes cambiar esto en Pickmonkey o en cualquier editor de imágenes. Si no sabes cómo hacerlo,¡pregúntame en los comentarios!
Cuando ya tengas el tamaño correcto del botón, iremos a
TinyPic. Yo acostumbro a subir las fotos a este servidor y jamás me ha
dado problemas, pero si ya tienes la imagen en tu Drive, Skydrive, Piccassa,
Pinterest o cualquier otra página en internet que te dé una URL de la imagen,
úsala. En TinyPic, seleccionamos el archivo, lo subimos y, dentro de
las opciones que nos da, escogeremos la última: Direct link for Layouts (la que
termina en .png). Esta será la dirección que pondremos en el código HTML. ¡Y
eso es todo!
Centralizar los
botones
Debes tener todos los códigos agrupados uno tras otro, sin
espacios de por medio, antes de añadirlos a la pestaña de HTML de Blogger. Pero
si quieres que los botones queden centralizados, tenemos que añadir dos códigos
más. Al comienzo del todo iría este: <div style="text-align:
center;"> y al final, este otro: </div>.
Ejemplificado quedaría así:
<div
style="text-align: center;"><a
href='URL de la Red Social' target='_blank'><img
alt=”facebook” src='URL de la Imagen' title='Nombre de la Red Social'
/></a></div>
Botones de Redes
Sociales de Cafetera de Letras
Y ahora terminamos con la descarga de los botones que hice
para ti. En esta imagen solo te doy una muestra, pero en el archivo los
encontrarás todos. También te incluyo los íconos solos en PNG, por si quieres
diseñar tus botones, y tres corazoncitos para que los uses a tu antojo.
¿Los quieres?
Con esto, terminamos por hoy. Espero no haberte confundido
más de la cuenta, pero si tienes dudas, pregúntame sin miedo en los comentarios
y te responderé tan pronto lo lea. ¡Ah! y no olvides compartir la entrada en
tus redes sociales, mientras más descargas vea, más me motivo a seguir
compartiendo este tipo de recursos.
Y recuerda que dentro de los servicios que ofrezco en
Escritos on demand está el diseño y personalización de blogs, láminas,
eBooks o plantillas, así que si necesitas ayuda, no te olvides en contactarme.
:D
