Galería de imágenes sencillísima y a prueba de torpes | Oloblogger Hace un tiempo alguien me pidió que le montara una página a modo de galería de imágenes o portfolio, en la que mostrar a tamaño reducido det...

2 de julio de 2014

Galería de imágenes sencillísima y a prueba de torpes

Hace un tiempo alguien me pidió que le montara una página a modo de galería de imágenes o portfolio, en la que mostrar a tamaño reducido determinada colección de fotografías para después poderlas ampliar a demanda.

Existen multitud de plugins JavaScript para esto (1)(2), pero evidentemente requieren de un extra de código con este lenguaje que normalmente no es corto y que incrementará el peso de nuestra plantilla a medida que lo compliquemos para incorporar efectos. También requieren de un tiempo de procesado que además de volver a sumar para el tiempo de carga, provoca que en conexiones lentas a veces se vea un pequeño desbarajuste antes de que se compongan todas las imágenes adecuadamente.

Galería de imágenes para Blogger a prueba de torpes

Otro sistema alternativo sería usar exclusivamente CSS (1)(2), que es mucho más liviano tanto en carga como en procesado. El problema en este caso es que que casi siempre hay que delimitar a priori la cantidad de imágenes a mostrar y en función de ese número ir reconstruyendo las reglas, algo que no está al alcance de todos.

Para ese caso que comento en el que sobre todo necesitábamos hacer algo sencillo, se me ocurrió aprovechar las características de Blogger para que sólo fuera cuestión de subir imágenes. Va a dar igual la proporción o tamaño que tengan, funcionará independientemte del posicionamiento que marqueis (centrado, flotado...) e incluso si llevan espaciados o saltos de líneas entre ellas; con sólo añadir un CSS a la página la galería saldrá siempre con el mismo formato y el lightbox propio de Blogger hará el resto ¿lo vemos?


Y si dije en el título de esta entrada que era sencillísimo, así va a ser. Sólo tenemos que seguir tres pasos, a cual más fácil:

1. Crear una página estática


Vamos al Escritorio de Blogger y accedemos a la opción del menú denominada Páginas. Una vez allí pinchamos en el botón Página nueva.

Crear una página estática


2. Añadir el CSS directamente en la página


Interpretar HTML en entradas
Para que el nuevo estilo no afecte a las entradas normales y sobre todo, para no complicarnos, pegamos este CSS directamente en la página.

La única precaución que tenemos que tener aquí es que en Configuración de la página tengamos seleccionada la opción Interpretar HTML escrito, aunque tampoco es imprescindible... creo.

Este código llama a los selectores que habitualmente usa Blogger para el cuerpo de entradas y las imágenes que en él podemos subir, así que si tu plantilla usa selectores distintos (no es muy habitual que cambien precisamente estos), puede que tengas que cambiarlos.

<!-- SIEMPRE MANTENER ESTAS LINEAS A PARTIR DE AQUÍ ** NO BORRAR -->
<!-- ESTILO PARA GALERIA. SUBIR IMAGENES DESDE EL EDITOR, DE CUALQUIER MANERA Y DEJAR HACER A ESTO -->
<style>.post-body * {-moz-box-sizing: border-box !important;-webkit-box-sizing: border-box !important;box-sizing: border-box !important;} .post-body {text-align: center !important;font-size:0 !important;line-height:0 !important;} .post-body br {height:0;width:0;display:none;} .post-body a, .post-body img, .post-body .separator, .post-body .separator a {clear:none !important; float: none !important; display: inline-block !important;*display: inline !important; zoom:1 !important; max-width: 100% !important;padding: 0 !important; margin:0 !important; border: 0 !important; font-size:0 !important;} .post-body img {width: 200px !important;max-width: 100% !important;height: auto !important;margin: 10px !important;background: white !important;padding: 10px !important;vertical-align: middle !important;-moz-box-shadow: 1px 1px 3px #999;-webkit-box-shadow: 1px 1px 3px #999;box-shadow: 1px 1px 3px #999;} </style>


3. Subir imágenes con el editor al libre albedrío


Ahora, una vez el CSS está en la página, ya sólo tenemos que añadir imágenes a discreción usando el correspondiente botón del editor.

Como decía al principio, dará igual que las alineemos a la derecha, a la izquierda, que las centremos, que le demos un tamaño u otro. Ese CSS que pusimos anulará todos los estilos que se pudieran insertar intencionada o accidentalmente y las imágenes se mostrarán con un ancho de 200px, centradas en el cuerpo de las entradas y centradas también en vertical con respecto a cada línea o fila.

Cierto es que no todas tendrán la misma forma si son distintas, pero para que fuera de otra manera tendríamos que deformarlas forzando su redimensión (.post-body img {height: 200px;}) y me pareció más elegante dejarlas sin distorsión aún a pesar de lo antes comentado.


Si posteriormente queremos añadir más imágenes sólo tenemos que editar la página y hacerlo. Lo único que habrá que tener en cuenta es que se puede eliminar todo lo que hayamos añadido, excepto el CSS. Una vez guardada o publicada la página, esas líneas sólo son visibles si usamos el editor desde la pestaña HTML. Desde la de Redactar serán invisibles.

Editor de entradas


Si queréis que os quepan más imágenes por línea sólo habría que modificar el valor 200px del CSS a otro menor (180px por ejemplo para cuerpos de entradas de unos 800px de ancho). Y no hay que preocuparse por otra cosa porque estas imágenes así montadas funcionan bien hasta en plantillas adaptables (RWD), ni siquiera porque en el editor las imágenes no se vean bien.



Y bien ¿qué os parece? ¿Es sencillo o no tener algo como lo siguiente?







<



Ante las numerosas consultas al respecto, una variante no tan para torpes pero que os permitirá poner texto en las entradas y además usar este tipo de galería en más de una entrada fácilmente.

Partimos de cero, así que obviando todo lo explicado anteriormente hacemos lo siguiente:

Editamos plantilla y justo antes de }]]></b:skin> insertamos el siguiente CSS:

.galeria * {-moz-box-sizing: border-box !important;-webkit-box-sizing: border-box !important;box-sizing: border-box !important;}
.galeria {text-align: center !important;font-size:0 !important;line-height:0 !important;}
.galeria br {height:0;width:0;display:none;}
.galeria a, .galeria img, .galeria .separator, .galeria .separator a {clear:none !important; float: none !important; display: inline-block !important;*display: inline !important; zoom:1 !important; max-width: 100% !important;padding: 0 !important; margin:0 !important; border: 0 !important; font-size:0 !important;}
.galeria img {width: 200px !important;max-width: 100% !important;height: auto !important;margin: 10px !important;background: white !important;padding: 10px !important;vertical-align: middle !important;-moz-box-shadow: 1px 1px 3px #999;-webkit-box-shadow: 1px 1px 3px #999;box-shadow: 1px 1px 3px #999;}

Guardamos los cambios

A partir de ahora, cuando queramos montar una galería, subimos las imágenes todas seguidas en la correspondiente entrada y una vez hecho, las "rodeamos" con un div con clase galeria. Por ejemplo:

<div class="galeria">

<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-o55VmZTvxFc/VYw0KTqdheI/AAAAAAAALR0/4ICNmZcP/s1600/_DSC8421-1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-o55VmZTvxFc/VYw0KTqdheI/AAAAAAAALR0/4ICNmZcP/s320/_DSC8421-1.jpg" width="212"></a></div>
<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-lqzYAfRkel8/VYw0KGtl_TI/AAAAAAAALR4/UTPKzyKY/s1600/_DSC8421-1LR.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-lqzYAfRkel8/VYw0KGtl_TI/AAAAAAAALR4/UTPKzyKY/s320/_DSC8421-1LR.jpg" width="212"></a></div>

</div>

Lo que está en negro es el código de las imágenes (visible desde la pestaña HTML del Editor de Entradas) que se inserta automáticamente al subir imágenes y lo que marqué en rojo es lo que habría que añadir a mano para que esas imágenes que quedan dentro aparezcan como se ven en el ejemplo de este post.

Todo el texto que quede dentro de esos div añadidos no saldrá, pero al contrario, el que quede fuera, se verá con normalidad.

¿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

167 comentarios :

  1. Felicidades Oloman! Le haz dado solución a una inquietante que desde años estaba dando vueltas en mi cabeza. Necesitaba aplicar esto, pero a las entradas. ¡Lo he conseguido! Por favor revisa el siguiente post y dime cómo me ha quedado. http://www.bancodeimagenesgratis.com/2014/07/30-imagenes-gratis-de-paisajes-flores.html Saludos en la distancia.

    ResponderEliminar
    Respuestas
    1. Bueno, pues estupendo. Realmente sirve para maquetar las imágenes de forma genérica, pero en esta entrada quise ofrecerlo como alternativa sencilla para montar galerías ;)

      Eliminar
    2. Espera... lo usaste en la propia entrada. En tu caso sería mejor ponerlo en la plantilla porque supongo que lo vas a usar siempre. El único cambio es que tendrías que eliminar el font-size:0 para que se pudiera ver el texto de las entradas.

      Eliminar
  2. ¡Genial!, en mi blog suelo publicar montones de fotos y me va a venir de maravilla.
    Solo me queda una duda. Al hacerlo, veo que a las imágenes les rodea un marco blanco, que en mi caso me gustaría eliminar.
    ¿Me podrías decir como hacerlo? y si ya de paso, puedes explicar las variables más importantes.
    Muchas gracias y felicidades.

    ResponderEliminar
    Respuestas
    1. Lo de las variables más importantes me da pereza, sinceramente, pero lo del marco lo eliminas quitando del código estas dos declaraciones: background: white !important;padding: 10px !important;

      Eliminar
  3. Saludos Oloman... como siempre tus estupendos post.. gracias por las imagenes y mira que con el visor de picasa se ven Geniales !!!!!!!!!!!! :)

    por otro lado quisiera abusar de tu sabiduria y bondad con un problemita que tengo en mi blog y es el siguiente...:

    hace ya varios dias cambie la plantilla de blogger por la que tengo ahora y el problema que me da es: al poner la primera linea en la descripcion de un post en "Negrta" para mejorar la busqueda de google en mis post.... esta no sale al darle publicar el post... no se si el error esta en la plantilla que uso para los post o es la plantilla de blogger que estoy usando.... osea no sale ningun texto en Negrita por si me enrede un poco.. jejejeje

    Agradeceria Enormemente tu ayuda a mi problema que por lo visto es grande..
    un Abrazo brother.. y sigue asi con estos temasos.. eres el mejor !!!!!!!!!

    ResponderEliminar
  4. xd disculpa se me olvido poner el nombre del Blog...

    blogdejoralgom.blogspot.com

    Gracias xd xd !!!!!!!!!!

    ResponderEliminar
    Respuestas
    1. A ver si te he entendido bien ¿lo que me dices es que en la descripción del post (en configuración de entrada) pones negrita y pretendes que salga con ese énfasis al compartir? Si es así me tendrías que decir si eso te ha funcionado alguna vez (antes de cambiar de plantilla) porque pienso que eso no debería funcionar nunca.

      Eliminar
    2. Saludos Oloman.... no es en configuracion de entrada... es la Descripcion del post tal cual... osea en cualquier texto que pongo como descripcion, Caracteristicas etc.. solo en esas partes... mil gracias por atenderme bro... DTB !!!!

      Eliminar
    3. Pues pienso que igualmente, al compartir en cualquier red el énfasis que puedas poner a los textos se pierde. Normalmente se convierte todo en texto plano.

      Eliminar
  5. Para mi la única necesidad seria una galería pero que en vez de usar fotos que le subamos que las use de un álbum que le pasemos por G+, resulta la mar de cómodo realizar fotos y añadirles títulos y comentarios pudiendo luego administrarla desde Google Fotos de manera cómoda :), al menos en mi web principal así gestiono varios álbumes y al final resulta lo mas comodo evitando posibles errores al no necesitar modificar en si mas la web ni el código, solo nuestros álbumes de G+

    ResponderEliminar
    Respuestas
    1. Hola Blackgem. Quizás te valga este antiguo plugin pero que sigue funcionando, tanto con Flickr, como con Picasa y este último es precisamente dónde van las imágenes de G+

      Eliminar
    2. ¿Debería haber un enlace que no encuentro?, si, da igual si es con Picasa o Google+, la idea es que una vez configurado en el código no sea necesario modificarlo mas pasando a gestionarlo desde Google Fotos/Picasa.
      Conozco varios pero exigen pago, flash, java u otras limitaciones.

      Si por mi fuera seria añadir x codigo plano de su propia api y luego formatear con css ^^, pero no doy para tanto :/

      Aun no entiendo como Google tiene tan descuidado Blogger cuando podrían haberle añadido fantásticas plantillas responsive design configurables y galerías propias con sus servicios. Con eso el servicio pegaría un salto cualitativo impresionante =D.

      Eliminar
    3. Sí, debería haberlo. Se me olvidó. Era este:
      http://www.oloblogger.com/2010/02/pictobrowser-galeria-y-slider.html

      Eliminar
    4. Por fin hoy estaba animándome a probarlo y... vaya, parecía interesante pero usa flash cosa impensable hoy día para el mercado movil. No comprendo como no hay una galeria "universal" libre la cual no permite luego añadir fuentes y mil origenes de manera comoda O.o, creo que soy demasiado novato aun :/

      Eliminar
    5. Puede que sí que haya una como la que quieres, pero yo no conozco otra distinta de la que te pasé. Lo siento.

      Eliminar
  6. Buenas Oloman!

    Veo que sigues trabajando a tope, enhorabuena :)

    Te quería consultar una duda... no sé si tiene nombre técnico por eso no encuentro información sobre si se puede o no se puede hacer.

    En mi próximo blog quiero mezclar diferentes temáticas, para unificar varios blogs que tengo por ahí perdidos. Así, querría meter en el mismo blog entradas de cocina, libros y variado (entre otros).

    Mi idea es poner en la página principal como tres bloques, para cada tipo de entrada. Y en cada bloque sólo saldrían una o dos entradas de cada etiqueta. Esto ya de por sí no lo sé hacer... pero como soy más rebuscada que todas las cosas me gustaría, además, dar un formato diferente a la vista previa de cada etiqueta. Por ejemplo, la entrada de cocina tendría una miniatura alargada, la de libros un rectángulo para la portada, etc.

    Es más fácil que cree directamente una página web? No? ^^U

    Gracias por leerme, y sé que lo he puesto realmente difícil! Así que no te preocupes si ni siquiera me entiendes......

    Un abrazo,
    Bea.

    ResponderEliminar
    Respuestas
    1. Bueno Bea, más fácil sí que es crear distintos sitios, pero lo que dices se puede hacer sin mucha dificultad, aunque es largo de explicar en detalle. Te esbozo lo que habría que hacer.

      Te haría falta un script que leyera el feed (por etiquetas) y hacer desaparecer las entradas de la página Inicio. Luego, añades gadgets HTML/JavaScript y en ellos utilizas ese script para que te cargue las entradas de cada etiqueta en cada uno. Luego ya es cuestión de darle estilo a cada gadget por separado.

      Este sitio usa eso ;)

      Eliminar
    2. He pensado muchas veces en ello, seria interesante conocer el código css o js en widget necesario para tener una pagina inicial a medida (yo siempre prefiero usar ello a modificar código de la plantilla en si, facilitando asi la personalización via GUI).

      Incluso aun mas interesante seria hacer algo responsive o falso responsivo mediante algunas modificaciones de css y html/js en widgets (ya que con estos podemos modificar anchos, posiciones y otros parámetros también).

      Eliminar
    3. Muchísimas gracias Oloman! Yo había probado a usar tu tutorial de añadir bloques de información, pero luego me perdía con el tema del formato y todo eso... Creo que realmente podré hacerlo como me has explicado!

      Blackgem Vindicare, llevo mucho tiempo dándole vueltas también, pero con mi nivel triste de CSS y de HTML no me veía capaz de lograrlo... y también creo que lo mejor es tocar la plantilla cuanto menos!

      En cuanto al móvil... tendré que revisarlo :S

      Gracias!!

      Eliminar
    4. El problema para explicar algo sobre lo de la página inicial a medida es que no hay un código estándar ya que se trata de hacer con HTML y CSS lo que cada uno desea.
      Para hacer desaparecer las entradas lo más fácil es condicionar toda la parte de la plantilla dentro de BLOG1 que genera las entradas para que no salga en portada y en el ELSE es dónde se puede meter el HTML de la portada alternativa.

      Lo del script para leer y mostrar ciertas entradas con cierto formato es otra cosa que tengo pendiente de publicar algún día, porque esa web que puse de ejemplo está parcialmente diseñada por un servidor ;)

      Mientras tanto... ¡suerte con ello Bea!

      Eliminar
  7. Saludos Bro Oloman.. primero que todo mil Gracias por contestar y segundo te comento que ya encontre el problema a my pregunta.. y es que la plantilla que uso para los post viene predeterminada con un tipo de letra en la parte de .. y lo que me estaba pasando era cuando cambiaba el tipo de letra por Edicion en : Arial sucedia lo incorrecto... muy raro pero bueno el error estaba alli... de Nuevo Gracias por contestar... Muy Amable DTB !!!

    ResponderEliminar
  8. Estupendo post! Me viene de perlas! Ya lo he probado y funciona perfectamente! Le he puesto leyendas a las fotos con el editor de Blogger y un enlace a la entrada en concreto para que me sirva como catálogo! Gracias por estos posts tan útiles!

    ResponderEliminar
  9. Oloman, cordial saludo. De pronto sepas o si sabes de algún otro, que me indique cómo hacer para que una foto que esté en una página o en una entrada, al clickar sobre esa foto, me abra otra pestaña para ampliarla o disminuirla y poderla bajar a mi PC. Un abrazo mi estimado amigo. Saludos, gracias por tu respuesta

    ResponderEliminar
    Respuestas
    1. Iván, no te hace falta nada más que tu ratón. Si pulsas botón derecho sobre la imagen y seleccionas "Guardar imagen...", ya lo tienes.

      Eliminar
  10. se puede poner en una entrada??

    ResponderEliminar
    Respuestas
    1. Perfectamente. Páginas estáticas y Entradas funcionan igual a estos efectos.

      Eliminar
  11. Buenas tardes, se podría poner de alguna manera una descripción en las imágenes?

    ResponderEliminar
    Respuestas
    1. ¿Te refieres a un pie de foto o al texto que sale cuando pasas por encima de una imagen?

      Eliminar
    2. Me refiero a la descripción de la foto, no a la propiedad Alt. Cualquier texto que escribo luego no aparece

      Eliminar
    3. Ah, OK.
      Eso es porque para "blindar" la galería eliminé todo lo que no fueran imágenes: espacios, saltos del línea, tablas... y también el texto. En el momento que arreglemos eso del texto descuadraría todo, pues el texto puede ser más o menos largo y las imágenes sería prácticamente imposible alinearlas como si no tuvieran texto.
      Si tienes la necesidad de incluirlo deberás usar este sistema. Este es para no complicarse.

      Eliminar
    4. Perdona, qué sistema me dices?

      Eliminar
    5. Perdón "este sistema" no, "otro sistema" quería decir. Sorry.

      Eliminar
    6. Ahh vale!, gracias de todas las maneras!. Un saludo

      Eliminar
  12. Hola Oloman, me iría bién las instrucciones para usarios más torpes todavía. Me he quedado en el paso 2, en lo del código y no tengo ni idea de que es un CSS

    Gracias

    ResponderEliminar
  13. 2. "...pegamos este CSS directamente en la página".
    En la página que has creado para la galería, simplemente pega ese código que puse dentro del recuadro.

    A partir de ahí sólo tienes que tener la precaución de no borrar nada de eso cuando subas imágenes a esa página.

    ResponderEliminar
  14. hola como estas mira te sigo y desde ya gracias pues me has ayudado un monto
    mira esto es lo que necesito para mi blog ,pero no se que parte estoy haciendo mal ,talvez es la plantilla no se ,te dejo mi link a ver si me das una mano pues quisiera poner esto abajo del slider
    desde ya gracias
    http://render-argento.blogspot.com.ar/
    aca te dejo mi blog
    saludos

    ResponderEliminar
    Respuestas
    1. Para no dar muchas vueltas, busca otro sistema. Este está pensado para montarlo en una página estática, no dentro de la plantilla.

      Eliminar
  15. JAJAJA TE PASASTE GRACIAS, ESTABA BUSCANDO ESTA PAGINA Y POR FIN LA ENCONTRE, BENDICIONES

    ResponderEliminar
  16. ¡Excelente! Fácil y práctico. Gracias por compartir.

    ResponderEliminar
  17. Oloman tengo una consulta. ¿Hay alguna posibilidad de escribir una entrada y al final de esta dejar una pequeña galería de imágenes con este estilo? He tratado de hacerlo pero no puedo

    ResponderEliminar
    Respuestas
    1. Pues fácil no, porque forcé todos los estilos para que nada interfiriera con la presentación de las imágenes y eso incluye el texto. Este tendrá tamaño cero y por tanto no se verá, pero es que incluso anulé los posibles saltos de línea (br). Con esos condicionantes es complicado poner un texto y por eso dije que era para una página estática.

      Para una entrada deberás usar otro tipo de galería distinta de esta. Hay muchas a poco que busques.

      Eliminar
    2. Pero entonces cómo es que José Luis consiguió escribir texto antes de la galería ???
      http://www.bancodeimagenesgratis.com/2014/07/30-imagenes-gratis-de-paisajes-flores.html
      Yo también lo he estado intentando y efectivamente no me permite visualizarlo (el texto escrito antes de las imáganes).

      Saludos.

      Eliminar
    3. El texto no se ve por el font-size:0; que incluye el código, pero es que sin él, las fotos descuadrarían. En el enlace que me pasas no hay texto DENTRO del cuerpo de la entrada. Sólo en el título.

      Eliminar
  18. Mas que gracias, lo conseguí y lo has hecho muy fácil aunque a mi me cuesta muchísimo esto de las "tecnologías.

    ResponderEliminar
  19. Muchas gracias me salvaste

    ResponderEliminar
  20. Hola, mil gracias. ¿Es posible incluir una imagen de mayor tamaño y diferentes propiedades al inicio de la página (es decir, a manera de título)?

    Saludos.

    ResponderEliminar
    Respuestas
    1. Con esto no fácilmente Gabriela. El motivo es que usé mucho código forzando muchas cosas para que pasara lo que pasara y pusierais lo que pusierais, la galería funcionara bien. Para opciones lo mejor sería hacer una galería en condiciones, no "a prueba de torpes".

      Eliminar
  21. Supongo que te refieres a la ventana modal o Lightbox que se abre a toda pantalla con fondo oscuro al pinchar en una de las imágenes, mostrando debajo una hilera con todas las imágenes del post que se pueden seleccionar. Si es así, este que viene de serie con Blogger no tiene opciones de ese tipo.

    ResponderEliminar
  22. Hola, muchas grácias por tu galeria. Hay alguna manera de poder poner una leyenda en el pie de foto?

    ResponderEliminar
    Respuestas
    1. Como dije en anteriores comentarios, Pere, hay mucho estilo forzado para evitar cualquier descuadre, así que esto es tal cual lo ves. No hay opciones.

      Eliminar
  23. Aquí está mi galería Oloman! He modificado un poco quitando los bordes a las fotos distanciando un poco unas de otras (margin y padding), estoy encantada de un vistazo mis futuros clientes pueden ver todos mis trabajaos sin tener que recorrer todo el blog! Aquí te dejo el enlace:

    La FELIZ IDEA ^_^

    Gracias!

    ResponderEliminar
  24. Excelente, súper bien explicado, muchas gracias... ojala hagas uno para verlas en la portada arriba..

    ResponderEliminar
    Respuestas
    1. ¿Para ver las qué...? ¿Una serie de imágenes pasando? A ver si va a ser esto.

      Eliminar
    2. Yo soy una Nakasan (Principiante jajaja) y este se me hizo dificil.. puse este http://dsdoramas.blogspot.com/ pero muchasssssssss gracias de todos modos.

      Eliminar
  25. Lo voy a probar, muchas gracias :) :)

    ResponderEliminar
  26. Hola,hola muchísimas gracias este post me encanto ya desde hace un tiempo quiero poner una especie de showroom en mi blog para compartir mis trabajos de manualidades, pero ya que tengo instalado el botón de pin it, al pasar el ratón sobre alguna foto este se vuelve gigantesco y estorboso...
    http://tuimaginaycrea.blogspot.mx/p/fofulapices_10.html
    Así que si te haces de en tiempecito y me puedes a y quieres ayudar te lo agradecería infinitamente gracias!!

    ResponderEliminar
    Respuestas
    1. Prueba a añadir esto a tu CSS:
      .post-body img[class="pinimg"] {
      width: 80px !important;
      }

      ...con la medida que quieras para ese width.

      Eliminar
    2. Muchísimas gracias Oloman disculpa las molestias, y me ha funcionado... saludos desde México.

      Eliminar
    3. Gracias a tí por decirlo, porque así compenso un poco el día chungo que llevo con otros comentarios.

      Eliminar
  27. Hola, en la galería de imágenes de esta página http://desvandelasfofuchas.blogspot.com.es he intentado hacer lo que has explicado aqui, pero me salen cada foto en hilera, y me gustaría que entraran mas de una en cada fila.
    He intentado hacer lo del codigo html, pero he metido tantas fotos, tengo que cambiar el px en cada una de ellas?

    que números tendría que reemplazar,y por cuales?
    Gracias

    ResponderEliminar
    Respuestas
    1. No Inés. Precisamente ideé esto para que no tuvierais que cambiar nada.
      Tú simplemente copia el código del paso 2 dentro de la página dónde tienes la galería y observa los resultados. Lo mejor es que lo hagas desde la pestaña HTML del editor. Mejor no uses la de REDACTAR.

      Eliminar
    2. Hola, ya si me salió, lo que pasa es que en firefox y en chrome se ve correctamente 2 fotos por fila, pero en explorer se ven hasta mas de 6 imágenes muy estrechas......
      eso tiene alguna solución?

      Eliminar
    3. Tendría que ver cómo y dónde lo hiciste Administrador...

      Eliminar
    4. Hola, lo tengo en blogger. Este es el blog que estoy haciendo:
      http://desvandelasfofuchas.blogspot.com.es/
      Me gustaría copiarte el código pero son demasiados caracteres y no entran.
      Gracias

      Eliminar
    5. Pero entonces ¿no se ve bien en Explorer o como dices ahora no puedes insertar mi código? Son dos problemas distintos los que planteas.

      Por mi cuenta encontré la página dónde creo que pusiste esto (http://desvandelasfofuchas.blogspot.com.es/p/blog-page_1.html) y en Explorer yo lo veo todo bien, así que tengo que achacarlo a que tienes una versión muy antigua de ese navegador. Yo tengo la 11

      Eliminar
    6. Si, entonces se debe a la versión del navegador de explorer que lo tengo un tanta antigua....
      Graicas

      Eliminar
  28. Super útil. Como mi blog es de un equipo de fútbol base, la voy a utilizar para las entradas en las que pongamos fotos de los partidos, entrenamientos, etcétera.
    La he probado en un borrador de prueba y queda fantástica.
    Muchísimas gracias.

    ResponderEliminar
  29. Lástima no poder añadirle texto a las entradas sin que todo se descuadre. Hubiera molado mucho, pero ya he leido en los comentarios anteriores que es difícil. De cualquier forma, pienso usarlo igual. Me parece estupendo.

    ResponderEliminar
  30. He ideado un pequeño truco para hacer que sea compatible con el texto.
    Probando, he visto que si haces un blockquote, el texto se queda encima de la galería, ya que el blockquote tiene su propio estilo.
    Pues bien, se me ha ocurrido copiar este estilo y modificarlo para que no saliera en cursiva, ni saliera la imagen de las comillas, que se pusiera con la misma fuente que utilizo en mis post, etc...
    Le he dado el nombre "textoengalerias" y lo he pegado en la parte de CSS, de esta manera:

    .post textoengalerias {

    color: #777777;
    font-family: 'Istok Web',sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 20px;
    margin-bottom: 20px;
    padding: 10px 10px 10px 10px;
    text-align: left;
    position: relative;
    }
    Ahora, lo único que tengo que hacer, es añadir lo siguiente, JUSTO ENCIMA DEL CÓDIGO DE ESTE ARTÍCULO:

    < textoengalerias > AQUI VA EL TEXTO < / textoengalerias > ( sin espacios en blanco dentro de las etiquetas) y ya puedo poner texto encima de la galería de fotos.
    Problema: Que no hace caso de los "intros", así que la parte de texto que no ocupe una línea completa (lo que pase a la línea siguiente) se alinea en altura con la primera imagen, que es una cosa que no consigo cambiar.
    A ver si alguien puede echarme una mano con eso. (intros y última línea)

    ResponderEliminar
  31. He encontrado una pequeña solución patatera para que la última línea de texto no quede alineada con la primera foto de la galería. Consiste hacer una tabla y poner en una celda el texto y en otra las imágenes.
    La tabla consiste en 2 filas y la he hecho así:
    < table > < tr > < td >
    Ahí meto el "< textoengalerias >" que comenté en el anterior mensaje
    < /td > < /tr >
    < tr > < td >
    y ahí meto el código para las galerías y subo las imágenes
    < /td > < /tr > < /table>

    Ahora ya sale arriba el texto y debajo la galería de imágenes, sin mayor problema.
    Lo que sigue sin funcionar es el tema de los intros y la alineación del texto, que sale centrada, pero poco a poco va cogiendo forma.

    ResponderEliminar
    Respuestas
    1. Para poder eliminar la tabla y que te funcione como quieres, a tu selector "textoengalerias" añádele un display:block;

      Si no funciona, que sea un display: block !important;

      Creo que con eso simplificarás la tarea ;)

      Eliminar
  32. Muchísimas gracias. Eres el amo.
    Ahora funciona perfecto.
    Me ha sido de gran ayuda.

    ResponderEliminar
    Respuestas
    1. Hola Atlético como estas??
      Serias tan amable de facilitarme el codigo completo con tu añadido?? Yo también necesito poner algo de texto encima de la galería, (que por cierto Oloman te pasate con esto!!! muchas gracias!!).
      Te pido el código completo Atlético porque no llego a entender del todo como hacerlo ya que no cuento con ningún conocimiento en html y nada de esto.....lo hago de curioso y a fuerza de ponerle ganas nada más...jeje.
      Espero me puedas ayudar! Gracias!!!

      Eliminar
  33. Hola, como estas? Antes que nada muchas gracias!!! me es muy útil esta galería.
    Una consulta....ademas del código este en la página....puedo poner texto normal?
    Para ser más claro, quiero poner una breve explicación, y luego pegar el texto para que me aparezca la galería. Como lo hago? Porque lo hice de la manera que te cuento y me desaparece descriptivo o el texto de css. Espero tu pronta respuesta y muchas gracias de nuevo. Exitos!!!

    ResponderEliminar
  34. Deseo concedido. Mira la actualización que acabo de publicar ;)

    ResponderEliminar
    Respuestas
    1. MUCHISIMAS GRACIAS!!!! EXCELENTE!!!

      Eliminar
    2. Oloman...ya aplique la actualización que nos diste. Estoy un paso más cerca....pero falta algo...ya quedó el texto antes de las imágenes, y las imágenes en miniaturas debajo del mismo en foma de galeria, PERO al hacerle clic a las mismas para que se amplíen no funciona. Te paso el link del blog para que lo veas a ver si me puedes ayudar.

      http://martincaporali.blogspot.com.ar/p/comprar.html

      Gracias de nuevo

      Eliminar
    3. Le faltan los enlaces a las imágenes Martín. Mira la diferencia entre el código que yo puse de ejemplo y el tuyo. Ninguna de tus imágenes lleva el A HREF...

      Eliminar
  35. Muchas gracias, me valio casi perfecto.
    Acabo de empezar a crear el blog como quien dice, soy fotógrafo, y entiendo muy poco de HTML y CSS

    He conseguido montar la galeria en la entrada, pero las imágenes me salen todas pegadas, sin ningún tipo de margen.

    He intentado modificar algunos parámetros del código CSS pero no lo he conseguido arreglar.

    me podrías explicar como se hace?

    Te dejo el enlace de la entrada en cuestión por si te sirve mas el ejemplo visual.

    Mil gracias!

    http://www.davidpereirafoto.com/2015/07/rally-avila-clasicos.html

    ResponderEliminar
    Respuestas
    1. En tu caso, David, simplemente con esto ya tendrás un margen:
      .galeria img {
      margin: 2px;
      }

      Eliminar
    2. Miles de gracias!!
      Aprovecho para hacerte otra pregunta :p
      Tengo otro blog www.salpikarte.com
      La plantilla es descargada de una página, he conseguido traducir todo, excepto el botón de la entrada "leer más" que en el caso de este blog pone "continue reading"
      En el código HTML no aparece "continue reading", indague por internet y encontre en el codigo CSS un apartado donde puedo darle estilos de fuente.
      Pero no consigo cambiar el nombre...sabrías donde tengo que cambiarlo?

      Mil gracias anticipadas

      Eliminar
    3. No logro ver eso desde este lado David. Probablemente sea un script el que te mete ese texto. Tendrás que buscar entre ellos.

      Eliminar
    4. Muchas gracias, perdona que sea tan pesado, pero es que me estoy volviendo loco jeje
      Pero me tiene que aparecer ese nombre? "continue reading"
      Porque con cmd+f no lo encuentro.
      El script también se mira donde el HTML? ( como verás estoy un poco pez en este tema)
      La plantilla no se si sirve de algo, es la Avant Garde...está por todos lados.
      Te agradezco enormemente la ayuda que brindas.
      Un abrazo

      Eliminar
    5. Ya te dije que yo no lo veo y eso quiere decir que en el fuente (o editando plantilla), no se puede ver. Supongo que tienes algún fichero .js, bien en la propia plantilla, bien dentro de un gadget, que lleva a un fichero externo y que ese es el tiene esa expresión.

      Eliminar
    6. Yo tengo ese mismo problema....no logré encontrar donde cambiar el "continue reading" y lo busque por todos lados..... :( ya no se que hacer....este es mi caso: http://martincaporali.blogspot.com.ar/
      Si alguien quiere ayudar...sera bien venido...

      Eliminar
    7. Hola Martín. Te ocurre lo mismo que a David... y es por la misma causa.
      En tu caso además vi un montón de scripts comprimidos por lo que lo más seguro es que esa leyenda de "Continue reading" esté en uno de ellos. El problema es que al estar comprimidos no podrás modificarlos.

      Eliminar
    8. Buenas tardes, yo de nuevo, jejeje He intentado combinar tu plantilla de página de inicio estática con la de galería para que mantuvieran la misma línea y no se vean las columnas laterales. Y me da dos fallos: las fotos pegadas (xq no sé dónde poner: .galeria img {margin: 2px;} ) y no me salen las palabras que enlazan a modo de pestañas a Inicio, galería, blog...
      Después de requeteleer los comentarios he visto que es una fórmula blindada, pero lo mismo sabes cómo puedo solucionarlo, confío en ti ;-)

      Eliminar
    9. Por cierto la página en cuestión es esta: http://evaricofoto.blogspot.com.es/p/nocturnas.html

      Eliminar
    10. Y una última petición (por si fueran pocas), ¿sería posible añadir un inabilitador del botón derecho para que no puedan guardarse las imágenes, ni arrastarlas?
      Muchas gracias de antemano.

      Eliminar
    11. Hola otra vez :)
      Actualmente no tienes en tu plantilla el código que propuse... o si lo tienes no está bien puesto. Has de seguir los pasos que puse en la actualización. Ni más ni menos.
      Lo del margin: 2px tienes que modificarlo/añadirlo en la parte CSS, precisamente dentro del selector .galeria img
      Sobre lo de deshabilitar el botón derecho, en esta entrada lo tienes explicado, pero precisamente ahí también digo que no sirve para nada...

      Eliminar
  36. Es posible que la hacer "Click" sobre la imagen ampliada nos lleve a un "link", como por ejemplo a una entrada donde se encuentre esa misma imagen?

    ResponderEliminar
    Respuestas
    1. Claro Luis. Sólo has de añadir ese enlace a la imagen... pero si lo preguntas así entiendo que no sabes cómo por lo que mejor que te pases por aquí.

      Eliminar
    2. Gracias. Lo he probado y no me gusta el resultado..

      He probado a añadir leyenda a la imagen, pero el lightbox de blogger no muestra la leyenda debajo. Lo que me serviría de enlace para una entrada.. Una pena... :(

      Mira mi pagina de prueba

      Un Saludo.

      Eliminar
    3. Es que queréis rizar el rizo. Insisto en que esta es una galería "para torpes", es decir, para no hacer nada con ella. Todo lo que queráis añadir la complica.

      De todas formas no entendí bien lo que decías, porque ahora creo que era que desde el Lightbox, la imagen enlazara a una dirección. Si es eso, ni idea de cómo hacerlo. Sí que la imagen puede enlazar o bien a otra dirección o bien a su réplica en grande, tal y como viste, pero ambas cosas encadenadas, dudo de que se pueda hacer... al menos fácilmente.

      Eliminar
    4. si.. a veces me complico yo solo...

      Muchas gracias de nuevo.

      Eliminar
  37. Otro que está usando tu galería, queda cojonuda, muchas gracias!

    ResponderEliminar
  38. Gracias. Aprendí a Añadir el CSS directamente en la página.

    ResponderEliminar
  39. Hola Oloman, necesito colocar en el blog una galería de imágenes en dos columnas y varias filas pero no en todas las entradas pues tengo entradas con diversos diseños: algunas con mucho texto y otras sin. Traté de colocar la explicación que das al comienzo y resultó, me dio mucha alegría pero luego vi que había cambiado todo el diseño del blog entero. Te paso la dirección del blog a ver si me puedes ayudar: http://jesusconducenuestrabarca.blogspot.com.ar/
    Me interesaría de ser posible si se puede cambiar solo en algunas entradas sin que afecte al resto del blog. Muchas gracias por todo. Clara

    ResponderEliminar
    Respuestas
    1. No, Kurara.

      Este código tal y como lo diseñé sólo es aplicable a páginas estáticas. De lo contrario, como comentas, puede afectar al diseño de la portada y otras páginas de navegación.

      Tendrás que buscar otro que te sirva :(

      Eliminar
  40. Hola, he podido implementar la galería utilizando el "div", pero cuando aparece el lightbox no carga ninguna imagen. Tanto en páginas estáticas como en publicaciones. Necesito ayuda porque me estoy quedando loco. He visto tus publicaciones de cuando el lightbox no funcionaba, pero yo he abierto el blog hace nada! Y eso fué en 2013 creo...

    De todas formas, me encanta tu blog. Un saludo!

    ResponderEliminar
    Respuestas
    1. Se me olvidó. Aquí tienes el enlace a la página de pruebas que tengo.

      http://edvelphotoandvideo.blogspot.com.es/p/blog-page_3.html

      Eliminar
    2. Hola Ed. No lo sé seguro, pero vi un script adicional en tu blog que tiene pinta de ser otro lightbox y quizás esté interfiriendo en el nativo de Blogger. Se llama query.swipebox.js.

      Eliminar
  41. GRACIAS ERES UN GENIO ME SIRVIÓ MUCHÍSIMO. LIKE

    ResponderEliminar
  42. Hola.
    Me parece una idea muy interesante, aunque yo busco un código en el que no haya que cargar las imágenes, sino que dentro del código pueda configurarse una ruta direccionada hacia alguna carpeta de imágenes ya existente dentro del blog, para que las imágenes mostradas, sean las contenidas en dicha carpeta.

    Saludos.

    ResponderEliminar
    Respuestas
    1. Hola Rey. Para eso habría que usar JavaScript.
      Básicamente se trataría de cargar las imágenes de la carpeta, aunque el problema estará -aparte de desarrollar el programa que no es muy difícil- en encontrar un sitio dónde alojar esas imágenes que te permita hotlink. Blogger no tiene directamente hosting para ello, pero quizás esta idea te podría servir.

      Eliminar
  43. Hola Oloman, Espero que ya hayas vuelto a retomar el ritmo después de las vacaciones, Tengo tu galería no para tan torpes y hay un dilema. pinterest o no pinterest! resulta que tengo el aplicativo de del botón pin it al hacer hover y he intentado de muchas formas ajustarlo para que salga bien, es decir, se ajuste correctamente a la imagen en el centro y se adapte bien. no sé que pueda hacer... intente jugar con los estilos @media de la imagen pero nada o no supe como te agradezco la ayuda o me des un indicio de cómo solucionarlo. la página en la que lo tengo es https://kangutingo.blogspot.com.co/2015/11/tejidos-en-crochet-para-grandes.html estaré atento a la respuesta, gracias.

    ResponderEliminar
    Respuestas
    1. Hola. Puedes probar añadiendo este CSS, pero como no sé que gadget usaste exactamente, no sabría como arreglarlo. Piensa que en esta galería todo está muy forzado para no dejar nada "en vuestras manos" ;)
      .pinit-wrapper {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      }

      Eliminar
    2. Hola Oloman, respecto al mismo tema, pero vengo con una propuesta, jajajaja lo que quiero es que cuando el boton pinit esté en el div de galería no aparezca, estuve indagando y encontré un código y estuve tratando de aplicarlo a mi plantilla pero no encuentro el chiste, no le doy cómo es: cuando lo pongo se desaparece el div de galería pero no hace lo que quiero que es ocultar el boton pinit solo en el div de galería, tambien habia probado con class="nopin" pero eso de ponerle a imagen por imagen es algo tedioso, dejo el enlace en donde saqué la info: http://www.lawebdelprogramador.com/codigo/CSS/2495-Mostrar-y-ocultar-un-elemento-utilizando-el-evento-hover-de-CSS.html
      y aqí está la adaptación del código que hice.
      .bs_pinOnHover,.galeria {
      display:none;
      padding:5px;
      border:1px solid #ccc;
      background-color:#f1f1f1;
      position:relative;
      width:200px;
      }
      #bs_pinOnHover {
      position:absolute;
      top:100px;
      }
      /* Al pasar el mouse por encima del div mostramos el div con la
      clase ".primero". Esta clase, tiene que estar dentro del id
      "primero" para que pueda funcionar
      */
      #bs_pinOnHover:hover .bs_pinOnHover {
      display:block;
      }
      #bs_pinOnHover:hover .galeria {
      display:block;
      }

      Rogando a Dios que haya forma de hacerlo, yo ya lo intenté... Un saludo, Gracias.

      Eliminar
    3. No creo que puedas modificar eso sólo con CSS. Por lo que recuerdo, el efecto ese de poner un botón de Pinterest automático, era un JavaScript. Lo que habría que hacer, si es posible, sería modificar ese JS para que en ciertas clases no actúe, al igual que lo hace con la clase "no-pin".

      Eliminar
    4. Buen apunte, no me había puesto a pensar en modificar el .js - y ahí va la duda, descargar el css y modificarlo bien yo lo hago, pero no sé que códico ponerle para que no aplique a la clase galeía. será que con:
      .bs_pinOnHover,.galeria {
      display:none;
      padding:5px;
      border:1px solid #ccc;
      background-color:#f1f1f1;
      position:relative;
      width:200px;
      } ...funcionará? porque no sé que código poner para que eso suceda.

      Eliminar
    5. No sé... Es que no veo dónde tienes la galería y dónde se ejecuta ese script. No me has dicho todavía dónde lo tienes y en un paso rápido por tu blog, no lo vi.

      Eliminar
  44. lo intente... pero tal como dices, está forzado a no dejarme. jajajajaj pero al menos encontré la forma de quitarle el fondo blanco y dejarlo en transparente, por ahora me va bien así. gracias. :D

    ResponderEliminar
  45. Muchas gracias! me sirvió de mucho. si quieres pasar por mi blog para ver como quedo te dejo el link. Gracias otra vez :)
    http://todossomoscazadoresdelibros.blogspot.com.ar/

    ResponderEliminar
  46. He seguido tus indicaciones y me han ido muy bien para crear una fotogalería en mi blog. ¡Muchas gracias! Ahora, ya para rizar el rizo, me gustaría saber si es posible que las imágenes de la fotogalería se voltearan al pasar el ratón, o al menos hicieran algún tipo de efecto para distinguirlas. Mi blog es: www.lasitakas.blogspot.com

    ResponderEliminar
    Respuestas
    1. Katiana, eso ya no es una galería sencilla, ni a prueba de torpes, pero por ayudarte con algo sencillo, añade esto dentro de las etiquetas STYLE:
      .post-body img {transition: .5s all;}
      .post-body img:hover {transform: rotateY(180deg);}

      Espero que te guste ;)

      Eliminar
  47. Ya, al final siempre termino liándome más de lo previsto jajaja Lo he hecho y funciona. ¡MUCHAS GRACIAS!

    ResponderEliminar
  48. Hola oloman,hombre por aquí con dudas. en su totalidad la galería ha sido el mejor implemento que tengo en mi blog (www.kangutingo.com) pero como trabajo con imagenes constantemente me hace lío tener que meterle unos códigos adicionales del lightbox... ya sabrás que hay blogs que ya tienen incluido éste código sin tener que checherear tanto y ponerle el rel=lightbox a cada imagen, porque eso si que es tarea engorrosa. Hombre la pregunta es: Cómo hago para tener el lightbox automatico para todas las imagenes sin tener que estar poniendo el atributo "rel" a cada imagen en las entradas? gracias de antemano, se que te demoras en ocaciones en contestar por el trabajo, pero tan pronto puedas decirme será bien recibida la respuesta. Un saludo. :)

    ResponderEliminar
    Respuestas
    1. Jhon, a ver si lo que explico en la última parte de este postz te sirviera de ayuda.

      Eliminar
    2. si!. solucionado y ademas que pude quitar el scrip de fancybox que le da lentitud a la carga. tuve que poner el código de otra manera porque me modificaba las posiciones del post, entonces lo que hice fue encerrar el que ya había dentro del nuevo que me dijiste : /div class='post-body entry' //div class='entry-content'//div///div// y solucionado, Todo funciona de maravilla. Muchas Gracias. en el transcurso de estos días agregaré un enlace rel=follow de tu web en la mía. Un saludo. :)

      Eliminar
    3. Vale... y agradecido :)

      Eliminar
    4. Hola oloman, se me había olvidado notificarte, aquí está el enlace: http://www.kangutingo.com/p/colaboradores-kangutingo.html , lo puse en la parte del blog que va con la tematica de webmastes, pensando en el SEO y todo eso, para que concuerde y sea relevante el link, o almenos eso pienso. Gracias por todo, y seguiré pasando de ven en cada que pueda para joder con mis dudas.

      Eliminar
  49. Gracias por este tuto, me ha sido muy util, estaba preparando toda la página con bootstrap, pero esta forma es aún más simple y resultado similar.
    Por cierto, para poder poner texto sin tener que editar html si pones el texto entre un h1...h6 también lo pilla, genial para poner descripción a las fotos etc....

    ResponderEliminar
    Respuestas
    1. :) Me alegro de que te fuera útil Gastre. Gracias por hacérmelo saber.

      Eliminar
  50. Oloman! Acabas de solucionarme un problema que siempre tuve (no saber como optimizar la visualización de imágenes) Super fácil y funciona de maravilla.
    Muchísimas gracias ¡Qué sería de mí sin tus tutoriales!

    ResponderEliminar
  51. hola Oloman, esto me lleva loco, lo he echo igual como lo pones y no hay manera, le doy a las fotos y mesalta fuera mi blog ocupando la foto en otra pagina, alguna solución?, gracias de antemano.
    mi blog: http://joselmastortosa-escultor.blogspot.com.es/p/figuras-20-cm_25.html

    ResponderEliminar
    Respuestas
    1. Hola Jose L.
      No te sabría decir qué pasa porque actualmente no veo que no tengas aplicado nada de esto que expliqué. Quizás es que no lo pusiste bien...

      Eliminar
    2. gracias por atenderme, no tengo nada por que he ido probando otros, que tampoco me funcionan,poniendo css y js en dropbox y llamandolo en la plantilla, nada de nada que no hay forma, y el caso es que funcionaba muy bien el de la propia plantilla, hasta que dejo de funcionar, si crees que hay alguna solución ,bien y si no te agradezco mucho tú interes, un saludo

      Eliminar
  52. ¿Tiras de archivos externos alojándolos en Dropbox? En ese caso te aviso de que llega un momento (tras un número de visitas determinado) en el que Dropbox deja de servir el archivo para evitar precisamente un excesivo hotlinking a su costa. Quizás ese es el motivo por el que te funcionaba lo que tenías y a veces no.

    Por lo demás, si sigues las instrucciones en la actualización última de este post, te debería funcionar tal y como ves en la demo... sin problemas.

    Si lo intentas y no funciona, déjalo que lo vea y avísame. Hazlo en una página de prueba para que no salga como entrada en tu blog. Así sólo lo veremos tú y yo (pásame el enlace).

    ResponderEliminar
  53. Hola la verdad gracias por el tutorial me ha servido mucho cx aqui dejo una muestra de como me quedo http://insidethebluemoon.blogspot.mx/p/insidemoon-films-portafolio.html

    ResponderEliminar
  54. Mil gracias Oloman!!! Llevaba un montón de tiempo buscando esto.

    ResponderEliminar
  55. Estimado Oloman! Este articulo es todo lo que he estado buscando! Gracias!!!
    Estoy armando un blog y segui todos los pasos que indicaste mas arriba, pero no funciona!!
    Este es el link directo a la pagaina http://hicaintegrada.blogspot.com.ar/p/blog-page_12.html
    Podrias darme una mano POR FAVOR!
    Segui todos los pasos tal como describes, pero no funciona.

    Desde ya te agradezco tu generosidad y ayuda! Y quedaras siempre en mis oraciones!! Y mis blogs si me pasas tus banner!

    GRACIAS!!! Espero tu respuesta lo antes posible!

    ResponderEliminar
    Respuestas
    1. Hola silvia, el problema radica en tu plantilla, hay un código que se llama z-indes. entonces para solucionarlo ve a edicion HTML, LUEGO PULSA Ctrl F y pega el siguiente código: #main { dentro de ese CSS (código) busca: z-index: 777; y borralo. es decir, debes quitar de tu plantilla HTML el código z-index: 777; y con eso tendrás solucionado tu incidencia. Un saludo, espero lo puedas solucionar.

      Eliminar
    2. Graciassss!!!! GRACIASSS!!!

      Pero solo se arreglo una parte, mira este es el link. (el anterior debia usarlo)

      http://hicaintegrada.blogspot.com.ar/p/reactores-con-sistema-de-agitacion.html

      Queda en medio la barra del menu principal. Hay modo de arreglarlo??

      Por favor digan que si lo hay! jajajajaaj

      Gracias nuevamente y espero y apelo a tu generosidad!!!

      Eliminar
    3. HOla Silvia, acabo de ver el mensaje. es lo mismo que lo anterior, y lo solucionas buscando éste código: #menu-primary { y quida lo que aparece z-index: 9999; eso es todo, debería funcionar, un consejo: entra a https://developers.google.com/speed/pagespeed/insights/ puedes mejorar la velocidad y la carga de tu página si reduces el tamaño de las imagenes o las comprimes, prueba mirar mi página y verás que a pesar de tener tantas imagenes carga rápido y aparece un un puntage superior a 90 en pagespeed.. link>>>> fulares kangutingo

      Eliminar
    4. Muchisimas gracias!!! Aunque estas 2 palabras no expresan el agradecimeinto que siento!!

      Funciona bien!!! GRACIASSS!!!!

      Si te parece bien sigamos en contacto asi me pasas tus banners y los instalo en mis blogs!!

      Gracias nuevamente!!! Y seguire tu concejo y reducire el tamaño de las fotos!

      Saludos desde Buenos Aires!

      Eliminar
    5. Una vez más, Kangutingo al rescate.

      Gracias por cubrir mi ausencia ;)

      Eliminar
  56. lighbox no funciona con urls externas aun manipulandolo dentro del html del post.. gracias por alguna ayuda

    ResponderEliminar
    Respuestas
    1. ola dick, cuál es el blog en el que te pasa eso?

      Eliminar
  57. Por si entendí lo que deseas es que al darle click al enlace de una página web se abra en tu misma web con ligthbox debes instalar el suplemento: Shadowbox: ventanas modales multimedia, el anterior si permite que se abra en tu misma web las url externas. ai que redirijo a éste enlace para que sepas lo que debes hacer: http://www.ciudadblogger.com/2010/04/shadowbox-ventanas-modales-multimedia.html *Repito; lighbox no te va a dejar con url externas. solo el Shadowbox, prueba y me dices si entendí la pregunta bien.

    ResponderEliminar
  58. Hola Oloman, he ido por post por post, buscando algo que me indique como hacer lo siguiente para ello te pongo el enlace: http://www.publiteca.es/ se trata de no abrir los post, sino que cuando pinches en las imágenes del post,pero sin abrir te lleven a una página distinta, sin llegar a entrar en el post a leer más, no sé si me explico muy bien, tú crees Oloman guapo! que ¿hay alguna forma?, digamos que como si el blog fuera todo una galeria.

    Que no haga perder el tiempo, quiero hacer un blog de estudio e ir poniendo en cada post la imagen hacia un enlace para descargar apuntes, tal como lo hace la pagina que te indique arriba, y asi no liarnos, te agradeceria la ayuda, ya tengo una plantilla que creo que es tuya esta: http://oloblogger-elegante.blogspot.com.es/ y con ella quiero hacer eso, no va a ser publica solo para mis compañeras de clase, pero para ir mas deprisa a la hora de buscar los apuntes, ¿se podría conseguir?.

    Muchas gracias aunque no tenemos aun blogs personales, solo pruebas, que sepas que en clase hicimos un blog solo con tus consejos por eso te conocemos, ibamos a contartelo pero nos daba verguenza, pues creamos un blog super chulo en final de curso, con una de tus plantillas para clase, solo como trabajo del instituto, nos lo pasamos muy bien, un abrazote de todas las chicas!! aprovechando

    ResponderEliminar
    Respuestas
    1. hola "mente" el maestro está ocupado seguramente, pero ahí te va el cable, agarrate bien: entra a http://ana-larana.blogspot.com.co y mira si así es que lo quieres y me cuentas

      Eliminar
    2. la plantilla tienes unos arreglos más avanzados como que ya es adaptable a cualquier pantalla y bobaditas adicionales. me disculpará Olomán, pero como es su trabajo ahí seguirán los créditos y bien si oloblogger desea compartir la mejora de la plantilla con todos incluyendo los créditos ;) ejjejeje con mucho gusto está disponible para todos. Un saludo.

      Eliminar
  59. ya Kangutingo es esa la que vamos a poner ya lo puse arriba, nos da igual que sea responsive porque va a ser privada para el insti, pero quiero que se abran los enlaces cuando pinches en las imagenes o en los post, y no ir a mas información entiendes, mejor mirate esta pagina http://www.publiteca.es/, si te fijas entras sin tener que leer todo el post, se trata de hacer un blog de apuntes, si cada vez que entramos tenemos que ir por post pues fijate que aburrimiento. De todas formas gracias pero leemos a Oloman, desde el post núm 1 hace mucho tiempo, y no hemos visto como hacer este truco, a lo mejor también te viene bien a ti, muchas gracias de todas formas guapa!

    ResponderEliminar
  60. si te fijas en http://ana-larana.blogspot.com.co está la misma plantilla que tu deseas y como la quieres que al darle click abra en una nueva pestaña. eso se puede hacer añadiend un target="_blanck" al código, pero hay un dilema, el código que genera la imagen es un java scrip y creo que no es posible añadir, hay que modificar gran parte del código, por eso te digo que si te interesa la plantilla de http://ana-larana.blogspot.com.co que es tal como quieres la tuya, te la puedo pasar. solome dices si te sirve. :) jajaja

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por el autor.

      Eliminar
  61. No, no Kangutingo, no me entiendes al darle al clic abre al post normal y corriente, como todas las plantillas al darle al post para abrirlo, yo quiero que vaya a otra pagina, no al post ¿entiendes?, si te fijas en el sitio que te puse http://www.publiteca.es/, puedes abrir el post como haces tún en tu blog, o puedes directamente desde portada abrir a otro sitio distinto enlazandolo, te agradezco pero prefiero saber lo que dice Oloman si contesta, o es que te dejo el blog a ti amiga?, un saludo gracias de todas formas, un besazo fuerte.

    ResponderEliminar
    Respuestas
    1. Pues yo tampoco entiendo muy bien lo que quieres Mente, pero quizás sea sólo cuestión de generar una galería como la de este post, pero añadiendo a cada imagen un enlace con el destino al que quieres ir al pinchar en cada una de ellas.

      Tras ver lo de Publiteca y lo de La Rana, eso es lo único que se me ocurre que puede ser lo que quieres hacer

      Eliminar
  62. Feliz Navidad ante todo a los dos!!. La explicacion es si os fijais en publiteca es la portada, no es una galeria, y si pinchas en "la imagen del libro" te lleva a la pagina donde esta la descarga del susodicho libro. Pero si pinchas en "el titulo" te lleva al post con la sinopsis, yo quiero que al pinchar la imagen te lleve a la pagina donde estan los apuntes del insti, sin tener que entrar al post, para no perder el tiempo.

    Ojala me pudiera explicar mejor pero ya no sé...

    De todas formas muchas gracias a los dos, repito Feliz Navidad, y un abrazo fuerte.-

    ResponderEliminar
    Respuestas
    1. Ahora sí entendí lo que quieres hacer. Se puede hacer, pero eso requiere de una modificación importante de la plantilla que es casi imposible que pueda explicarte por aquí. Lo siento Mente. Felices fiestas

      Eliminar
  63. GRACIAS GRACIAS GRACIAS !!!!:::
    ME DIVERTÍ MUCHO CADA VEZ QUE LEÍA PARA TORPES ! XDDDDD
    me sirve ... pero como retiro el borde...?

    así como para torpes ?
    XD

    PS: www.noavys.blogspot.com (en mis recetas para Torpes xD )

    ResponderEliminar
    Respuestas
    1. Hola Noavy. Por lo que vi en tu blog, creo que ya lo has averiguado.

      Las imágenes salen con borde si en tu blog el estilo está definido para que salgan todas con borde. Si el resto te salen sin borde no tendrás que hacer nada, como creo que pasó en tu caso.

      De todas formas por si se quiere poner diferente al resto, el borde se puede poner añadiendo a todo el código anterior, este:
      .post-body img {border: 10px !important;}

      O al contrario, para quitarlos:
      .post-body img {border: 0 !important;}

      Eliminar
  64. Hola Oloman, tengo una duda que incluso no sé si tiene buena solución.

    https://atuspiesreina.blogspot.com.es este es mi blog en el cual, como puedes ver, tengo un menú/abecedario para buscar distintos nombres. Si pincho, por ejemplo en la "A" me lleva a una pagina estática en la que inserte un código de cuadrícula para poder ver las fotos de distintos personajes y sus nombres.

    Actualmente lo estoy haciendo de manera manual, es decir, cada personaje que publico, pongo su miniatura en su orden alfabético pero moviendo las casillas posteriores para que quede en su lugar correcto.

    Esto que hago manualmente, no hay forma que me lo haga automáticamente, es decir, pongo la miniatura en la ultima casilla y dando en "actualizar" me lo ponga en su lugar alfabético correcto.

    Lo digo porque cuando se trata de una cuadrícula con pocos nombres, es sencillo y rápido pero cuando se trata de una cuadrícula con 20 nombres y la nueva está en el lugar 12, se ralentiza mucho el trabajo.

    Un saludo y de antemano, gracias.

    ResponderEliminar
    Respuestas
    1. Hola. Tal y como lo haces, con una tabla, no hay forma de automatizar eso.

      A mí lo más fácil que se me ocurre sería que etiquetaras cada post con A, B, C, etc. y que luego ya usaras alguna utilidad como esta. Si te fijas, los posts salen por orden alfabético, así que si quieres que en cada página sólo te salieran las personas de la A, el feed que habría que usar sería el de esa etiqueta concreta.

      Eliminar
    2. Ya, así empecé a hacerlo...etiquetando con A,B,C... pero eso lo único que me lleva es a que todos los nombres con la A estén en el mismo conjunto de esa letra si pinchas en ella.

      Pero lo que quiero es que, si tengo un conjunto de nombres (p.e. 35) con la A, si meto uno nuevo, meterlo en último lugar y que, al actualizar la pag. aparezca en su orden alfabético p.e. el 15 y no lo tenga que hacer yo manualmente.

      Salu2

      Eliminar
    3. No sé si viste el enlace que te puse, pero la idea es otra. Lo que te propongo no es que pongas las entradas a mano y que algo te las ordene automáticamente. La idea que te presto es que TODO sea automático. Dale un repaso a lo que intenté explicar en mi anterior comentario.

      Eliminar
  65. Hola, lo probé y ¡excelente! pero me gustaría 'personalizar' este efecto.

    ¿Como sería para que NO SALGA debajo el 'menú' de imágenes, ni la numeración?

    Es decir, solamente el fondo negro y la foto que se tocó (o hizo click).

    Gracias.

    ResponderEliminar
    Respuestas
    1. Prueba accediendo al Escritorio > Configuración > Entradas, comentarios y elementos compartidos > Mostrar imágenes con Lightbox > No

      Con eso desactivaras ese efecto que comentas.

      Eliminar
  66. Hola,
    me interesaría poder escribir una leyenda en cada fotografía, pero incluyendo este código no puedo hacerlo.
    ¿Habría alguna forma de conseguirlo?
    Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola Felipe. Sí, forma hay, pero como dices no con este código. Este es para lo que es, para montar una "galería" sin saber nada de programación.

      Por otra parte Blogger ya tiene una utilidad para añadir pie de imagen a las fotografías que añades a tus entradas. Es la opción denominada "leyenda".

      Eliminar
  67. buenas tardes oloman, la semana pasada conseguí usar tu codigo para crear la galeria que queria pero tuve un problema y es que todas las fotografias del blog cogieron el formato del marco blanco y queria volver a dejarlo como estaba. Alguna idea de porqué me pasó eso? Muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola Marina. Supongo que te pasó porque no pusiste el código CSS en UNA ENTRADA como comenté, sino que lo añadiste al CSS general de la página.

      Si el problema es sólo el marco blanco, del primer código que di quita exactamente esto:
      background: white !important;padding: 10px !important;

      Si el problema es eso y más cosas, entonces te sugiero que utilices el código que di en la actualización.

      Eliminar
  68. Hola!
    La primera opción de la galería (solo fotos) me funciona sin problemas.
    Pero lo de poder añadir texto antes de la galería (o después) no acabo de entender cómo hacerlo.
    Escribo ese código nuevo nuevo antes del anterior en la página?
    Donde está "}]]>!

    ResponderEliminar
    Respuestas
    1. Hola. Esos símbolos los encontraras si -como explica el tutorial- editas tu plantilla desde el Escritorio Blogger.

      De todas formas, si vas a seguir trasteando con tu diseño te conviene darte una vuelta por esta otra explicación: http://www.oloblogger.com/2016/08/guia-blogger-donde-incluir-css-html-javascript.html

      Eliminar
  69. Yo cree una galeria de imagenes al lado de la descripcion para una web de anuncios y me quedo buenisima: https://mercaautos.blogspot.com/2018/09/vendo.html#more

    ResponderEliminar
  70. Hola por casualidad me puedes dar la misma solución para worpress, gracias, me funciona en blogger pero no en worpress

    ResponderEliminar