miércoles, 22 de abril de 2009

Cómo cambiar el aspecto de vuestro blog

Este mensaje está dirigido a gente que, sin tener nociones de HTML (lenguaje de páginas web), desea cambiar el aspecto de su blog. Seguramente haya formas más profesionales de hacerlo, pero como todo lo que sé de la web lo aprendí por mi misma a base de ensayo y error, lo planteo de la manera más sencilla posible para que sea apto para todos los públicos.

Existen dos maneras de cambiar el aspecto del blog. Una es sencilla, rápida e intuitiva, y se realiza desde la pestaña DISEÑO del propio blog. Allí se pueden cambiar parámetros básicos como el color y tamaño de las letras o el color de fondo, a la vez que se van viendo los cambios realizados. Otra es más compleja, y hace necesario conocer un poquito de ese lenguaje raro que se utiliza en las páginas web, el HTML, y su variante llamada CSS. No voy a entrar en aspectos técnicos. Me voy a limitar a explicar cómo he cambiado yo mi blog, por si alguien desea hacer un cambio parecido.

En realidad, si os fijáis, lo único que he hecho ha sido cambiar los colores de fondo por imágenes. Así que eso es lo que os voy a enseñar, a poner una imagen cualquiera como fondo del blog, o del cuadro de mensajes, o de la columna lateral.

El único inconveniente para poder hacer esto es que hace falta tener una cuenta en Flickr, Photobucket, o sitios similares. Más información sobre la utilización de imágenes en blogger. Esto se debe a que no se puede utilizar directamente la URL de las imágenes de una página web, por un problema de consumo de ancho de banda. En cambio sí se puede utilizar la URL desde estos lugares, porque hemos subido nosotros mismos la imagen previamente.

Primer paso. Cómo obtener la URL de una imagen.

Hay que hacer clic con el botón derecho del ratón sobre la imagen en cuestión (previamente subida a Flickr, Photobucket, etc) y seleccionar la opción PROPIEDADES en el menú emergente. Se nos abrirá una ventana de la cual podremos copiar la dirección URL, como véis en las imágenes.

Segundo paso. Acceder al código HTML del blog.

Podéis obtener el código fuente de vuestro blog en bloc de notas pinchando en vuestro navegador la opción VER / CÓDIGO FUENTE. Esa misma visión la tendréis si vais al panel de control de vuestro blog, y allí seleccionáis DISEÑO / EDICIÓN DE HTML. Los cambios que vamos a hacer serán todos sobre esa plantilla.

Tercer paso. Hacer los cambios en el código.

En código CSS, podemos cambiar el aspecto del fondo con la etiqueta BACKGROUND. Así pues, lo que tenéis que hacer es buscar todos aquellos puntos de la plantilla en la que aparezca esa palabra. Veréis que background puede adoptar dos formas:

background: url(http://www.blogblog.com/tictac/quotes.gif) no-repeat top left;

background: #e0e0e0

La primera quiere decir que el fondo del blog será la imagen cuya dirección URL se especifica entre paréntesis. Lo que pone después sirve para especificar si queremos que la imagen se repita ocupando todo el espacio o no, si queremos que se sitúe arriba o abajo, etc. Si queremos que la imagen se repita, pondremos "repeat" a secas. Esto último se utiliza principalmente cuando queremos poner una textura de fondo (por ej. un fondo que simule una pared de ladrillos).

background: url(http://www.blogblog.com/tictac/quotes.gif) repeat;

La segunda, quiere decir que el fondo del blog será un color. En HTML los colores se escriben con código hexadecimal, es decir, una serie de 6 números y letras precedidos por el símbolo #. Así, el color negro es #000000 y el blanco es #ffffff. En los enlaces de la columna derecha de mi blog tenéis acceso a una tabla de códigos hexadecimales de muchos colores, para que probéis.

No voy a analizar el código completo, porque ni yo misma conozco el significado de gran parte de él. Lo único que tenéis que hacer es ir buscando todas las etiquetas background que encontréis, y cambiar la URL que viene por defecto (que es la que hace que la plantilla prediseñada tenga ese aspecto), por la URL de la imagen que queráis. Os recomiendo que en una ventana de navegador a parte vayais comprobando a qué corresponde cada URL (copiando y pegando), para que sepáis lo que queréis poner en su lugar.

Sabiendo un poco de inglés se puede deducir qué parte del blog estamos cambiando (por ejemplo, "Header" se refiere a la cabecera, "Footer" a la parte baja, "Body" al cuerpo, "Posts" a la zona de los mensajes, etc). Sin embargo, para quienes andan perdidos lo mejor es ir probando y cambiando la plantilla e ir viendo el resultado haciendo clic en VISTA PREVIA. Eso os abrirá una versión inactiva del blog en una nueva ventana, con el cambio que habéis hecho, para que lo podáis ver. Sin embargo el cambio no aparecerá en el blog activo hasta que le déis a GUARDAR PLANTILLA. Eso os permite hacer cuantos cambios queráis, y si os equivocáis, podréis dar marcha atrás pulsando en BORRAR CAMBIOS.

Algunos blogs tienen ciertos elementos decorativos delante del título de las entradas, o de los elementos de las listas (flechitas, florecitas, cuadraditos...etc). También podréis cambiar eso haciendo la misma operación. Subís a Flickr o Photobucket el dibujo que queráis poner, copiáis su URL, y la sustituís en el código. Yo, por ejemplo, en lugar de las flechitas prediseñadas, he puesto puntitos dorados.

Bueno, pues esto es todo por el momento. No sé si os he servido de ayuda o por el contrario os he liado más. En cualquier caso, podéis preguntar las dudas que tengáis, y si puedo, os las resuelvo. No soy ninguna experta, así que mis consejos son un tanto "apañeros", pero útiles en cualquier caso.

4 comentarios:

  1. Muchas gracias! he estado liadillo con los últimos exámenes... a 3 ya de terminar!!

    Pero en cuanto tenga un hueco me pongo a ello y le intentaré dar un aire nuevo al blog... :-D

    Gracias!

    ;)

    ResponderEliminar
  2. ::::: Hoooo0laa!! Me gusto la forma tan detallada de como explicas todo, lo malo es que quiero cambiar mis fondos y todo eso je je, es un rollo, saludos, Adiós... “Just Be Yourself, Be Free, Let's Be Free ". (“Simplemente Se Tu Mismo, Se Libre, Seamos Libres”) ATTE: - ۞ Jâïr Ø¢tâvïǿ ۞

    P.D.: Muy interesante tu blog...

    ResponderEliminar
  3. Gracias, algunas cosas las he podido hacer como cambiar el fondo que no sabia, me has ayudado. Todo lo demás es difícil para mi.
    Gracias. Elisa

    ResponderEliminar
  4. a mi en lo del panel de control ese no me deja modificar nada, como lo hago pues?

    ResponderEliminar

Gracias por tu mensaje. Siempre me hace ilusión saber que alguna persona, en algún lugar, se siente interesada por algo de lo que aquí escribo.