21/4/13

Utilizar blogger como hosting de imágenes para códigos HTML.

Un pequeño truco es utilizar blogger como hosting de imágenes,ya que en cada publicación que hacemos y colocamos imágenes quedan guardadas en Google+ creandose unos álbum de estas, cada blog tiene el suyo ya que podemos crear hasta 100 blogs en una sola cuenta de blogger.
Muy importante si elimináis algún álbum se eliminan las imágenes que contenga, así que también se eliminaran los enlaces de estas, de la misma forma si elimináis esa publicación o imagen única de el álbum donde este ocurrirá lo mismo.Si elimináis el blog pero no el álbum de este las imágenes se guardan y las podéis utilizar para otro blog nuevo copiando la URL de estás. Así que tener cuidado con esto. 



Para encontrar estos álbum tenéis que ir a vuestra cuenta de google+ o hacer clic desde la página de inicio de vuestro navegador si tenéis la cuenta abierta,recordad que tenéis que tener vinculado el blog a la cuenta de google+ para hacerlo igual que en las imágenes y los comentarios que os comparto, otra opción es acceder desde vuestro blog ya sea haciendo clic en diseño o desde una entrada que estemos creando o reeditando.






Voy a crear una publicación que veréis en los próximos días ya que la programare para que se publique automáticamente  si queréis ver como se hace este paso hacer clic Aquí.

El primer paso sera crear una nueva entrada.


Ahora ponéis el titulo de la entrada etc.
El siguiente paso sera subir la imagen que queremos compartir, haremos clic en la barra de herramientas en el icono de fotos(insertar imagen).


En la ventana que aparece haremos clic en Elegir archivos, buscaremos la carpeta donde tengamos la imagen y haremos clic en en ella para seleccionarla y clic en Abrir.



Elegiremos la imagen(la que utilizare sera una imagen gif)y haremos clic en añadir las imágenes seleccionadas.




El siguiente paso sera copiar la URL de la imagen(esto seria el enlace directo que nos ofrecen los hosting de imágenes)así que no cerraremos esta ventana. Para realizar este paso haremos clic sobre la imagen con el botón derecho del ratón y elegiremos copiar URL de imagen


Abriremos una nueva pestaña en el navegador y pegaremos la URL de la imagen que hemos copiado para verificar que esta bien. La URL la copiáis en la barra de búsqueda de arriba ya que si no puede dar error.



Podéis utilizar la URL que copiasteis desde la imagen para el siguiente paso aunque yo suelo volverla a copiar desde la barra del navegador.
Ya podemos hacer clic en Añadir las imágenes seleccionadas ya que nuestra imagen ya está en el álbum de nuestro blog(Picasa Web Albums).


En la publicación de cada un@ podéis alinear la imagen donde más os guste, yo la alineare a la izquierda para ponerle el código HTML dentro de una caja de texto.


Ahora haremos clic en la barra de herramientas donde pone HTML para insertar el código que voy a utilizar ,si queréis este código(botón subir arriba) para crear el vuestro personalizado hacer clic Aquí.



Veréis algo parecido a esto.


Para que la caja de texto con el código HTML a copiar quede justo debajo de la imagen recordar bajar justo debajo de esta presionando la tecla del pc Enter.

Ahora copiaremos el código HTML y lo pondremos después del texto que encontramos en HTML.


He dejado en amarillo el texto modificado y en rojo el enlace directo de la imagen.
Si os fijáis la caja de texto ya tiene unas dimensiones eso es porque yo la he modificado ya, si utilizáis el código de la caja de texto lo podéis modificar vosotr@s también solo tenéis que ir  a Redactar y con el puntero del ratón arrastrar la caja de texto desde una de las equinas, también podéis cambiar  height( alto) y width(ancho) cambiando la numeración que tiene cada una de estas opciones.




Os dejo el código por si lo queréis con las referencias que he utilizado en las imágenes de abajo.


Código HTML:
<textarea style="height: 40px; margin: 2px; width: 95px;"><a href='#' style='display croll;position:fixed;bottom:0px;right:0px;' title='texto a ver cuando se pasa el puntero por encima'><img src="Tu URL de la imagen" /></a></textarea>


Recuerda cambiar los textos en color respetando las comillas por el texto que quieres que se vea cuando se pasa el cursor por encima de la imagen( arriba , subir) y la Url de la imagen que has subido a Picasa web.

El código de la caja de texto esta incluido por separado seria así:
<textarea></textarea>

Si os aparece la caja de texto descentrada solo la tenéis que seleccionar con el puntero del ratón y desde la opción Alineación elegís donde ponerla(centrado,derecha,izquierda).

Para ajustar lo máximo posible la caja de texto con la imagen podemos subir  esta teniendo seleccionada la caja de texto y presionando la tecla del pc retroceso( es la tecla con una fecha justo encima de enter). Hacer una vista previa de la entrada para ver si queda ajustada.



Por último solo tenéis que publicar vuestra entrada y ya podréis compartir la imagen que habéis utilizado en este caso con el código HTML de botón subir arriba.
De la misma forma podréis compartir otras imágenes con otros códigos HTML.



Si os gustan los botones subir arriba aquí tenéis más:

Si queréis saber como ponerlos en vuestro blog aquí el tutorial:


No hay comentarios:

Publicar un comentario