martes, 17 de abril de 2007

Imágenes de cabecera en blogger: Un pequeño tutorial

El pana Carlos Enrique, compañero bloggero y visitante regular de Pabellón con Baranda, me escribió un correo el otro día que comparto con Uds.:
Domingo….! Nel se tomó la libertad de darme tu dirección espero nos disculpes, fue por solicitud mía. He visto que manejas muy bien el blog Pabellón con Baranda, me fije que tienes una imagen de un pabellón criollo en el fondo del titulo del blog, he visto los blogs que tienes como enlaces, uno es mejor que otro en materia de presentación, el contenido es variado y se le da el elemento personal a cada uno.

El presente correo es para pedirte asesoría para cambiar la imagen de uno sobre anestesiología que estoy manejando y que tengo estacionado desde hace meses, quiero editar algunas imágenes de quirófano, personal en trabajo para colocarlo como fondo del nombre del blog y cambiar la imagen del mismo y quizás el formato, algo medianamente distinto (mucho va en el contenido), las paginas médicas son algo formales. Nutrirlo es algo difícil ya que lo elaboré para el postgrado de anestesia, para que la gente del Hospital Central escribiera, pero es difícil movilizar gente, tienen flojera, o timidez, de verdad muchos se pierden del “movimiento bloguero”, mucha literatura se consulta en blogs, es una manera informal pero es muy útil, la forma más común de Blog es muy buena, se comparte informalidades, pero el que esta comprometido con la profesión siempre quiere dar más en ella.

Hay un lenguaje informático en las planillas que debo aprender a manejar, he logrado entender algo, de allí que he podido nutrir los enlaces, la idea es que me muestres como se pesca y no que me des el pescado.
Precisamente para no darle el pescado me pareció que podía hacer un post al respecto y que él y otras personas que tengan la misma inquietud se puedan beneficiar de este conocimiento. Les enseño cómo hice para incluir la imagen de cabecera que aparece en Pabellón con Baranda. Esa fue la única modificación que hice del diseño del blog, aparte de modificar ligeramente los colores de fondo y de los textos.

Sabiendo un poco de html, javascript y ccs's (y teniendo un poco de paciencia y tiempo libre) uno puede hacer maravillas con la presentación del blog, aunque a mi lo que me interesaba era darle un toquecito personal, que fuera ligeramente nuestro.

A continuación les dejo las instrucciones para el que se interese en este asunto:

Notas previas:
1. Estas instrucciones están pensadas para que funcionen con la plantilla "Minima" (o "Minima Black") que fue la que instalé inicialmente cuando creé mi blog.. Otras plantillas populares de blogger tales como "Scribe", "Son of Moto" o "No.897" probablemente requieran algunos ajustes especiales específicos para cada una de ellas, pero los principios básicos empleados para cargar y publicar una imagen y reajustar el encabezado siguen siendo los mismos.

2. Yo monté mi blog en la época del Blogger Beta y ahora con la versión definitiva del sistema me di cuenta de que había algunos cambios en la estructura de la plantillas, por lo que yo hice en ese entonces no fue exactamente igual a lo que hay que hacer hoy en día. De todas formas para evitar que alguien fuera a echarse un pelón con estas instrucciones yo las seguí paso a paso en un blog de prueba que creé para confirmar que todo estaba bien.

Instrucciones
1. Crea una imagen de 660 pixeles de ancho por 150 pixeles de alto (más o menos) que vaya en el encabezado.






Algunos tips:
  • La altura de la imagen no es tan importante en este caso como su anchura que sí debería mantenerse en 660px.
  • Los formatos de imagen .gif y .jpeg tienen diferentes opciones de compresión / paletas de colores que hacen que la imagen pese más o menos o Kbytes. Es conveniente que la imagen no pese tanto.
  • Recuerda colocar el nombre del blog en alguna parte de la imagen.
2. Crea una nueva entrada en el blog y sube la imagen que acabas de crear. Luego publica la entrada y visita el blog.





3. Haz clic sobre la imagen de la entrada que acabas de crear para que abra en tamaño completo. Sobre la imagen grande, haz clic derecho, selecciona la opción "Copiar la ruta de la imagen" y luego pégala en el bloc de notas. La ruta de la imagen es la dirección en donde se guardó en el servidor y luego la necesitaremos para pegar la imagen en el encabezado del blog.


4. Regresa al Panel de tu blog. Haz clic en la pestaña Plantilla y luego en Edición de HTML.


En el cuadro de texto de esta ventana puedes efectuar los cambios que luego se reflerán en el blog. Arrastra la barra de navegación vertical hacia abajo hasta ubicar la etiqueta "body", justo debajo de ella pegamos el texto que se lista más abajo:



Por supuesto, hay que sustituir nombredemiblog y direcciondeimagenquesubimos por los valores reales porque de lo contrario no va a funcionar.

6. Eliminamos el encabezado que trae la plantilla por defecto. Buscamos la etiqueta que lee "<div id='header'" o "header-wrapper" y borramos las líneas que aparecen hasta la siguiente etiqueta "/div>" (incluyéndolas).



7. No guardes la plantilla sino hasta que estés satisfecho de que la imagen se ve como se debería ver. Para ir viendo los cambios puedes ir haciendo clic en el botón con la etiqueta Vista Previa, primero cuando coloques la imagen y luego cuando borres el encabezado previo.

8. Si ya están listos los cambios guarda la plantilla. En la versión Beta, cuando intentas guardar aparecerá una advertencia de que estamos a punto de eliminar el artilugio Header1. No te preocupes y guarda que ya a estas alturas sabes cómo se va a ver tu blog.



9. Listo, ya tienes una imagen de cabecera.

tecnologiapcb

12 comentarios:

Lorena Ofas dijo...

Hola. He tratado de seguir tu tutorial para cambiar la imagen del encabezado, pero al tratar de ejecutar el paso nro 3 no cuento con la opción "Copiar la ruta de la imagen". ¿Cómo puedo resolverlo? Gracias de antemano por tu ayuda.

Jeanfreddy dijo...

Buena opción para no tener que alojar la imagen en ningún otro lado! :) genial.

La Maga dijo...

Lorena: A mi me paso lo mismo (no me habilita la opción "Copiar la ruta de la imagen"), vas al html de la entrada y levantás la ubicación de ahí.Si seguís los pasos tal cual funciona...te dejo mi sitio www.ambarlamaga.blogspot.com
salutte

Domingo dijo...

a todos los que han pasado por acá. Me complace que la solución les haya resultado.

la maga: muchas gracias por la sugerencia. Lo de "vas al html de la entrada y levantás la ubicación de ahí" se refiere a "Ver código fuente de la página" o "Ver código" que aparece en el menú Ver del navegador. La ubicación que aparece allí es del tipo http://directorios/direcciondelaimagen.jpg

Ryo dijo...

Gacias por fin después de dar muchas vueltas lo he conseguido.

ana dijo...

Hol@ M@g@, te escribo para solicitarte ayuda sobre como poner una imagen en la cabezera del blogg
A mi me paso lo mismo (no me habilita la opción "Copiar la ruta de la imagen"), y no se donde encontrar el html de la entrada y levantar la ubicación de ahí. ¿a que te refieres? y si voy a "Ver código fuente de la página" o "Ver código" que aparece en el menú Ver cuando abro la imagen, encuentro un codigo lo guardo y luego lo pego en codigo de plantilla pero me dice que hay un herror y no puedo modificar mi plantilla. ¡ayuuuudaaaaa!

Domingo dijo...

Hola ana, ¿leíste el comentario que yo dejé?

La dirección de la imagen en la web es una sola, del tipo: http://bp0.blogger.com/unpocodeletras/otropoco/imagen.jpg

Más nada.

De hecho esa dirección la puedes ver tanto en la barra de direcciones del navegador web como en el código fuente.

Por cierto, si no te sirve eso de "guardar la ruta de la imagen" te recomiendo que instales el navegador Firefox y dejes de usar Internet Explorer.

La Maga dijo...

aclaro pq me encanta esta explicacion que hiciste.
no tenes que poner la href de la foto sino el src, cuidado! pq si pones la href...no la encuentra.
ta claro que yo use otra plantilla distinta a la tuya, toy generalizando el ejemplo
salutte

Anónimo dijo...
Este comentario ha sido eliminado por un administrador del blog.
eXiliado dijo...

gracias por el tutorial
me sirvió!

te invito a comprobar los resultados

www.ruin-exilio.blogspot.com

scudetto dijo...

buen articulo aunque siempre me ha costado manejarme en los codigos html :S

http://scudetto-mblog.blogspot.com

CRISTIAN MAURICIO TORRES dijo...

ola muchas gracias por tu aporte me ha sido de gran ayuda