Insertar enlaces, imágenes y vídeos | Curso Blogger #3.2

Aprende a insertar enlaces internos y externos, imágenes desde tu ordenador o de cualquier sitio, también te explico cómo añadir vídeos y caracteres especiales en el contenido de tus artículos con la nueva interfaz de Blogger.

¡Hola! Bienvenido a Peengler. A continuación, te enseño a insertar link o enlace, imagen y vídeo. Y además te explico sobre el código de cada elemento.

NOTA: Puedes ver todo el contenido del Curso Crea tu Blog en BloggerCLIC AQUÍ.

Sin más que decir ¡empecemos!

Agregar enlaces imágenes vídeos en Blogger

Clic en la imagen para ver el vídeo ↑ en YouTube

Insertar enlaces, imágenes, vídeos y caracteres especiales

A continuación, estas son las herramientas que explique en el vídeo: ↑

Insertar o editar enlace: Con esta función puedes añadir y editar tus enlaces ya sea a un sitio web, de una entrada o página de tu propio blog. Ten en cuenta que puedes abrir tus enlaces en una nueva pestaña o no. También puedes elegir si será follow o no-follow. En el vídeo te lo explico. ↑

Insertar imagen: Puedes incluir imágenes a tus entradas. Blogger te ofrece distintas opciones para añadir imágenes y los formatos que acepta son: JPG, GIF y PNG.

Insertar vídeo: Blogger permite añadir vídeo en tu contenido de 2 maneras: Puedes subirlo a tu blog desde tu ordenador o añadir un vídeo desde Youtube. Personalmente recomiendo la 2da opción porque no solo se podrá ver el vídeo desde tu artículo sino también desde Youtube.

Insertar caracteres especiales: Aquí puedes incluir los caracteres que desees, ejemplo: Símbolo, emoji, puntuación, número y muchos más.

¿Dónde se guardan los vídeos e imágenes de mi blog en Blogger?

Quizás tengas curiosidad sobre donde Blogger guarda tus archivos, aquí te dejo los enlaces que te llevaran directamente a esos lugares.

  • Ver el almacenamiento de tus imágenes en Blogger: CLIC AQUI
  • Ver el almacenamiento de tus vídeos en Blogger, te diriges a: configuración → administrar el blog → vídeos de tu blog

¿Cuánto espacio tengo disponible en mi blog en Blogger?

Una cuenta Google dispone de 15 Gigas de almacenamiento Gratis y se distribuye en todos sus productos incluyendo a Blogger.  Ahora ¿cómo saber cuánto espacio tienes disponible? Muy sencillo, en el siguiente enlace puedes ver cómo está tu almacenamiento, cómo esta distribuido y cuánto tienes disponible de los 15 GB -> CLIC AQUÍ

Etiquetas HTML del enlace

Para colocar un enlace, se usa de la etiqueta <a> y dentro de la etiqueta debes especificar el destino del enlace.

Ejemplo:

<a href="peengler.com">el texto de mi enlace</a>

¿Cómo puedo crear un enlace que abra una página en una nueva ventana?

Para esto necesitaras el atributo target junto con el valor de _blank. el cual indica que el enlace debe abrirse en una ventana nueva del navegador.

Ejemplo:

<a href=”peengler.com” target="_blank">Clic aquí</a>

Etiquetas HTML de la imagen

Ejemplo: <img src="mi-imagen.png"/>

URL de una imagen real, quedaría así:

<img src="https://1.bp.blogspot.com/-lybG6QJ47LA/X1eidNGJG5I/AAAAAAAAIZQ/Njawz5Ns-wwLcr9I6Toq9ANa8-GGLDS-ACPcBGAsYHg/s320/acelerar%2Bla%2Bcarga%2Bde%2Blas%2Bimagenes.JPG"/>

¿Cómo hacer un link con una imagen? en HTML

Para aplicar una imagen con enlace necesitas la etiqueta <a>

Ejemplo:

<a href="enlace-de-la-imagen">

<img src="url-de-la-imagen.png"/>

</a>

Texto alternativo en la imagen

Es la descripción de la imagen textual, ayuda con el posicionamiento de tus imágenes y también se suele aplicar cuando la imagen no puede ser vista o tarde demasiado en cargar.

Ejemplo:

<img src=”comidas-tipicas.png” alt=”Deliciosas recetas para buen paladar />

Título en las imágenes

Al igual que con los enlaces, también puedes añadir title/título a las imágenes para proporcionar más información.

Ejemplo:

<img src=”comida-tipica.png”  alt=”Deliciosas recetas para buen paladar”  title=”recetas de al horno, cocidas, en sopas y cremas />

Anchura y altura en la imagen

Puedes usar el ancho (width) y alto (height) para especificar la anchura y altura de tu imagen.

Ejemplo:

<img src=”mi-imagen.png” width=”350px” height=”500px/>

También puedes aplicar en el ancho por porcentaje: width=”90%” y en el alto que se ajuste dependiendo del ancho: height=”auto” o  height=”100%”.

Etiquetas HTML de vídeo

Para poder insertar vídeos en tus páginas con HTML tienes que utilizar la etiqueta <video>

Ejemplo: <video src="video.mp4"></video>

Si lo que quieres es insertar vídeos desde YouTube, Vimeo u otra plataforma, debes utilizar la etiqueta iframe en lugar de <video>

Anchura y altura en el vídeo

Al igual que en las imágenes, puedes usar el ancho (width) y alto (height) para especificar la anchura y altura de tu video.

<video src=”video.mp4″ width="640" height="480"></video>

Formato del vídeo

Los vídeos que se suben directamente a través de la interfaz de Blogger se guardan en formato .flv

Por ahora no se puede cambiar el formato. Pero si ingresas un vídeo de YouTube sin importar en que formato este, se va a ver sin ningún problema.

En conclusión

Al Insertar enlaces, imágenes y  vídeos en tus entradas, no es conveniente añadir muchos archivos o de gran tamaño, ya que esto podría ralentizar demasiado la carga de tu blog. Y que desde la perspectiva del usuario/lector podría ser negativa.

¿Tienes alguna duda? Déjamelo en los comentarios.

¿Te gusto el post?
¡Compártelo!

Gabriela Laya

Me gusta el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

JLO:

Que bueno eso de saber cuanto ocupa tu blog y las fotos de google! Me voy a guardar la entrada por la información, es interesante y se puede usar. Saludos Gabriela!

Responder
Citu:

Buena explicación te mando un beso y te me cuidas

Responder
Maria Eugenia ARIAS LOZANO:

Super super util. Buen día

Responder
Rocío:

Siempre aprendemos un montón contigo.
Un abrazo.

Responder
yo leo Novela:

Hoolaaa!
Me encanta pasarme por aquí y leer tus consejos. Me vienen genial. 😉

Responder
Asunción Artal:

Muchas gracias, no sabía como mirar el espacio que llevaba ocupado por mis imágenes y gracias a tu entrada ya se como consultarlo. Un abrazo

Responder
El desvan de vicensi:

Muy buenas tus lecciones Gabriela. Un beso y feliz tarde ❤️❤️❤

Responder
yennifer rodriguez:

¡Hola!
Gracias por toda esta info. Poco a poco he ido modificando la apariencia de mi blog y estos tips me vienen de maravilla :D♥

Responder
Espe:

Me viene bien esta entrada porque el nuevo blogger es una mierda.
Besos

Responder
Miguel Pina:

Está muy bien explicado Gabriela. Estas cosas en lo personal las sé manejar relativamente bien pero que bien le pueden venir a quien esté comenzando en el mundo de los Blogs.
Saludos y gracias por tu trabajo.

Responder
Sakuya Aikawa:

Hola Gabi!
Pues siempre de algo que ya sé me sigues enseñando, no tenía idea eso de los Gigas y claro que me lo he preguntado muchas veces, pero gracias a ti ya sé cuantos Gigas he ocupado y la verdad pensé que eran muchos ya por la cantidad de imágenes que subo jajaja pero me di cuenta que me queda mucho espacio aún, muchas gracias por compartir esta entrada 😀

Responder
    Gabriela Laya:

    Hola querida, Me alegro entonces de haber añadido información extra XD

    Responder
Cecy:

Hola gracias por la información sin duda siempre me hago un lío con las imágenes en las entradas tendré en cuenta lo que comentas. Saludos

Responder