Botones de Redes Sociales para Blogger

Buenas tardes, ha sido una semana complicadita...y llevaba tiempo queriendo actualizar esta entrada, que como se nota que es una de las primeras, así que sin mas preámbulos voy a hacer algunas modificaciones y así aprendes varias

formas de colocar los botones sociales en el blog.

Toda una tarde!! si, eso es lo que me ha llevado colocar los botones de las Redes Sociales (Twiter, Google+, Facebook, Pinterest,...)en el blog. Todo para que me puedas seguir en ellas claro!!No es un trabajo difícil, una vez que ya lo he hecho...no, en serio, es fácil solo hay que dar con la explicación correcta y yo voy a intentar dártela.

"no exagero, en realidad eso fue lo que me costo la primera vez"

Lo primero de todo es crear el Blog, una vez elegida la plantilla, el titulo, el diseño y como va a ir distribuido el contenido...vamos a agregar los botones. Como puedes ver yo los he puesto a la derecha en la parte superior, en mi opinión es donde mejor se ven, pero los puedes poner donde quieras. AH...no os olvides de hacer una copia de de seguridad de la plantilla antes de proceder a hacer algo mas.

Y si quieres, te dejo algunas recomendaciones, aquí mismo!! para realizar antes de modificar tu plantilla en blogger.Ahora si vamos a ponernos a ello y vamos a instalar los botones de aquellas redes sociales que tienes y facilitar a tus lectores que puedan seguirte en alguna de ellas.

Elije el diseño de los botones

Lo primero que debes hacer es elegir los botones que desees poner en tu blog, aquí voy a dejarte una serie de enlaces para que veas la cantidad de diseños que puedes encontrar en la red:

Botones de redes sociales para descargar: Blogueras motivadas, post presentado en manos de May de Creative mindly, aquí puedes ver diseños muy bonitos y descargar el que te guste.

25 paquetes de botones sociales, post de Con M de Marketing.

Botones de redes sociales en tonos suaves, de Miss Lavanda, son preciosos...yo estoy planteándome poner uno de estos diseños en el nuevo diseño del blog...próximamente

Como hacer iconos de redes sociales, de Wendy Ryde en su blog Mi Diamante Azul, aquí no solo ofrece una serie de diseños de botones, sino que ademas te explica como crear unos personalizados.

Descarga los botones que te gusten y obtén sus URL, para ello lo que debes hacer es descargarlos en uno de los programas de almacenamiento en nube que existen, en este post te recomiendo tres de ellos, una vez descargados en la nube, haz clic con el botón derecho sobre el icono, obtén su URL y tenla a mano (copiala por ejemplo en un documento de work).

Colocación de los botones en el blog

Hay dos formas de hacerlo, utilizando la URL o otra forma menos convencional pero que a mi me funciona:

Utilizando la URL del icono:

Para hacerlo de esta manera debes crear un widget HTML/javascript en el blog.¿Como?, es fácil, seguro que lo has hecho antes y si no es así, aquí te explico como hacerloDentro de las opciones de configuración de Blogger, vamos a ir a "Diseño", ventana que muestra la disposición que tiene tu blog (donde se sitúa el titulo, datos personales, widgets, el menú principal, la cabecera,etc).

Una vez dentro, debes entrar en "añadir un gadget" (marcado arriba y a la derecha) y ahí Blogger te ofrece una amplia gama de opciones, de entre las que debes elegir HTLM/Javascript.

Elige la opción que te he marcado y eso te llevara a la siguiente ventana, que es donde debes colocar los datos correspondientes para tener tus botones.

Una ves hecho esto, das a guardar ...eso si antes de guardar definitivamente y de hacer clic en "Guardar disposición" (ver en la primera imagen el botón naranja de la derecha) debes realizar una vista previa y así verás si te gusta el lugar que has elegido para poner los botones....si por el contrario el lugar no te gusta, mueve el widget a través del diseño y con ayuda del ratón, pudiéndolo colocar donde desees.No olvides, claro esta rellenar, los apartados de arriba:

Titulo: lo puedes dejar en blanco si deseas o hacer una llamada a la acción y pedir que te sigan.
Contenido: aquí pegas el codigo HTLM que te voy a facilitar a continuación, con las respectivas URL de los iconos y de tus redes sociales.

Como puedes ver el código se repite para cada red social, si quieres añadir alguna mas por ejemplo el icono de Google+, Instagram, Blogovin,etc, solo tienes que copiar ese código (te lo dejo abajo en color rosa) y copiarlo justo después del final de la anterior, aquí abajo te dejo el código para que puedas copiar y pegar, lo saque de El Perro de Papel.

<center><table class='redes_sociales'><tr> <td> <a href='URL PERFIL FACEBOOK' style='display:inline-block;' target='_blank'><img border='0' src='URL ICONO FACEBOOK' target='_blank'/></a> </td> <td> <a href='URL PERFIL PINTEREST' style='display:inline-block;' target='_blank'><img border='0' src='URL ICONO PINTEREST' target='_blank'/></a> </td> <td> <a href='URL PERFIL TWITTER' style='display:inline-block;' target='_blank'><img border='0' src='URL ICONO TWITTER' target='_blank'/></a> </td></tr></table></center>Esta en negrita para destacar del resto, te recomiendo que al ir a utilizarlo lo copies en un documento work (por ejemplo) y le quites los colores y la negrita, ademas así podrás sustituir, con mas facilidad, las zonas azules por la URL de tus perfiles en las redes sociales y las URL de los iconos.Hasta aquí la primera forma de colocar los botones ¿que te ha parecido? fácil no, bueno pues allá va otra de las formas que yo utilizo.

Generar tu misma el código HTML.

No te asustes es súper fácil, incluso igual un poco mas fácil que la anterior.

Para empezar elige los botones y guardalos, seguro el pack se te descarga comprimido, asi que deberas descomprimir los botones que vallas a utilizar y guardarlos en una carpeta.Ahora vas a ir a Blogger y llegar hasta 'Entrada nueva', es decir, como si fueses a crear un post.Aquí vas a adjuntar las imágenes de cada icono que vas a utilizar, en el orden que quieres que aparezca, en mi caso me aparecen uno arriba del otro, debes procurar que estén uno al lado del otro y sin espacio entre ellos (sin mas colócate delante de cada icono y borra hasta que estén uno al lado del otro), como aparecen en la imagen principal de este post (arriba).Ya las tienes dispuestas juntas, ahora debes colocarte encima de cada icono, seleccionarlo y añadirles el enlace(URL) correspondiente al perfil de la red social que representen, tu perfil. Y por ultimo, presionar el botón HTML y obten el código.
A partir de aquí todo es como antes, ve a 'Diseño'>>'Añadir gadget'>>'HTLM/Javascript' y utiliza el código obtenido, a mi me funciona.

¿Que te ha parecido? útil es un rato, por que tod@s debemos tener en nuestro blog los botones de las redes sociales en las que estamos y si ya las tienes, en algún momento querrás cambiarlas, en este caso solo debes cambiar las URL de los iconos si utilizas el primer método.

Yo espero que te haya gustado y te sea de gran ayuda, en algún momento ¿que método te ha parecido mas fácil?¿como lo haces tu? ¿te ha sido fácil de entender el post?...te espero abajo con cualquier comentario.

Gracias por leerme y si te ha gustado, comparte y no dudes en dejarme comentarios!!

Aprende&Comparte!!