3 mar. 2016

Tutorial Blogger: Instala tus iconos/botones diseñados de rrss

  • 21:50
  • por
Instala tus iconos de redes sociales de diseño propio en Blogger Tutorial paso a paso

Buenos días , ya es lunes de nuevo¡ Muchas pensaréis que los lunes son horribles, que “vuelta a empezar la semana de trabajo”, que esto y lo otro.. ¿Dónde quedó el fin de semana? Se nos hace corto pero el lunes como cualquier día es un día lleno de oportunidades, no lo olvides :)

Tal como os había dicho, hoy os traigo un pequeño tutorial para insertar los iconos que tenéis personalizados en vuestro blog y justamente al final de cada entrada.

Es algo que me ha costado mucho encontrar, la verdad, y realmente no encontré un tutorial concreto que me ayudara si no que con varias cosillas descubrí la siguiente manera.


Lo primero es entrar en Add to any justamente en ese enlace que os facilito. Encontraremos todito en inglés pero no pasa nada, yo os guio para saber lo que tenéis que hacer.

Podemos ver que nos aportan una serie de códigos que “crean” los iconos que nos enseñan debajo de cada código. Si nos gusta alguno, perfecto, nos quedaríamos con el que elijamos, y lo copiamos entero (fijaros bien de copiarlo entero, es importante)

Sin embargo si lo que queremos es usar nuestra propia imagen de cada icono entonces tendremos que copiar solamente este



Si entendemos tan solo un poquito de HTML en esto de Blogger por lo menos, sabremos identificar el famoso código que nos ofrece la posibilidad de insertar una imagen en ese gadget (explicado un poco de andar por casa :) y el código en cuestión es, para quien no lo sepa, este:

<img src=

Una vez tenemos esto claro y el código en cuestión copiado vamos a pegarlo en word, openoffice, o aquello que utilicéis para hacer vuestras anotaciones.

Ahora, guardado ya el código en nuestra nota, necesitamos subir nuestras imagenes a un servidor de internet. Dropbox, es un buen ejemplo, pero personalmente yo suelo subirlas también a una entrada del blog que no se publicará nunca, porque me resulta más cómodo para hacerme con la URL de la imagen. Vosotras/os hacer como veáis.

Abrimos la nota donde pegamos el código y cambiamos lo que hay entre las comillas , justo después del código que os comenté antes, por la URL de la imagen que coincida con la red social a la que pertenezca ese código. Os hago un croquis :)

  *  Si no sabes cómo copiar la URL de imagen mira este vídeo



Debemos sustituir la url que os subrayo en amarillo por la dirección de enlace que tiene vuestra imagen personalizada de facebook, en este caso. Atención porque tenemos que darle al botón derecho del ratón sobre la imagen (si la tenemos en una entrada de nuestro blog que no se publicará) y darle a Copiar dirección de enlace.

Repetimos con cada red social y tendremos nuestro código listo.

Ahora tenemos que pegarlo en nuestra plantilla HTML. Antes de toquetear nada nos aseguraremos de guardar todo bien, haciendo una copia de seguridad de nuestra plantilla.

Una vez que estamos en nuestra plantilla HTML vamos a pulsar sobre la ventana de código CTRL+F para que nos aparezca un buscador interno arriba a la derrecha. Ahí vamos a copiar el siguiente código:


<div class='post-footer'>


y le damos a enter, dos veces, porque nos interesa el segundo. Y justo debajo del código pegamos el que tenemos preparado en nuestra nota. (Para ponernos debajo solo tenemos que dar un par de enter al final del codigo anterior)

Hacemos una vista previa para ver cómo ha quedado y listo¡

Si queremos que quede centradito, solo tenemos que añadir <center> al principio del código y </center> al final del código de las redes sociales , antes de este otro;


<script src='//static.addtoany.com/menu/page.js' type='text/javascript'/>


HECHO¡

Solo hay un problema y es que cuando se le da a compartir sobre esos iconos, solo comparte la página en la que está, con lo cual para que se comparta concretamente esa entrada vuestro lector tendría que estar en la página de la entrada, solamente.
Bueno, con esto se ha terminado por hoy.

Te dejo como ayuda extra el vídeo del tutorial Personaliza pie de entradas, porque ahí comento cómo modificar el código añadiendo el código URL de tus imágenes.



Blogger paso a paso Mónica Lemos

Me apasiona la educación, en su sentido más amplio. Son muchos mis centros de interés, por ello creo que ser Blogger o Youtuber es una oportunidad de compartir lo mejor de cada persona al mundo. Mientras estoy intentando evolucionar 'educadamente' en esta 'loca' sociedad. Desde este rincón puedo ayudarte con asesorías y servicios ¿Te animas?

Comenta dudas, opiniones...



Ya han comentado 10 veces:

  1. He trasteado por esto como no tienes una idea, gracias de verdad muy buen post.

    ResponderEliminar
    Respuestas
    1. Ey¡¡ genial María José , me alegra muchísimo que te sirviera de ayuda mi post¡¡ Sé por propia experiencia que este mundo es inmenso y complejo¡¡ Ánimo que tu blog está muy chulo¡¡ ;)

      Eliminar
  2. ¡Qué interesante! Lo he puesto en práctica, pero me gustaria saber cómo se puede hacer para que al pasar por encima el ratón canvie de color, tal y como lo tienes con tus botones. Gracias!

    ResponderEliminar
    Respuestas
    1. Hola! Gracias por comentar. Me alegro de que te hay resultado útil :)
      Pues sí, es un post pendiente! Jaja, te mando un email y te intento echar un cable ;)

      Eliminar
  3. ¡Hola Mónica!

    Tengo problemas con este tutorial, resulta que el ultimo que hay que poner bien lo de javascrip, me da error en la plantilla, y no me deja hacer nada más :S

    ResponderEliminar
    Respuestas
    1. Hola Marina!!

      revisa el código, elimina lo hecho y vuelve a empezar!! alguna coma o algo habrá quedado atrás! Estoy segura, porque funciona todo a la perfección!

      Dime lo que sea! :)

      Muaaack!!

      Eliminar
  4. Hola Mónica, soy Chelo, para añadir pinterest, ¿qué código debo usar?
    Un beso y gracias !! increibles tus tutoriales

    ResponderEliminar
    Respuestas
    1. Hola Chelo, es este código
      a2a_button_pinterest

      lo siento por no contestar antes!!!
      Muack!

      Eliminar
  5. Hola Maria José!!
    Muchas gracias por la explicación. Ya lo he hecho en mi blog. ¿Sabrías qué hay que hacer para que aparezca en la versión móvil del blog?
    Un saludo.

    ResponderEliminar
    Respuestas
    1. Hola, no me llamo María José, me llamo Mónica, jeje
      Debes tener una plantilla adaptada para móviles... Adaptar la plantilla de Blogger es realmente complejo.

      Un saludo

      Eliminar