Tips y Tutoriales para los Bloggeros Nuevos (y no tan Nuevos) #1

¿Qué tal todo el mundo? ¿Cómo les va con esa lectura? A mi, bárbaro, pero de eso les cuento después.

Ahora les traigo la primera parte de una nueva sección del blog: Tips y Tutoriales para los Bloggeros Nuevos (y no tan Nuevos)

A mi se me podría clasificar como una bloggera vieja, ya que hace dos años estoy en esto (pero con mi blog en inglés; éste tiene casi un año!). A lo largo -corto? jaja- de esta pequeña carrera he aprendido unos cuantos trucos para hacer que nuestros blogs se vean lindos y funcionales.

Algunos de éstos trucos son míos, y otros los tomé prestados y sólo los comparto con uds. El link al post original, si ese es el caso, estará al final del post.

Hoy vamos a hablar de las Imagenes en los Blogs

Muchos de sus blogs suelen tener banners o botones, ya sean de otros blogs, concursos, editoriales afiliadas, etc.

Y a veces sus sidebars se pueden convertir en una pesadilla de imagenes.

Por ejemplo, este sidebar de la izquierda: un botón a la izq., uno a la derecha, uno en el medio, etc. Les voy a enseñar cómo tienen que hacer para que queden centrados y del mismo tamaño, para que todo sea parejito.

Cada botón/banner tiene un código HTML para que vos lo copies y pegues en tu blog, un código como éste de acá:

<a href="http://www.blogcatalog.com/directory/lifestyle/fashion/"><img src="http://www.blogcatalog.com/images/buttons/blogcatalog7.png" alt="All Award Winning Fashionista & Fashion Blogs - BlogCatalog Blog Directory"/></a>

<a href="TuURL"> es el link a la página al que querés que la imagen esté ligada, o sea, al apretar la imágen, vamos a esa página.

<img src="LaURLdelaImagen"> es el link de la imagen que se va a mostrar. La palabrita alt dentro de la etiqueta img (la que te estoy explicando) es esa cajita amarilla que aparece con una palabra o frase cuando ponés tu mouse sobre el botón.Eso sirve para cuando un navegador no reconoce la imágen o el HTML. En vez de ver la imágen, aparece el título con un link.

Las etiquetas para cerrar (colocadas al final de los códigos) siempre tienen unas barras (/), por ejemplo: <center> al principio del código, y </center> al final. ¡Siempre acordate de cerrar tus etiquetas!

Si copiás y pegás el código de ahí arriba en tu blog, el botón aparecerá a la izquierda, como en la foto del sidebar de arriba. Para centrar un botón tenés que añadir las etiquetas <center>, </center> al principio y final del código, así:

<center><a href="http://www.blogcatalog.com/directory/lifestyle/fashion/"><img src="http://www.blogcatalog.com/images/buttons/blogcatalog7.png" alt="All Award Winning Fashionista & Fashion Blogs - BlogCatalog Blog Directory"/></a></center>

Y para cambiar el tamaño, y que quede igual que los otros botones, añadí width="80%" después del link de la foto. Así:

<center><a href="http://www.blogcatalog.com/directory/lifestyle/fashion/" title="All Award Winning Fashionista & Fashion Blogs - BlogCatalog Blog Directory"><img src="http://www.blogcatalog.com/images/buttons/blogcatalog7.png" width="80%" alt="All Award Winning Fashionista & Fashion Blogs - BlogCatalog Blog Directory" style="border: 0;" /></a></center>

Si el código que estás copiando ya tiene un ancho y alto (width y height) determinado, borrá eso y poné  solamente width="el porcentaje que quieras%".Olvidate del alto, eso se arregla solo.

Si no tenés un código HTML, y en lugar de eso estás copiando el link URL de la imágen para pegar en el Widget de Imágen de Blogger, podés hacer esto:

Empezá tu código con: <center> si querés que la imágen esté centrada; seguido de la etiqueta <a href="">, donde tenés que poner el link a la página entre las comillas. Después va la etiqueta <img src="">, y una etiqueta alt si querés. La URL de la imagen también va entre las comillas. Antes de cerrar la etiqueta de la imágen, poné width="CualquierNúmero%". Cerrá las etiquetas <a href> y <center>.

El código quedaría así:

<center><a href="la URL de la página a donde querés vincular la imágen"><img src="la URL de la imágen que vas a usar" width="80%" alt="el título que querés que aparezca cuando colocás el mouse sobre la imagen" (Hasta acá todas las etiquetas están abiertas.) /> (<= Ésa cierra la de la imágen.) </a> </center> (Ésas dos, cierran las primeras)

Podés copiar y pegar ese código en un Widget HTML/Javascript, y reemplazar el texto con links. Yo hago esto siempre, me da más control sobre como se va a ver mi widget. Como el de "Estoy leyendo". Hice exactamente esto que les acabo de explicar, y se ve bien, ¿no?

Otra cosa acerca de las imagenes en los blogs es la cantidad. Yo entiendo que quieran que todo el mundo vea qué desafíos están haciendo este año, qué blogs son sus favoritos/afiliados, cuáles libros están leyendo y las novedades que se vienen, pero al llenar sus blogs con imagenes están haciendo que carguen el triple de despacio, y un lector con un ancho de banda bajo puede aburrirse mientras espera cinco minutos a que cargue tu blog, y aparte, eso le enlentece la máquina. No se olviden de que aparte de las imagenes en el sidebar, el navegador también tiene que cargar la imágen de fondo, el banner, y cualquier otra cosa en el blog! Es mucho!

ENTONCES: 

1. Deberías convertir tus imagenes JPEG a PNG. Los archivos PNG no son tan pesados como los JPEG, lo que hace que tu blog cargue más rápido. Cualquier editor de fotos convierte tu imagenes, no necesitás tener Photoshop CS5. Podés hacerlo hasta con el Paint de Windows.
2. Trata de trabajar con un slideshow o un widget como el que tengo yo para mis Afiliados; ahorrás mucho espacio y se ve más profesional, ¿no te parece?
3. Creá diferentes páginas en tu blog para tus secciones y demás. Como mi página para  los Bloggeros Argentinos, donde pongo todos esos botones en una sola página, en vez de sobrecargar mi sidebar de botones. 

La clave es no sobrecargar tu blog con imagenes, que la verdad, no necesitás. ¡Menos es más!

¡Espero que esto les haya servido y que tengan sidebars lindos y simétricos!

Besos,

Ella

(Parte de este post fue idea de Parajunkee Design)