SLIDER

¡Hola!

Mónica Lemos
¡Hola! Soy Mónicay quiero que empieces a crear tu blog o tu canal de youtube sin complicaciones. Aquí descubrirás cómo.
TODO EL CONTENIDO

ES GRATUITO

Por ello no puedo crear contenido
con regularidad, de hecho tengo que dejarlo por el momento
Si quieres hacerme un regalo para agradecer todo el contenido gratuito de que puedes disfrutar gracias a mi esfuerzo puedes hacerlo aquí , quizás pueda seguir creando nuevo contenido útil. Gracias!

Suscríbete

¿Quieres asegurarte de que tus posts estén perfectos antes de ser publicados?
Te regalo una Check-List que te ayudará en esto.


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

Instala tus iconos de redes sociales diseñados

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.


COMENTA Y COMPARTE

Espero que os haya gustado de verdad y que os haya sido útil, podéis comentarme lo que queráis y si os animáis a hacerlo dejarme los enlaces a vuestro blog y me lo veo , a ver cómo os ha quedado.

SUSCRÍBETE PARA NO PERDERTE NADA

¿Quieres asegurarte de que tus posts estén perfectos antes de ser publicados?
Te regalo una Check-List que te ayudará en esto.


8 comentarios

  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

© Blogger Paso a Paso • Theme by Maira G. Adaptada por Mónica Lemos, autora de este blog.
Todas las imágenes son del banco de imágenes Unsplash.com o bien de mi propia autoría.
Si quieres puedes reclamar tu autoría - Contactar con la autora del blog.