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.
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 {Ahora cada vez que quieras ponerle un pie de foto a tus imágenes usa este código:
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;
}
<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:
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.
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í:
¿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.
Ciudad Blogger
Un muy buen tutorial Potro, gracias por tu aporte.
ResponderEliminarSaludos.
muchas gracias muy bueno.
ResponderEliminarBuenísimo, Genial!! Muchas Gracias Potro, me viene de maravilla.
ResponderEliminarSaluttes!!
Potro, cómo estás?
ResponderEliminarEs muy interesante esto, pero tengo esta consulta: ¿es posible utilizar más de un "class" en la misma imagen?
Saludos
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:
Eliminar<img src='URL de la imagen'/>
De manera que quede así:
<img class='laclasequequieras' src='URL de la imagen'/>
Saludos.
Excelente post mi buen amigo :)
ResponderEliminarExcelente, mejora muchísimo con la opción que da blogger. Gracias por volver !
ResponderEliminarfenomenal aporte!!
ResponderEliminarHola, 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?.
ResponderEliminarMuchas gracias.
Hola iexus, si quieres que la imagen se abra con el Lightbox entonces cambia esta parte del código:
Eliminar<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.
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.
EliminarHola, 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 }
EliminarEse suele ser un problema muy recurrente.
http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html
Este comentario ha sido eliminado por el autor.
EliminarGracias 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:
Eliminarz-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.
Gracias, Potro. Problema resuelto. Eres admirable.
EliminarSúper útil como siempre. Gracias!!! =)
ResponderEliminarSaludos!!!, 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....
ResponderEliminarAlguien más tendrá que iluminarnos porque no conozco muchas opciones :(
EliminarPosiblemente eliminaste otro código como ese, pero no el que necesitas porque si aun aparece entonces el código sigue ahí.
EliminarBusca de nuevo, verás que ahí está, arriba de <aside> y debajo de <div class="column-right-inner">
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?
ResponderEliminarDe 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.
Eliminar<img src='URL de la imagen' title='Hola, soy un title' />
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?
EliminarHola 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:
Eliminarhttp://ciudadblogger.com/2010/08/tooltips-con-jquery.html
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¡¡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.
ResponderEliminarMuchí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.
Se verá bastante bien, pero no por el truquillo de esta entrada, sino por las hermosas fotos que tienes.
EliminarSoy 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?
ResponderEliminarEn la entrada donde quieras mostrar la imagen de esa manera.
EliminarHola 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.
ResponderEliminarSaludos sigue asi y éxitos.
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 ;)
EliminarBuen trabajo potro, seria interesante agregarlo con el que es de html 5 pero gracias intentare implementarlo con eso
ResponderEliminarMe 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.
EliminarAunque algunos no comentamos todo lo q pones nos resulta muy util, gracias
ResponderEliminarUn saludo
Manuel Ortiz
Pues me alegro que lo hagas Manuel, este blog no sería nada sin sus comentarios.
Eliminarproro se que es algo diferente pero como podrias solucionar esto:
ResponderEliminarUsar 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.
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 :(
EliminarMuchas gracias potro eso veo, tocara usar otro repro, cual recomiendas?
EliminarTodos 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.
EliminarPues no es SPAM pero sí lo tuve que eliminar por el aviso de los derechos de autor que puse aquí arriba.
ResponderEliminarEl 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!
Don't worry, casi nadie le presta atención a ese letrero ;)
ResponderEliminarBuenísimo.
ResponderEliminarHola 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 :/
ResponderEliminarQuiero 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!
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.
EliminarLuego, 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.
¡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.
EliminarAhora 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!
Si no tiene los códigos puedes agregarlos manualmente para que esos datos aparezcan en las entradas del blog:
Eliminarhttp://ciudadblogger.com/2010/07/cambiar-de-lugar-datos-del-post-footer.html
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é.
EliminarCreo 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! :/
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'>
EliminarAsí que si no surge efecto en una ponlo en la repetida.
potro nesecito tu ayuda con este error que no me deja guardar nada en blogger : Invalid widget: HTML4
ResponderEliminarError 400
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?
Eliminarsolo trato de cambiarle el nombre y no me deja ni tampoco guardar contenido en HTMLJAVASCRIT
EliminarQuizá 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.
EliminarEste comentario ha sido eliminado por un administrador del blog.
ResponderEliminarHola 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.
EliminarPd. Elimino el comentario por el aviso que está al final.
¡Hola!
ResponderEliminarRecié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!
Muchas gracias Karina. Ya tengo anotada la petición de ese post, apenas termine con las entradas que tengo pendientes me sigo con esa ;)
Eliminar¡Saludos!
Muchas gracias.
EliminarSaludos. :)
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.
ResponderEliminarHola 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.
EliminarLuego entra en "Preferencias para motores de búsqueda" y haz lo mismo en la parte de "Descripción".
Saludos.
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:
ResponderEliminarhttp://ciudadblogger.com/2012/04/mitos-y-realidades-sobre-los-dominios.html
Saludos.
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..
ResponderEliminarHola 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:
Eliminarhttp://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html
Eres el mejor potro..Solo he puesto lo que me has dicho y ya funciona..Muchas gracias..
EliminarHola, 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.
ResponderEliminarHola 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.
EliminarSaludos.
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
Eliminarhttps://lh6.googleusercontent.com/-iRgULvi79Ik/U1BAOrsjqII/AAAAAAAAEHQ/kz6yeNlofc4/s800/plantilla%25201.png
https://lh3.googleusercontent.com/-NhCWJ7zY3Ws/U1BAR6l70AI/AAAAAAAAEHY/8bBC9siWKPc/s800/plantilla%25202.png
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.
EliminarPerdón y gracias.
EliminarMuy Buena Tu explicacion... Mucha Grasias
ResponderEliminarMuy buena tu explicacion... grasias
ResponderEliminarHola, 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 :(
ResponderEliminarNo debería suceder Luis ya que no tienen ningún estilo que afecte la calidad, salvo que tus imágenes sean muy pequeñas.
EliminarDe 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.
Hola, quisiera aprender a escribir sobre ese pequeño fondo de color rosado, como se haces?
ResponderEliminarHola Jakson Sc, ¿cuál fondo rosado?
EliminarMuy buen aporte, yo empece sin saber nada, de a poco estoy sumandole cosas gracias a tu pagina, segui asi.
ResponderEliminarhttp://proyectopiping.blogspot.com.ar/
Hola Potro! Saludos desde Venezuela. Excelente aporte! Sigo tu blog desde hace rato y ya me has ayudado muchísimas veces a personalizarlo.
ResponderEliminarTengo 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.
Hola Gian, busca esta parte en tu plantilla .content-inner {
EliminarY 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.
Muchísimas gracias! Me ha servido de maravilla *-* Tomaré en cuenta tu consejo sobre dónde subir la imagen.
EliminarMuchas gracias de nuevo y saludos!
Una cosa Potro !!!
ResponderEliminarQuiero 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 !!!
Una cosa más, veo que a ti también te sale.
ResponderEliminarHola 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.
ResponderEliminarPues si, es por el navegador. Lo he comprado desde mi tablet y no me sale. Un saludo !!!
EliminarHola 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.
ResponderEliminarA 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.
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:
Eliminartable{margin-bottom:20px;width:100%}
th{font-weight:bold}
thead th{background:#c3d9ff}
th,td,caption{padding:4px 10px 4px 5px}
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).
EliminarSobre 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.
Me alegro que se haya podido resolver el problema iexus.
EliminarSí, 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
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.
EliminarDe nuevo agradecidísimo por tu blog y tu amabilidad.
Hola. Y si yo quiero que venga desde abajo?
ResponderEliminarHola, ¿qué quieres que venga desde abajo?
EliminarMe 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
EliminarNo sé decirte, no lo he intentado de esa manera.
Eliminar¡Ah! Y ¿cómo le saco el tooltip a mi imagen que le aplique el efecto tres? :)
ResponderEliminarNo 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.
EliminarEs que si le saco el atributo TITLE no aparece el pie de foto.
EliminarSi puedes muéstrame una entrada donde tengas este pie de foto y el tooltip que quieres eliminar.
EliminarSi, claro. Mira: http://1bigtimefans.blogspot.com/2014/10/pie-de-foto.html :)
EliminarAh, pero ese no es un tootltip personalizado, es el TITLE, ese atributo es necesario para poder mostrar el pie de foto :(
EliminarHola Potro,
ResponderEliminarEnhorabuena 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!!
Uy perdón, este es el artículo donde lo probé:
ResponderEliminarhttp://www.labitacoradepedrin.com/2014/10/alta-ruta-chamonix-zermatt-por-pepe-doc.html
Hola Pepe, elimina estos estilos de tu plantilla, con ese se corregirá:
Eliminar.post-body img, .separator a {
max-width: 94%;
height: auto;
}
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.
ResponderEliminarQuisiera 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.
Hola Lilia. Localiza la parte donde se encuentra el código de la imagen en sí, es decir, esta:
Eliminar<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>
Hola Potro, muchas gracias por el tutorial.
ResponderEliminar¿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
Hola Julio, en el código de la imagen verás que dice width:400px; eso cámbialo por max-width:1000px;
EliminarEl valor que agregues es el ancho máximo que tendrá la imagen.
Buenos dias Potro.
ResponderEliminarno 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.
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í.
EliminarGracias Potro, lo buscaré allí.
EliminarMuy buen tutorial
ResponderEliminarquisiera saber si es posible poner un en lace al pie de foto
No, porque el texto del pie de foto es un TITLE, no una estructura HTML aparte.
Eliminar¿Se puede centrar el pie de foto de un gadget?
ResponderEliminarNo 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.
EliminarHola 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.
ResponderEliminarHola Francisco. El código va en la entrada, estando en la pestaña HTML. Saludos.
EliminarUna mierda es ;(
ResponderEliminar