HTML básico: añadir iconos e imágenes en el blog

domingo, 14 de julio de 2013

Después de subir tres tipos de iconos de redes sociales faltaba enseñar como ponerlos en el blog. Algunos ya sabéis cómo se hace pero como sé que hay gente que todavía no, os dejo un mini tutorial muy sencillo para personalizar más vuestros blogs.

No he usado nunca Wordpress, así que no sé como funciona allí, pero me imagino que será igual de fácil seguir los pasos. Lo primero es entrar a la plataforma del blog y entrar en diseño. Para poner el código tenemos que añadir un nuevo gadget de HTML/Javascript. En contenido es donde hay que escribir o pegar el código, así que allá vamos a ver paso a paso que es lo que significa cada cosa.

Así es como tengo yo el inicio del código html para los iconos de las redes sociales:
<h2 class="title">Sígueme en</h2><div><a target="_blank" href="https://www.facebook.com/MasAllaDelArcoirisGris"><img alt="Facebook" border="0" src="http://oi43.tinypic.com/10xgj28.jpg" /></a>
En cada widget hay primero una línea para añadir el título. Si lo dejas en blanco no sale nada, pero puedes añadirlo igualmente en el código como es mi caso. Es a lo que se refiere con <h2 class="title">
Sígueme en</h2> . Lo de h2 es el tamaño del título, pero en este caso tampoco sirve de mucho porque coge el diseño del propio CSS (la hoja de estilo del blog para los que no sepan lo que es).

<div> Realmente funcionaría igual si no le añadiéramos el div, pero de esta manera podemos tener controlada la disposición de los elementos que vamos a poner. Vamos, que es mejor incluirlo. Al final del widget debe escribirse </div> para cerrar la etiqueta, ya que sino nos dará un error.

Para añadir una imagen y que cuando pinchemos en ella nos lleve a una dirección web, tenemos que añadir esto:
<a target="_blank" href="https://www.facebook.com/MasAllaDelArcoirisGris"><img alt="Facebook" border="0" src="http://oi43.tinypic.com/10xgj28.jpg" /></a>

Abrimos la etiqueta a (la de los enlaces) y a continuación describimos el target. Esto es para señalar lo que queremos que pase cuando se pinche en la imagen. "_blank" es para que se abra una ventana o pestaña nueva. Así de esta forma no perdemos la propia web que ya tenemos abierta. A mí personalmente me resulta más cómodo así. Si quisiéramos que se abriera en la misma ventana o pestaña tendríamos que escribir "_self".

A continuación añadimos el enlace de esta manera href="DIRECCIÓNWEB">. El > final es importante, que no se nos olvide. Sí sólo escribimos esto, se vería la dirección web únicamente y queremos que salga una imagen. En ese caso abría que cerrar la etiqueta </a>. Para ello escribimos:
 <img alt="PALABRADEREFERENCIA" border="0" src="DIRECCIÓNIMAGEN" />

Img es la etiqueta para las imágenes, alt es para que se vea una palabra cuando el enlace de la imagen está roto, border es para darle un borde a la imagen (en este caso al ponerle 0 no lleva ninguno) y src es para indicar donde está alojada la imagen que queremos mostrar. 

Con todo esto ya tendríamos nuestra primera imagen. Repito el código entero por si queda alguna duda:

(opcional)
<h2 class="title">tituloparamostrar</h2>

<div><a target="_blank" href="direcciónweb"><img alt="palabradereferencia" border="0" src="direcciónimagen" /></a></div>

Para más de una imagen, quedaría así:
<div><a target="_blank" href="direcciónweb"><img alt="palabradereferencia" border="0" src="direcciónimagen" /></a>
<a target="_blank" href="direcciónweb"><img alt="palabradereferencia" border="0" src="direcciónimagen" /></a>
<a target="_blank" href="direcciónweb"><img alt="palabradereferencia" border="0" src="direcciónimagen" /></a></div>

Para añadir imágenes simples, como es el caso de un banner o un gif, el código quedaría así:

<img alt="palabradereferencia" border="0" src="direcciónimagen" />

No sé si está explicado muy técnico o al revés, demasiado explicado. Si tenéis dudas podéis preguntar sin problemas.

6 comentarios :

  1. Tengo puesto un código parecido, aún así hay varias opciones que no sabia para que sirven ahora me ha quedado más claro con tu explicación. A mi esto del html cada dia me gusta más, antes era como leer chino, pero cuando vas pillandole el truquillo tiene su gracia, ya no me suena tan marciano ;)

    ResponderEliminar
    Respuestas
    1. Genial entonces ♥
      Sí, a mí me pasa lo mismo xD Por eso quería hacer una entrada explicando un poco en lugar de que fuera copiar y pegar el código y ya.

      Eliminar
  2. Huys, muchas gracias, me viene bien porque puse unos iconos pero no me termina de gustar cómo quedan.

    ResponderEliminar
  3. Muy buena esta entrada... a ver si me aclaro de una vez por todas y soy capaz de hacerlo :-P

    ResponderEliminar
    Respuestas
    1. Muchas gracias ♥
      Cualquier cosa puedes preguntarme :)

      Eliminar

Muchas gracias por pasarte a leer y comentar ^.^

Related Posts Plugin for WordPress, Blogger...