Una imagen en todos los posts | Oloblogger Según el diseño que quieras para tu web, puede ser que interese colocar una imagen fija en cada entrada . Sería algo del estilo de lo que se...

11 de agosto de 2008

Una imagen en todos los posts

Según el diseño que quieras para tu web, puede ser que interese colocar una imagen fija en cada entrada. Sería algo del estilo de lo que se ve a la izquierda de este texto. Eso es, por ejemplo, lo que ahora necesita nuestro amigo de SilencioEncadenado.

Poner una imagen en cada post mediante Blogger, ya se explicó en Colocar una imagen en una entrada. Ahora pretendemos poner la misma imagen de manera automática, en todas las ocasiones, para no tener que hacerlo "a mano" cada vez que publicamos.

Hay una manera muy fácil, aunque limitada a sólo cuatro sitios: las cuatro esquinas del bloque de información correspondiente a la entrada.

Lo primero que hay que hacer es tener nuestro dibujito controlado a buen recaudo:
  1. grabado en nuestro disco duro para subirlo mediante el interfaz de imágenes de Blogger
  2. o bien en un servicio de alojamiento de imágenes, anotando la dirección (también con CTRL+c) para cuando nos haga falta.
Ahora buscamos en el código HTML de nuestra plantilla, el siguiente trozo (hay que expandir artilugios para verlo):
<div class='post-body entry-content'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->

Después insertamos el código HTML necesario para colocar una imagen, con un STYLE para indicar que lo queremos alineado a la izquierda del texto. Para que salga arriba hay que insertarlo delante del <data:post.body/> Justo después de <p> tal que así:
<div class='post-body entry-content'>
<p><img src='URLIMAGEN' style='float:left;'/><data:post.body/></p>

Para que sea abajo a la izquierda, se hace igual pero se coloca después del cierre del POST.BODY.

Para alinear, en ambos casos, la imagen a la derecha, se cambia el FLOAT:LEFT por un FLOAT:RIGHT y ya tenemos las cuatro combinaciones posibles. Bueno, hay dos opciones más que serían sin el FLOAT, pero salvo casos muy contados, no creo que sean demasiado estéticas.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

15 comentarios :

  1. Me vas a matar pero... igual me expliqué un poco mal cuando te pregunté como poner una imagen al lado de cada post. En realidad lo que quería era ponerlo al lado del título, no dentro de la entrada. Creo que te pregunte cómo ponerlo al lado del post, cuando en realidad quería decir al lado del título. Siento haber cometido este error, aunque si no averiguo como poner la imagen al lado del título puede que lo ponga al lado del post, tal y como explicas aquí.

    Muchísimas gracias por intentar ayudarme y lo siento por haberme explicado tan mal...

    ResponderEliminar
  2. No importa. Seguro que sirve para algún otro. ;)

    ResponderEliminar
  3. He visto entra entrada, y he pensado que lo mismo podrías ayudarme. Tengo un blog compartido y me gustaría que al comienzo de cada entrada saliera una imagen dependiendo del autor que a realizado esa entrada, es como una forma de identificarlo previamente.
    También podría ser dependiendo de las etiquetas.
    Espero que puedas ayudarme, ya que hasta ahora no he conseguido solucionar mi problema.
    Gracias de antemano!!
    PD: Enhorabuena por el blog!!

    ResponderEliminar
  4. Enereo, creo tener la solución. En cuanto tenga un rato (ando muy pero que muy escaso de conexión) para comprobar que funciona, publico una entrada explicando cómo hacerlo.

    Saludos

    ResponderEliminar
  5. yo hice esto, me salio la imagen, pero tambien se duplicaron mis entradas (ubieron 2 de c/u

    ResponderEliminar
  6. ya lo arregle, le borre la parte que decia < data:post.body/ > y se arreglo, no se porque.
    gracias y un saludo.

    ResponderEliminar
  7. Garias por su sabio conocimiento, hice algunos cambios, gracias a muchos que ayudan ...... blo-g-abriel desde peru.♣♣♣♣♣

    ResponderEliminar
  8. Hola, tengo un blog hace poquito y estoy aprendiendo muy de a poco a mejorarlo. Tus consejos son bastantes fáciles de seguir para aquellos que no tenemos idea de html, etc.
    Para poder reemplazar las etiquetas con iconos pero no me funciona. donde lo tengo que pegar??


    Gracias!! y para el futuro como incluyo más iconos para todas las etiquetas.
    Mi blog es seriesupdate.blogspot.com

    ResponderEliminar
  9. El post que lo explica es este otro, fueradeserie.

    ResponderEliminar
  10. Ocurrio un error con mi entrada, se borro el contenido pero segun parece, sigue ahi lo que escribi solo que, el unico post que tenia, se borro todo lo que puse y solo sale mi imagen hacia la izquierda =P

    ¿alguna ayudita?

    ResponderEliminar
  11. Hola Chizzuru~. Si eso que te pasó fue después de intentar hacer este truco, posiblemente borraste accidentalmente <data:post.body/> Repasa esa parte.

    ResponderEliminar
  12. Teneis toda la razon y no solo eso, si no que estaba mal escrito el codigo D:
    muchisimas gracias por tu pronta respuesta, feliz año nuevo y felicidades por tener un blog impecable, saludos.

    ResponderEliminar
  13. hola olomán, me vine a OFF TOPI porque no sé dónde poner esta pregunta: resulta que navegando con firefox (yo siempre uso camino de mozilla), me encuentro con que http://paraninosconcabeza.blogspot.com me sale en Times cuando yo lo tengo configurado para Arial. Y además no se visualiza el gadget de seguidores. ¿qué se pude hacer? graciassss

    ResponderEliminar
  14. Son dos preguntas.

    Sobre lo de la letra, no sé contestarte bien porque no conozco ese navegador. Tu blog anda bien porque yo lo veo correctamente en IE y en FF (con Arial) y eso me hace pensar que posiblemente Camino tenga alguna opción dónde selecciones con qué tipo de letra por defecto quieres ver las páginas que visites y la debes tener activada.

    Lo de los seguidores se puede arreglar con un hack que publicó hace poco Vagabundia: http://vagabundia.blogspot.com/2010/03/problemas-con-seguidores-usando.html

    ResponderEliminar
  15. gracias de nuevo olomán!! es verdad!! genial.

    ResponderEliminar