A sweet winter: Tutorial como poner Iconos Sociales y botón "subir"

Tutorial como poner Iconos Sociales y botón "subir"

miércoles, 11 de junio de 2014

Bueno, como dije en la entrada anterior, os traigo un tutorial made in Ana de cómo instalar los iconos de redes sociales y los de "subir" en el blog. Primero comenzaré con los de redes sociales que es un poco más largo que el otro.


1. Vamos a subir los iconos que queremos a una página como dropbox.com o si tenéis google drive pues ahí también. 

2. Cuando se hayan cargado las imágenes en el Dropbox o Drive, pulsamos la imagen que queremos añadir, en mi caso el primero es Deviantart.

3. Al darle al icono nos aparecerá una página así, por lo que pulsamos click derecho del ratón y luego a "ver original".  

4. Nos iremos a una página nueva donde aparecerá sólo el icono de la red social. Pulsamos encima de la imagen con el botón derecho del ratón y le damos a "copiar imagen".

5. Ahora vamos a la página general del blog, allí nos dirigimos a la pestaña de la columna de la izquierda que pone "Diseño" y le damos a "añadir un gadget".
6. Se nos abrirá una ventana donde aparecen opciones para añadir diferentes gadget, pero nos interesa uno que se llama HTML/ Javascript.


7. Le damos a esa opción y nos iremos a una ventana así: 

8. Ahora mismo estamos en la edición HTML pero eso no nos interesa, por lo que le damos al texto que pone "Formato RTF" encima del cuadro de texto. Cuando le hayamos dado, en el cuadro de texto le damos a "Ctrl + C" o también con el click derecho del ratón a "pegar". Ahí nos aparecerá el icono que antes hemos copiado.

9. Seleccionamos la imagen como si se tratara de un texto. Y le damos al cuarto botón que parece una especie de infinito encima de un círculo verde y nos aparecerá el cuadro de texto donde poner nuestra página.

10. Introducimos ahí nuestra dirección de la red social. Y así con todos los iconos de la red social que queramos añadir en nuestro blog. Desde el paso 2 hasta el 10. ¡Y listo!



En el caso del botón "subir", los pasos son los mismos hasta el 7 con la excepción que en el cuarto en vez de darle a "copiar imagen" le damos a "copiar URL de imagen". Cuando estemos aquí lo dejamos en HTML en vez de ir al "formato RTF". 

Pegamos el texto este: 

<a href="#" style="bottom: 0px; position: fixed; right: 0px;" title="ARRIBA"><img src=" PEGAR URL DE IMAGEN AQUÍ " /></a>

Pero el texto que he puesto en rojo lo sustituímos por la URL que antes hemos copiado de la imagen, podemos hacerlo con "Ctrl + C" o le damos click derecho del ratón a "pegar". ¡Le damos a "guardar" y listo!

Para alguna duda podéis mandarme un correo a anulowlin@gmail.com o me dejáis un comentario en la entrada. 

4 comentarios:

  1. Es mucho más sencillo que otros tutoriales que he seguido, gracias!!

    ResponderEliminar
    Respuestas
    1. La verdad es que en algunos tutoriales complican más los botones y para mí, esta es la manera más fácil para hacerlo :)

      Eliminar
  2. Muchas gracias por tu ayuda.
    Te he cogido prestado el conejito ;P.
    Estoy empezando mi blog y vuestra ayuda me ha facilitado mucho la configuración.

    ResponderEliminar

Tu comentario me ayuda a mejorar el blog además de que me hace muy muy feliz saber tu opinión así que ¡anímate y comenta!