¡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 los iconos de las redes sociales y 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.

NOTA:
¡Llénate de paciencia! la necesitarás... 


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 páginas de autor, láminas, eBooks o plantillas, así que si necesitas ayuda, no te olvides en contactarme. :D
Image and video hosting by TinyPic