Pie de foto: con fondo y sobre la imagen

7 de abril de 2014 118 comentarios ,

El pie de foto es una pequeña y breve descripción que podemos añadir a las imágenes que tengamos en el blog. Esta descripción da información precisa sobre la foto y nos ayuda a comprender dicha imagen.
Por ejemplo, al añadir la foto de una persona podemos insertar un pie de foto que dé el nombre de la persona, su cargo, un mérito, o un hecho con el que se le relacione, de esta forma quien mire la foto sabrá quién es, o qué hizo esa persona.
Por el lado de SEO estas descripciones también nos ayudar a posicionar las imágenes en los buscadores ya que esta información también sirve para los robots.

Blogger nos da la opción de añadir ese pie de foto (leyenda) cuando subimos la imagen, el problema es que el resultado es muy simple y poco llamativo, tanto que pasa casi desapercibido.

Cachorros en el jardín

Lo que haremos será añadir un pie de foto a las imágenes, pero a diferencia del pie de foto tradicional éste estará situado encima de la misma imagen y le agregaremos un fondo semitransparente, de modo que el resultado sea como este:


Si quieres tener un pie de foto como estos sólo entra en Plantilla | Edición de HTML y antes de ]]></b:skin> agrega estos estilos:
.caption {
padding: 0;
width: 100%;
position: relative;
}
.caption img {
width: 100%;
height: auto;
display: block;
padding: 0;
border: 0;
}
.caption::before {
content: attr(title);
position: absolute;
background: #EAF200; /* Color de fondo */
background: rgba(234, 242, 0, 0.6); /* Color de fondo en RGBA */
color: #000; /* Color del texto */
font-size: 14px; /* Tamaño del texto */
padding: 5px;
right: 0;
bottom: 0;
left: 0;
text-align: center;
z-index: 1;
}
Ahora cada vez que quieras ponerle un pie de foto a tus imágenes usa este código:
<div style="width:400px; padding:10px; margin:0 auto;"><div class='caption' title='Agrega aquí el pie de foto'><img src='URL de la imagen'/></div></div>
Ahí verás dónde se añade la descripción de la foto, así como la URL de la imagen.
El tamaño de la imagen se cambia modificando lo que está en negrita.

En el primer código que añadimos están los estilos para el pie de foto. Verás que el color de fondo está dos veces, primero en código hexadecimal y luego en RGBA, esto es porque con RGBA podemos definir una transparencia, en este caso es de 0.6, pero en el caso de que el navegador (Internet Explorer como siempre) no soporte este estilo entonces tomará el primero, el hexadecimal, pero sin la transparencia. En la sección Colores puedes obtener el código tanto en hexadecimal como en RGB.

La imagen estará centrada por defecto, pero si quisieras alinear la imagen a la izquierda para que quede rodeada de texto entonces usa este código:
<div style="width:400px; padding:10px; clear: left; float: left;"><div class='caption' title='Agrega aquí el pie de foto'><img src='URL de la imagen'/></div></div>
En realidad es el mismo, sólo hemos añadido una flotación a la izquierda y quitamos el margen. El resultado es el siguiente.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquet leo et erat posuere, at aliquet lorem commodo. Maecenas a gravida ligula. Nunc sed malesuada leo, et lacinia diam. Nullam bibendum justo libero, a varius mi suscipit vel. Maecenas commodo venenatis ante, eget ultricies nulla faucibus quis. Duis volutpat vulputate tortor volutpat euismod. Nam sed sapien a odio porttitor tincidunt. Curabitur mollis enim lacus, euismod fringilla lorem fringilla accumsan. Integer a erat ornare, molestie lorem sed, volutpat arcu.

Lo mismo podemos hacer si queremos alinear la imagen a la derecha.
<div style="width:400px; padding:10px; clear: right; float: right;"><div class='caption' title='Agrega aquí el pie de foto'><img src='URL de la imagen'/></div></div>
Y se verá así:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquet leo et erat posuere, at aliquet lorem commodo. Maecenas a gravida ligula. Nunc sed malesuada leo, et lacinia diam. Nullam bibendum justo libero, a varius mi suscipit vel. Maecenas commodo venenatis ante, eget ultricies nulla faucibus quis. Duis volutpat vulputate tortor volutpat euismod. Nam sed sapien a odio porttitor tincidunt. Curabitur mollis enim lacus, euismod fringilla lorem fringilla accumsan. Integer a erat ornare, molestie lorem sed, volutpat arcu.


¿Y si quisiéramos que el pie de foto aparezca sólo cuando se pase el cursor por encima de la imagen?


En ese caso quitamos los estilos que hayamos puesto y en su lugar agregamos estos:
.caption {
padding: 0;
width: 100%;
position: relative;
}
.caption img {
width: 100%;
height: auto;
display: block;
padding: 0;
border: 0;
}
.caption::before {
content: attr(title);
position: absolute;
background: #EAF200;
background: rgba(234, 242, 0, 0.6);
color: #000;
font-size: 14px;
padding: 5px;
right: 0;
bottom: 0;
left: 0;
text-align: center;
opacity:0;
filter:alpha(opacity=00);
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.caption:hover:before {
opacity:1;
filter:alpha(opacity=100);
}
El resultado en cualquiera de los casos me parece que es mucho más atractivo que el nativo de Blogger (aunque en gustos se rompen géneros), además que podemos personalizarlo a nuestro gusto cambiando el color de fondo, tamaño, tipo del texto, y estilos extra que se le pueden agregar según la creatividad de cada quien.


118 comentarios en:

" Pie de foto: con fondo y sobre la imagen "

  1. Un muy buen tutorial Potro, gracias por tu aporte.

    Saludos.

    ResponderEliminar
  2. Buenísimo, Genial!! Muchas Gracias Potro, me viene de maravilla.
    Saluttes!!

    ResponderEliminar
  3. Potro, cómo estás?
    Es muy interesante esto, pero tengo esta consulta: ¿es posible utilizar más de un "class" en la misma imagen?
    Saludos

    ResponderEliminar
    Respuestas
    1. Por supuesto, las clases que quieras. Pero si te fijas no hemos añadido la clase dentro del código de la imagen sino dentro del contenedor que está fuera de ella. Si quieres añadirle una clase a la imagen sólo agrégasela directamente a esta parte del código:
      <img src='URL de la imagen'/>

      De manera que quede así:
      <img class='laclasequequieras' src='URL de la imagen'/>

      Saludos.

      Eliminar
  4. Excelente, mejora muchísimo con la opción que da blogger. Gracias por volver !

    ResponderEliminar
  5. Hola, Potro, y muchas gracias por este artículo. ¿Cómo puedo hacer para que la imagen sea también enlace de sí misma, es decir que se abra en grande en una nueva ventana o en el visor de imágenes de las plantillas originales de Blogger? No sé prácticamente nada de código y mis intentos han resultado fallidos?.

    Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola iexus, si quieres que la imagen se abra con el Lightbox entonces cambia esta parte del código:
      <img src='URL de la imagen'/>

      Por esta otra:
      <a href="URL de la imagen"><img src='URL de la imagen'/></a>

      Verás ahí que la URL de la imagen va dos veces, la primera es para que abra el enlace y la segunda para que se muestre la imagen en la entrada.
      Saludos.

      Eliminar
    2. Gracias, Potro, he probado en dos blogs que tengo y en uno ha ido perfecto, pero en el otro deja aparecer el pie de foto.

      Eliminar
    3. Hola, no mencionas en cuál blog no te funciona, pero asegúrate que al poner los códigos no hayas eliminado una llave de cierre }

      Ese suele ser un problema muy recurrente.
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
    4. Este comentario ha sido eliminado por el autor.

      Eliminar
    5. Gracias por los detalles extras. Ya he visto el problema y en definitiva la culpa es mía por haber omitido un estilo en el código. Puedes resolverlo añadiendo debajo de .caption::before { esto:
      z-index:1;

      Por mi parte ya he corregido el código en la entrada para que quienes usen enlaces en las imágenes no tengan el mismo problema.
      Saludos.

      Eliminar
    6. Gracias, Potro. Problema resuelto. Eres admirable.

      Eliminar
  6. Súper útil como siempre. Gracias!!! =)

    ResponderEliminar
  7. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Pues no es SPAM pero sí lo tuve que eliminar por el aviso de los derechos de autor que puse aquí arriba.
      El buscador lo puedes localizar arriba de la etiqueta <aside> ahí verás el código:

      <form action='/search' class='searchform'>
      <input class='s' id='iseosearch' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...' x-webkit-speech='true'/>
      <input class='searchsubmit' type='submit' value='Buscar'/>
      </form>

      ¡Saludos!

      Eliminar
    2. Gracias por Responder mi Hermano... eres muy amable disculpa lo de los derechos de copyright no vi el mensaje por ningun lado... jejejeje un Abrazo.. "!!!!!!

      Eliminar
    3. Don't worry, casi nadie le presta atención a ese letrero ;)

      Eliminar
  8. Saludos!!!, leyendo... y al pendiente de tus publicaciones Potro... Ando buscando una galería de vídeos para ponerla en una pagina en la taberna pero, mmm, no he podido hacerla con videos alojados en dropbox MP4, cualquiera que he encontrado solo admite videos de you tube, vimeo y esas paginas dedicadas a eso... inclusive algunos amigos lo han intentado hacer en css y html para mi sin éxito, si me di a entender tal vez podrías iluminar mi ignorancia con tu sabiduría!!! jejejeejejejeje....

    ResponderEliminar
    Respuestas
    1. Alguien más tendrá que iluminarnos porque no conozco muchas opciones :(

      Eliminar
    2. Saludos Potro.. que pena molestarte... quite el codigo del buscador que me pusiste mas arriba en mi plantilla de html.. guarde cambios pero sigue apareciendo... alguna otra opcion?,,, te lo agradeceria enormemente.. un saludo !!!!

      Eliminar
    3. Posiblemente eliminaste otro código como ese, pero no el que necesitas porque si aun aparece entonces el código sigue ahí.
      Busca de nuevo, verás que ahí está, arriba de <aside> y debajo de <div class="column-right-inner">

      Eliminar
  9. Muy bueno esto que has hecho potro, pero no saliendo mucho del tema de las imágenes, tienes alguna idea de como cambiar la forma en que se muestre el title de la imagen?

    ResponderEliminar
    Respuestas
    1. De hecho el title que ves no es el de la imagen, sino del contenedor donde se encuentra la imagen. Pero ese no es problema, puedes añadir un title directo en el código de la imagen.

      <img src='URL de la imagen' title='Hola, soy un title' />

      Eliminar
    2. Lo que quiero saber es cambiar la parte visual cuando se muestre el title, ejemplo tengo una imagen y cuando ponga el cursor sobre ella presente un title con las letras mas grandes, fondo amarillo, etc, entiendes?

      Eliminar
    3. Hola de nuevo Braulio. Hasta donde sé el atributo title como tal no se puede cambiar, al menos no con CSS, pero puedes usar un tooltip como este que sí lo modifica:
      http://ciudadblogger.com/2010/08/tooltips-con-jquery.html

      Eliminar
    4. Eso me lo sospechaba porque no encontraba la forma de poder hacerlo, aunque ya sabia lo de los tooltips, me inclinare a probar ese tooltip a ver que tal. Saludos Potro desde República Dominicana.

      Eliminar
  10. ¡¡es genial!...si no fuera porque necesito esa imagen en pequeño que publico de mis fotos con el título añadido (para yo recordarlo también), me planteaba seriamente dejar de usar el marco que les pongo para añadírselo, y usar este truco tuyo tan precioso.
    Muchísimas gracias, Potro. Un beso enorme.

    P.D. Pienso ahora, a ver si me decido de una vez por todas a crearme una página "fija", y entonces..¡¡¡síii podría usarlo!!... Guay!! Gracias de nuevo.

    ResponderEliminar
    Respuestas
    1. Se verá bastante bien, pero no por el truquillo de esta entrada, sino por las hermosas fotos que tienes.

      Eliminar
  11. Soy muy novata en esto y necesito saber un poco mas. Yo he añadido los estilos a mi plantilla pero dices que cuando se añade una foto hay que añadir el código que pones. ¿Donde lo añado dicho código?

    ResponderEliminar
    Respuestas
    1. En la entrada donde quieras mostrar la imagen de esa manera.

      Eliminar
  12. Hola potro que gusto que estés de vuelta me da mucha alegria, que buen tutorial pero potro seria genial que le colocaras un demo para ver como quedo.
    Saludos sigue asi y éxitos.

    ResponderEliminar
    Respuestas
    1. El demo está en la misma entrada, no son capturas, son imágenes con el mismo pie de foto que se explica en la entrada ;)

      Eliminar
  13. Buen trabajo potro, seria interesante agregarlo con el que es de html 5 pero gracias intentare implementarlo con eso

    ResponderEliminar
    Respuestas
    1. Me encanta el HTML5, y más si se combina con CSS3, pero me reservo un poco ello porque aun son bastantes los usuarios que usan versiones antiguas de Internet Explorer.

      Eliminar
  14. Aunque algunos no comentamos todo lo q pones nos resulta muy util, gracias
    Un saludo
    Manuel Ortiz

    ResponderEliminar
    Respuestas
    1. Pues me alegro que lo hagas Manuel, este blog no sería nada sin sus comentarios.

      Eliminar
  15. proro se que es algo diferente pero como podrias solucionar esto:

    Usar YouTube como reproductor de audio en Blogger pero tiene problema en móvil.

    el truco esta en este enlace

    http://www.oloblogger.com/2011/02/truquillo-para-insertar-solo-audio.html

    Sale bien en el blog porque es sencillo de hacer, sale bien pero en PC
    Pero cuando se ve en móvil, se ve mal no se ve el play y cuando es una lista de reproducción es peor tampoco se ve el play ni nada.

    ResponderEliminar
    Respuestas
    1. En efecto eso es sólo para versiones Web, para las versiones móviles no funcionará de forma adecuada, no conozco algún truquillo que se le pueda aplicar para que funcione :(

      Eliminar
    2. Muchas gracias potro eso veo, tocara usar otro repro, cual recomiendas?

      Eliminar
    3. Todos los que tengo en el blog son reproductores hechos en flash pero esos no se ven en dispositivos móviles (por el formato que tienen). Le prometí a un usuario publicar alguno en HTML5 (esos sí funcionan en móviles) así que buscaré alguno sencillo y fácil de usar y procuraré publicarlo en esta semana, o la otra.

      Eliminar
  16. Hola EL POTRO, tengo un problema y no es relacionado con este post, lo comento por aquí porque es el más reciente. El problema es en esta plantilla (http://dynamicmag-sbtemplates.blogspot.com/) todo iba bien, hasta que me tope con el fondo blanco donde se encuentra todo el contenido. Al deslizarme hacía abajo, se desprende el menú y queda arriba, pero el fondo blanco abarca también en la parte del logotipo. Busque en poner una imagen de fondo remplazando el color, pero perdía demasiado la calidad, encontré la solución en la imagen pero el tamaño es muchísimo más grande de lo que me imaginaba, entonces trate de buscar en poner una imagen encima de la otra, al igual que poner el color y encima la imagen, pero nada :/

    Quiero que no sea de un mismo color, y que tenga una sección propia en la parte de arriba, entre la barra de arriba con la del menú, para poder diseñar en ese espacio, ¿Se puede? Espero que me ayudes POTRO, te lo agradecería mucho, saludos!

    ResponderEliminar
    Respuestas
    1. Hola, hazlo más o menos como lo estabas haciendo, es decir, crea una imagen para la parte de arriba con las mismas dimensiones que pa parte negra.
      Luego, en .content-outer que tu fondo sea así:

      background:#FFF url(URL de tu imagen) no-repeat top center;

      De esa forma la imagen se quedará arriba, y el resto del fondo será blanco.

      Eliminar
    2. ¡Muchísimas gracias Potro! Todo salio muy bien (Siento un alivio), de haber sabido que todo iba en un mismo "Background", yo use dos pero nada.

      Ahora otra duda (Sino es mucha molestia) estoy viendo que la plantilla no contiene los datos de "Publicado/creado por: Autor" "Comentarios" "Fecha" en los posts, tantos en las entradas como las que están en la página principal, aun cuando ya están activadas en la parte de "Diseño". Aquí esta una plantilla que es del mismo creador (http://fastnews-soratemplates.blogspot.mx/) la misma plantilla, pero con algunas cosas diferentes. Espero me puedas ayudar en saber como colocarlas o añadir ese contenido en las entradas, gracias por la ayuda Potro, saludos!

      Eliminar
    3. Si no tiene los códigos puedes agregarlos manualmente para que esos datos aparezcan en las entradas del blog:
      http://ciudadblogger.com/2010/07/cambiar-de-lugar-datos-del-post-footer.html

      Eliminar
    4. Hola Potro nuevamente gracias por responderme, pero los códigos no resultaron en la página, hice todo lo que venía en el enlace que compartiste, y nada. Primero se encontraban en la parte de "post-footer-line post-footer-line-1'" y lo cambie a "post-header-line-1" para que se pusieran abajo del título, pero tampoco. Encontré un código "display:none;" que al quitarlo por completo o simplemente "None", arriba del título aparece la fecha "Viernes, 12 de Abril 2014" pero no sé.

      Creo que están como bloqueados por medio de un código, porque no aparecen de la forma que me diste, y le busque pero nada, también encontré que "Acerca de mi" donde aparecen los datos del autor y los enlaces abajo de cada post no aparecen tampoco, y están ahí, el código, la activación, pero nada. Mira, te dejare el post en el que estoy editando (http://mfpruebanew.blogspot.mx/) Mis molestias, espero que me puedas ayudar de nuevo Potro, saludos! :/

      Eliminar
    5. Toma en cuenta que la etiqueta <div class='post-header'> puede estar dos veces en las plantillas, lo mismo que la etiqueta <div class='post-footer'>
      Así que si no surge efecto en una ponlo en la repetida.

      Eliminar
  17. potro nesecito tu ayuda con este error que no me deja guardar nada en blogger : Invalid widget: HTML4
    Error 400

    ResponderEliminar
    Respuestas
    1. Hola jorge, ¿qué contiene el gadget HTML4 de tu plantilla? ¿y qué cambio estás tratando de realizar cuando te sale ese mensaje de error?

      Eliminar
    2. solo trato de cambiarle el nombre y no me deja ni tampoco guardar contenido en HTMLJAVASCRIT

      Eliminar
    3. Quizá la estructura de tu plantilla tiene algún error. Podrías restablecer los artilugios a sus valores originales pero perderías muchos de los cambios que hayas aplicado en tu plantilla.

      Eliminar
  18. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hola El Venezolano, no tengo algo como eso, pero puedes buscar algún tutorial de algún slider parecido sólo que en lugar de imágenes pondrías los enlaces a las etiquetas. Seguro encuentras varios opciones con jQuery.

      Pd. Elimino el comentario por el aviso que está al final.

      Eliminar
  19. ¡Hola!

    Recién me inicio en el mundo de los blogs y tus tutoriales me han ayudado a resolver muchas dudas.

    Gracias por el tiempo que nos dedicas... :)

    P.D. ¿Podrías por favor enseñarnos cómo hacer que los blogs se vean como el tuyo en dispositivos móviles?

    ¡Saludos!

    ResponderEliminar
    Respuestas
    1. Muchas gracias Karina. Ya tengo anotada la petición de ese post, apenas termine con las entradas que tengo pendientes me sigo con esa ;)

      ¡Saludos!

      Eliminar
  20. No tiene nada que ver con el post pero no encuentro donde preguntarlo. Como se hace para que cuando buscas un blog en google salga Trucos, tutoriales y gadgets para tu blog de Blogger como sale en el tuyo.

    ResponderEliminar
    Respuestas
    1. Hola Fernando, entra en la configuración de tu blog, en "Lo básico" verás que puedes poner una descripción de tu blog, pon el texto que desees.
      Luego entra en "Preferencias para motores de búsqueda" y haz lo mismo en la parte de "Descripción".
      Saludos.

      Eliminar
  21. Muy buen post, Potro, como siempre.
    Pero necesito hacerte una pregunta que no tiene nada que ver con esta entrada:
    Yo tenía un .blogspot y ahora lo convertí a .com. Al analizar con MozRank veo que ha perdido todo el PA y DA. ¿Esto es momentáneo y se recuperará, o esos valores los he perdido y debo empezar desde cero?
    Disculpa que me fui a otro tema.
    ¡Saludos!

    ResponderEliminar
    Respuestas
    1. Hola Daniel, es temporal, en unos días (o semanas) deberás recuperarlo, aunque algunas veces no siempre se recupera la misma autoridad. Aquí hay algo de información al respecto:
      http://ciudadblogger.com/2012/04/mitos-y-realidades-sobre-los-dominios.html

      Saludos.

      Eliminar
  22. ¡Muchísimas gracias, Potro! Era exactamente lo que andaba buscando.
    ¡Saludos!

    ResponderEliminar
  23. Hola potro casi todo mi blog en su totalidad está hecho gracias a ti, pero esta vez no me sale este truco del pie en la foto..He puesto en mi plantilla el código pero no me sale en las fotos como a ti y no se porqué será..Me gusta mucho y quisiera me ayudaras a resolver el problema..Este es mi blog http://acerequebola.blogspot.com.es/ saludos y gracias..

    ResponderEliminar
    Respuestas
    1. Hola Lizardo. Lo que ha pasado es que al poner los estilos en tu plantilla has eliminado una llave de cierre } del código que está arriba de estos actuales. Al eliminar esa llave de cierre hace que estos estilos no funcionen:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
    2. Eres el mejor potro..Solo he puesto lo que me has dicho y ya funciona..Muchas gracias..

      Eliminar
  24. Hola, Potro, me imagino que ésta es una pregunta recurrente pero no he sabido encontrar la respuesta por ahí. ¿Puedes indicarme cómo cambiar el tamaño y estilo de la fuente del pie de foto? Gracias.

    ResponderEliminar
    Respuestas
    1. Hola iexus, mira las anotaciones en color verde dentro del código de los estilos, ahí verás que dice dónde se cambia el color y el tamaño de la fuente. Por supuesto que si lo deseas puedes añadir más estilos.
      Saludos.

      Eliminar
    2. oye Potro espero que me puedas ayudar, estoy tratando de hacer un blog de " baja 1000" (carreras en baja california) encontre una plantilla prediseñada que me gusto, ya la descargue e instale pero no se mira igual que en el blog que la mire, aqui te dejo 2 imagenes para que las veas y me digas como puedo hacer para que en mi blog se vean asi. gracias espero tu ayuda
      https://lh6.googleusercontent.com/-iRgULvi79Ik/U1BAOrsjqII/AAAAAAAAEHQ/kz6yeNlofc4/s800/plantilla%25201.png


      https://lh3.googleusercontent.com/-NhCWJ7zY3Ws/U1BAR6l70AI/AAAAAAAAEHY/8bBC9siWKPc/s800/plantilla%25202.png

      Eliminar
    3. Es complicado porque una usa un sistema de sumarios en el que la miniatura mide tan solo 72x72 pixeles, mientras que la otra no es miniatura sino el tamaño real de la imagen. Esto no se modifica sólo con CSS sino que interviene la estructura de la plantilla.

      Eliminar
  25. Muy Buena Tu explicacion... Mucha Grasias

    ResponderEliminar
  26. Muy buena tu explicacion... grasias

    ResponderEliminar
  27. Hola, tengo una duda, osea si me funcinó...el único problema es que las imagenes peirden calidad y se ven píxeladas, y cuando las subo normalmente sin el pie de foto se ven bien...me paso lo mismo haciendo uno de los sliders que tienes en otros post :(

    ResponderEliminar
    Respuestas
    1. No debería suceder Luis ya que no tienen ningún estilo que afecte la calidad, salvo que tus imágenes sean muy pequeñas.
      De cualquier forma, si puedes cambia el tamaño de la imagen desde la URL, por ejemplo:
      http://2.bp.blogspot.com/-acIxM4hy7cs/U0GqMvmQyyI/AAAAAAAAKXs/ir63wvH7wU0/s400/cachorros.jpg

      Esa es la URL de una imagen subida desde Blogger. Verás que dentro de ella hay una letra s y un valor numérico. Ese valor es el tamaño de la imagen. Si lo cambias por s000 entonces tendrás el tamaño original.
      Prueba con eso, tal vez eso ayude a que muestre el tamaño más grande junto con su mejor calidad.

      Eliminar
  28. Hola, quisiera aprender a escribir sobre ese pequeño fondo de color rosado, como se haces?

    ResponderEliminar
  29. Muy buen aporte, yo empece sin saber nada, de a poco estoy sumandole cosas gracias a tu pagina, segui asi.

    http://proyectopiping.blogspot.com.ar/

    ResponderEliminar
  30. Hola Potro! Saludos desde Venezuela. Excelente aporte! Sigo tu blog desde hace rato y ya me has ayudado muchísimas veces a personalizarlo.

    Tengo una duda rápida, y es que he intentado e intentado con esto y no he podido dar con el código u opción para arreglarlo.

    Este es mi blog http://dailygian.blogspot.com/ (lo estoy arreglando aun) y quiero que ese fondo blanco (que en el creador de plantillas se llama "Fondo Principal") se ponga traslucido, preferiblemente que yo pueda insertar una imagen png traslucida (ya la generé y la subí a internet http://i1176.photobucket.com/albums/x322/GianellaG/Imagen1_zpsef2e58d5.png) para que me sea más fácil arreglar los colores sin necesidad de complicarme tanto con códigos.

    Espero puedas ayudarme con esto. Quiero que quede con las mismas dimensiones que el fondo blanco. Me gusta mucho el fondo estampado pero quiero quitarle un poco el efecto recargado.

    Saludos y gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola Gian, busca esta parte en tu plantilla .content-inner {
      Y elimina el background que esté dentro de ella, en su lugar pon esto:
      background: url(http://i1176.photobucket.com/albums/x322/GianellaG/Imagen1_zpsef2e58d5.png);

      Si puedes sube la imagen a Picasaweb, será mucho mejor porque siempre hay problemas con Photobucket.
      Saludos.

      Eliminar
    2. Muchísimas gracias! Me ha servido de maravilla *-* Tomaré en cuenta tu consejo sobre dónde subir la imagen.
      Muchas gracias de nuevo y saludos!

      Eliminar
  31. Una cosa Potro !!!
    Quiero aplicar este efecto en alguna foto de mi blog, he instalado el código y todo perfecto, pero no me gusta el rectángulo o el recuadro blanco que sale cuando pinchas sobre la foto. Aparte del texto en el pie de la foto sale como un rectángulo con el texto que hemos puesto en el pie, se puede evitar esto? Gracias !!!

    ResponderEliminar
  32. Una cosa más, veo que a ti también te sale.

    ResponderEliminar
  33. Hola Biljana, la verdad es que no he podido notar el rectángulo que mencionas, no sé si sea por el navegador, pero al menos desde Safari mis ejemplos los veo bien.

    ResponderEliminar
    Respuestas
    1. Pues si, es por el navegador. Lo he comprado desde mi tablet y no me sale. Un saludo !!!

      Eliminar
  34. Hola Potro, de nuevo por este hilo para ver si me puedes ayudar, aunque en este caso mi problema no se ajuste del todo al tema de esta entrada.

    A pesar de mis excasos conocimientos en html y css, me estoy atreviendo a diseñar un blog partiendo de una plantilla que me he descargado. Me gusta comenzar los artículos con una imagen pequeña situada a la izquierda rodeada de texto, tal como puedes ver en este blog de pruebas:

    http://prbixccf.blogspot.com.es/2014/08/prbfotosinpie.html

    Estaba trabajando con lo que nos ofreces en esta entrada cuando me he encontrado este problema previo: se me desconfigura la columna de la foto cuando quiero ponerle un pie de foto, como puedes ver aquí:

    http://prbixccf.blogspot.com.es/2014/08/disenando-el-blog-prueba-con-pie-de-foto.html

    Al poner el pie de foto se me centra, pero si la coloco con html a la izquierda, la parte de la derecha se me queda en blanco y viceversa.

    En algunas pruebas con tu código de esta entrada he logrado que se vea bien, pero de una manera bastante laboriosa y casual.

    ¿Podrías ayudarme en este caso?. Gracias.

    ResponderEliminar
    Respuestas
    1. Hola iexus, tal parece que es por los estilos de tu plantilla. Prueba eliminando todos los estilos correspondientes a las tablas que tu plantilla trae por defecto. Yo encontré estos, no sé si haya más que debas eliminar:

      table{margin-bottom:20px;width:100%}
      th{font-weight:bold}
      thead th{background:#c3d9ff}
      th,td,caption{padding:4px 10px 4px 5px}

      Eliminar
    2. Potro, una vez más me dejas simplemente tan agradecido como admirado. Quitando lo que me has dicho se ha resuelto el problema (aunque me ha eliminado el margen izquierdo de otra tabla que ya tenía creada, pero me imagino que con paciencia encontraré la solución).

      Sobre la aplicación de los pies de imagen con color de fondo que nos enseñas en esta entrada, tengo dos dudas:

      1- ¿Deben mostrarse correctamente para cualquier tamaño y proporción (vetical/horizontal) de imagen,o cuando en una misma entrada tienes varias imágenes de diferente tamaño?

      2- Si quiero situar el texto a la izquierda, ¿puedo darle un poquito de margen, para que no quede pegado justo al borde de la imagen?

      Gracias.

      Eliminar
    3. Me alegro que se haya podido resolver el problema iexus.
      Sí, puedes usar varias imágenes de distintos tamaños, no pasa nada.
      En cuanto a tu otra pregunta, verás que en el código he puesto en negrita esto:
      clear: left; float: left;

      Justo antes o después de eso agrega un margen, por ejemplo:
      margin: 0 10px;

      Saludos

      Eliminar
    4. Potro, gracias por ofrecerme nuevamente tus soluciones a mis problemas. En principio, ésta no me ha funcionado (el margen se crea tanto para el texto como para el fondo de color), pero puede que se deba a que he tocado algo el código para adaptarlo a mis necesidades. No quisiera moletarte más en este asunto, seguiré probando por mi cuenta.

      De nuevo agradecidísimo por tu blog y tu amabilidad.

      Eliminar
  35. Hola. Y si yo quiero que venga desde abajo?

    ResponderEliminar
    Respuestas
    1. Hola, ¿qué quieres que venga desde abajo?

      Eliminar
    2. Me expresé un poco mal... ¿Cómo hago para que el pié de foto quede igual a el del menú de ésta página? nick.com Saludos

      Eliminar
    3. No sé decirte, no lo he intentado de esa manera.

      Eliminar
  36. ¡Ah! Y ¿cómo le saco el tooltip a mi imagen que le aplique el efecto tres? :)

    ResponderEliminar
    Respuestas
    1. No sé cuál tooltip hayas añadido, pero bastaría con eliminar el atributo TITLE de tu imagen, según como sea el método que hayas usado para tu tooltip.

      Eliminar
    2. Es que si le saco el atributo TITLE no aparece el pie de foto.

      Eliminar
    3. Si puedes muéstrame una entrada donde tengas este pie de foto y el tooltip que quieres eliminar.

      Eliminar
    4. Si, claro. Mira: http://1bigtimefans.blogspot.com/2014/10/pie-de-foto.html :)

      Eliminar
    5. Ah, pero ese no es un tootltip personalizado, es el TITLE, ese atributo es necesario para poder mostrar el pie de foto :(

      Eliminar
  37. Hola Potro,
    Enhorabuena por tus artículos, muy útiles y bien explicados!!
    Al aplicar este truco del pie de foto, obtengo un resultado un poco raro, y trasteando la plantilla no consigo corregirlo... podrías echarme una mano, por favor??
    Muchísimas gracias de antemano. Saludos!!

    ResponderEliminar
  38. Uy perdón, este es el artículo donde lo probé:
    http://www.labitacoradepedrin.com/2014/10/alta-ruta-chamonix-zermatt-por-pepe-doc.html

    ResponderEliminar
    Respuestas
    1. Hola Pepe, elimina estos estilos de tu plantilla, con ese se corregirá:

      .post-body img, .separator a {
      max-width: 94%;
      height: auto;
      }

      Eliminar
  39. Hola Potro, es muy bueno tu blog, quisiera hacerte una pregunta con respecto a este post. Yo pude perfectamente hacer lo que indicas pero quisiera saber si es posible dar un paso más.
    Quisiera poner una imagen con zócalo con color como tú indicas y luego vincular la imagen a una URL, es posible? Yo puedo hacerlo con imágenes que subo cargadas desde mi computadora, es decir no utilizo la url de la imagen sino que la cargo y luego les pongo la leyenda (no como la tuya sino la que viene por defecto) y luego vinculo la imagen pero aplicando tu método no me queda enlazada. Es posible hacerlo?
    Desde ya muchas gracias por la orientación. Lilia.

    ResponderEliminar
    Respuestas
    1. Hola Lilia. Localiza la parte donde se encuentra el código de la imagen en sí, es decir, esta:
      <img src='URL de la imagen'/>

      Ahí deberás añadir el enlace que quieras de tal modo que quede así:
      <a href="URL del enlace"><img src='URL de la imagen'/></a>

      Eliminar
  40. Hola Potro, muchas gracias por el tutorial.

    ¿Podrías indicarme qué modificar para poder poner este ejemplo de manera que la imagen tenga el ancho en % para poder incluirlo en una web responsive?

    Muchísimas gracias

    ResponderEliminar
    Respuestas
    1. Hola Julio, en el código de la imagen verás que dice width:400px; eso cámbialo por max-width:1000px;
      El valor que agregues es el ancho máximo que tendrá la imagen.

      Eliminar
  41. Buenos dias Potro.
    no se si se podra hacer en blogger, que ahora esta de moda en las web de juegos, y es poner una pequeña imagen de "Nuevo" por ejemplo, encima de la imagen principal de la entrada, en las últimas 5 o 6 entradas de manera automática allí donde aparezca la imagen, ya sea en el "Home", "post relaccionados", "páginas de etiquetas", etc. Lo he buscado en varios sitios y no he encontrado nada de este tema.
    Te pongo una imagen para que lo puedas ver mejor.

    https://lh3.googleusercontent.com/-39s4SP1rQ94/VPjKogPAeHI/AAAAAAAAFDg/BeAyaXNE29A/w702-h505-no/pantallazo.JPG

    Un saludo.

    ResponderEliminar
    Respuestas
    1. Supongo que se ha de poner, pero nunca lo he intentado y es que supongo que todo dependerá de la plantilla que uses. No recuerdo bien ni estoy seguro, pero me parece que en Oloblogger tienen una entrada sobre ello o sobre algo similar, no está de más que des una revisada ahí.

      Eliminar
    2. Gracias Potro, lo buscaré allí.

      Eliminar
  42. Muy buen tutorial
    quisiera saber si es posible poner un en lace al pie de foto

    ResponderEliminar
    Respuestas
    1. No, porque el texto del pie de foto es un TITLE, no una estructura HTML aparte.

      Eliminar
  43. ¿Se puede centrar el pie de foto de un gadget?

    ResponderEliminar
    Respuestas
    1. No sé a cuál gadget te refieras. Si en un gadget HTML/Javascript pones el código de esta entrada entonces estará centrado tal como se mira en los ejemplos.

      Eliminar
  44. Hola Potro una aplicación genial. Pero tengo una duda ya que soy muy novato en esto del blog. Dices que cada vez que queramos poner el pie de foto a una foto utilicemos un código, mi duda es ¿dónde se pega ese código? Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola Francisco. El código va en la entrada, estando en la pestaña HTML. Saludos.

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger