¿Cómo instalar botones de redes sociales en tu blog?

He visto en varias páginas o blogs en la red, que instalan botones con los iconos de redes sociales…

Yo ya antes había instalado unos, pero no me terminaban de agradar porque estaban muy grandes, aparte que a la hora de buscar por internet una manera fácil para instalarlos, varia de página en página.

Algunos blogs interesantes, nos harán el favor de regalarnos los iconos, que se agradece, pero no nos darán una buena explicación de cómo instalarlos.

Y otras nos regalaran el código para instalarlo fácilmente… Es por dicho motivo, que hago esta entrada, tratando de traerles las dos opciones y una extra de mi autoría, para que instalen sus botones fácilmente.

Primero les cuento que busque varias páginas donde encontrar botones que sean discretos en color y tamaño, además de bonitos, solo que no halle variedad solo en este blog, donde cuentan con varios diseños bonitos y gratis…


Ahí te dan un link, para que los descargues, la url del blog es: 
http://www.creativemindly.com/

Ahora para instalarlo, saque el siguiente código de otro blog, que me pareció muy práctico, este es:
 http://www.aprendeycomparte.com/ , el único problema es que queda horizontal y no vertical, como a mí me gusta…. El código es el siguiente:

Pueden pulsar la url del blog, donde saque el código, para tener la explicación de cómo instalarlo y copiar el código facilmente… Si les da flojera, no se preocupen, yo les daré la misma explicación, solo que sintetizándolo en el método que a mí más me agrado y añadiéndolo un plus de mi autoria.


Primero, para insertar el código, tienes que ir al escritorio de blogger, a la pestaña de diseño y ahí agregar un gadget llamado: HTML/Javascript.

Aquí vas a pegar el código que puse arriba, luego sustituirás las palabras en verde por la url de red social que tengas y claro con la url del icono que descargaste.

Como verán ahí dice un nombre de red social especifico, pero no le hagan caso, funciona para cualquier red…

Ahora en la página, donde saque el código, nos dice que la letra en negrita con la que empieza el código, se utiliza para centrar las imágenes, que vendría siendo esta parte:

<center>
<table class='redes_sociales'>
<tr>
<td>



       
Y el código que pondrás para instalar solo un icono para una red o que repetirás en caso de contar con varias redes sociales, donde quieras que te sigan tus suscriptores, será el siguiente:

<a href='URL PERFIL FACEBOOK' style='display:inline-block;' target='_blank'><img border='0' src='URL ICONO FACEBOOK' target='_blank'/></a>
        </td>
        <td>      

       
Bueno hasta aquí, la información de otras fuentes que me ayudaron, ahora les diré que en lo que yo batallaba, era en sacar la url de la imagen, puesto que, al momento de bajarlas, no viene con ella la imagen.
Así que necesitas busca una página especial, donde te den una url pequeña para tus iconos de redes, la página que les recomiendo, es: http://es.tinypic.com/

Una página de edición fotografía, que te ayudara a obtener la url de imágenes fácilmente para estos casos o igual para la elaborar GIFs fotográficos.

Ahí se abrirán una cuenta, y en cargar vídeos o imágenes, subirán la imagen del icono que les agrado en donde dice examinar…

Luego abajo, te da la opción de cambiar tamaño, ahí cambiaran predeterminado por Avatar (100x75), que es la segunda opción, esto con el fin de disminuir un poco el tamaño de los iconos que nos proporciona la página que les recomendé, que, si son muy bonitos, pero están muy grandes.

Pulsaran en cargar imagen y les pedirá un código la página, para saber que no eres un robot, ya que lo teclees, te saldrá tu imagen ya cargada con un desglose de urls, que obviamente te confundirán. Ustedes se irán a la parte que dice: “Utilizar su código”, ahí utilizaran la última url que aparece en esa sección, es decir donde dice: “enlace directo para presentaciones”, este link lo sustituirán como URL de icono en el código que les proporcione.

Finalmente dan guardar cambios a su gadget, y ya les tienen que aparecer sus botones instalados.

Si desean que sus iconos salgan a un más pequeños, dependerá de los iconos que elijan para descargar, o de hacer ustedes sus propios cambios en Photoshop, eso lo veremos en otra entrada, cuídense, ciao:D




Posdata. Si alguien desea copiar el código, puede ir al facebook de mi blog, ya que aquí no se puede copiar texto.

Imágenes tomadas de la red.

Comentarios