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.
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.
2. Añadir el 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>
<!-- 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.
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:
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:
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.
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;}
.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>
<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.
Y muchos más artículos interesantes si nos sigues en...
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.
ResponderEliminarBueno, 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 ;)
EliminarEspera... 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¡Genial!, en mi blog suelo publicar montones de fotos y me va a venir de maravilla.
ResponderEliminarSolo 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.
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;
EliminarPara 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+
ResponderEliminarHola 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¿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.
EliminarConozco 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.
Sí, debería haberlo. Se me olvidó. Era este:
Eliminarhttp://www.oloblogger.com/2010/02/pictobrowser-galeria-y-slider.html
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 :/
EliminarPuede que sí que haya una como la que quieres, pero yo no conozco otra distinta de la que te pasé. Lo siento.
EliminarA 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.
ResponderEliminarBuenas Oloman!
ResponderEliminarVeo 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.
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.
EliminarTe 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 ;)
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).
EliminarIncluso 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).
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!
EliminarBlackgem 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!!
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.
EliminarPara 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!
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.
ResponderEliminarEstupendo 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!
ResponderEliminarOloman, 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
ResponderEliminarIvá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.
Eliminarse puede poner en una entrada??
ResponderEliminarPerfectamente. Páginas estáticas y Entradas funcionan igual a estos efectos.
EliminarBuenas tardes, se podría poner de alguna manera una descripción en las imágenes?
ResponderEliminar¿Te refieres a un pie de foto o al texto que sale cuando pasas por encima de una imagen?
EliminarMe refiero a la descripción de la foto, no a la propiedad Alt. Cualquier texto que escribo luego no aparece
EliminarAh, OK.
EliminarEso 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.
Perdona, qué sistema me dices?
EliminarPerdón "este sistema" no, "otro sistema" quería decir. Sorry.
EliminarAhh vale!, gracias de todas las maneras!. Un saludo
EliminarHola 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
ResponderEliminarGracias
2. "...pegamos este CSS directamente en la página".
ResponderEliminarEn 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.
hola como estas mira te sigo y desde ya gracias pues me has ayudado un monto
ResponderEliminarmira 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
Para no dar muchas vueltas, busca otro sistema. Este está pensado para montarlo en una página estática, no dentro de la plantilla.
EliminarJAJAJA TE PASASTE GRACIAS, ESTABA BUSCANDO ESTA PAGINA Y POR FIN LA ENCONTRE, BENDICIONES
ResponderEliminar¡Excelente! Fácil y práctico. Gracias por compartir.
ResponderEliminarOloman 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
ResponderEliminarPues 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.
EliminarPara una entrada deberás usar otro tipo de galería distinta de esta. Hay muchas a poco que busques.
Pero entonces cómo es que José Luis consiguió escribir texto antes de la galería ???
Eliminarhttp://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.
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.
EliminarMas que gracias, lo conseguí y lo has hecho muy fácil aunque a mi me cuesta muchísimo esto de las "tecnologías.
ResponderEliminarMuchas gracias me salvaste
ResponderEliminarHola, 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)?
ResponderEliminarSaludos.
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".
EliminarSupongo 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.
ResponderEliminarHola, muchas grácias por tu galeria. Hay alguna manera de poder poner una leyenda en el pie de foto?
ResponderEliminarComo dije en anteriores comentarios, Pere, hay mucho estilo forzado para evitar cualquier descuadre, así que esto es tal cual lo ves. No hay opciones.
EliminarAquí 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:
ResponderEliminarLa FELIZ IDEA ^_^
Gracias!
¿Para ver las qué...? ¿Una serie de imágenes pasando? A ver si va a ser esto.
ResponderEliminarHola,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...
ResponderEliminarhttp://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!!
Prueba a añadir esto a tu CSS:
Eliminar.post-body img[class="pinimg"] {
width: 80px !important;
}
...con la medida que quieras para ese width.
Muchísimas gracias Oloman disculpa las molestias, y me ha funcionado... saludos desde México.
EliminarGracias a tí por decirlo, porque así compenso un poco el día chungo que llevo con otros comentarios.
EliminarHola, 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.
ResponderEliminarHe 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
No Inés. Precisamente ideé esto para que no tuvierais que cambiar nada.
EliminarTú 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.
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......
Eliminareso tiene alguna solución?
Tendría que ver cómo y dónde lo hiciste Administrador...
EliminarHola, lo tengo en blogger. Este es el blog que estoy haciendo:
Eliminarhttp://desvandelasfofuchas.blogspot.com.es/
Me gustaría copiarte el código pero son demasiados caracteres y no entran.
Gracias
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.
EliminarPor 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
Si, entonces se debe a la versión del navegador de explorer que lo tengo un tanta antigua....
EliminarGraicas
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.
ResponderEliminarLa he probado en un borrador de prueba y queda fantástica.
Muchísimas gracias.
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.
ResponderEliminarHe ideado un pequeño truco para hacer que sea compatible con el texto.
ResponderEliminarProbando, 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)
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.
ResponderEliminarLa 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.
Para poder eliminar la tabla y que te funcione como quieres, a tu selector "textoengalerias" añádele un display:block;
EliminarSi no funciona, que sea un display: block !important;
Creo que con eso simplificarás la tarea ;)
Muchísimas gracias. Eres el amo.
ResponderEliminarAhora funciona perfecto.
Me ha sido de gran ayuda.
Hola Atlético como estas??
EliminarSerias 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!!!
Hola, como estas? Antes que nada muchas gracias!!! me es muy útil esta galería.
ResponderEliminarUna 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!!!
Deseo concedido. Mira la actualización que acabo de publicar ;)
ResponderEliminarMUCHISIMAS GRACIAS!!!! EXCELENTE!!!
EliminarOloman...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.
Eliminarhttp://martincaporali.blogspot.com.ar/p/comprar.html
Gracias de nuevo
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...
EliminarMuchas gracias, me valio casi perfecto.
ResponderEliminarAcabo 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
En tu caso, David, simplemente con esto ya tendrás un margen:
Eliminar.galeria img {
margin: 2px;
}
Miles de gracias!!
EliminarAprovecho 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
No logro ver eso desde este lado David. Probablemente sea un script el que te mete ese texto. Tendrás que buscar entre ellos.
EliminarMuchas gracias, perdona que sea tan pesado, pero es que me estoy volviendo loco jeje
EliminarPero 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
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.
EliminarYo 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/
EliminarSi alguien quiere ayudar...sera bien venido...
Hola Martín. Te ocurre lo mismo que a David... y es por la misma causa.
EliminarEn 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.
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...
EliminarDespué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 ;-)
Por cierto la página en cuestión es esta: http://evaricofoto.blogspot.com.es/p/nocturnas.html
EliminarY 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?
EliminarMuchas gracias de antemano.
Hola otra vez :)
EliminarActualmente 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...
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?
ResponderEliminarClaro 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í.
EliminarGracias. Lo he probado y no me gusta el resultado..
EliminarHe 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.
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.
EliminarDe 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.
si.. a veces me complico yo solo...
EliminarMuchas gracias de nuevo.
Otro que está usando tu galería, queda cojonuda, muchas gracias!
ResponderEliminarGracias. Aprendí a Añadir el CSS directamente en la página.
ResponderEliminarHola 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/
ResponderEliminarMe 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
No, Kurara.
EliminarEste 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 :(
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...
ResponderEliminarDe todas formas, me encanta tu blog. Un saludo!
Se me olvidó. Aquí tienes el enlace a la página de pruebas que tengo.
Eliminarhttp://edvelphotoandvideo.blogspot.com.es/p/blog-page_3.html
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.
EliminarGRACIAS ERES UN GENIO ME SIRVIÓ MUCHÍSIMO. LIKE
ResponderEliminarHola.
ResponderEliminarMe 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.
Hola Rey. Para eso habría que usar JavaScript.
EliminarBá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.
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.
ResponderEliminarHola. 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" ;)
Eliminar.pinit-wrapper {
position: absolute !important;
top: 0 !important;
left: 0 !important;
}
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
Eliminary 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.
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".
EliminarBuen 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:
Eliminar.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.
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.
Eliminarlo 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
ResponderEliminarMuchas gracias! me sirvió de mucho. si quieres pasar por mi blog para ver como quedo te dejo el link. Gracias otra vez :)
ResponderEliminarhttp://todossomoscazadoresdelibros.blogspot.com.ar/
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
ResponderEliminarKatiana, 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:
Eliminar.post-body img {transition: .5s all;}
.post-body img:hover {transform: rotateY(180deg);}
Espero que te guste ;)
Ya, al final siempre termino liándome más de lo previsto jajaja Lo he hecho y funciona. ¡MUCHAS GRACIAS!
ResponderEliminarHola 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. :)
ResponderEliminarJhon, a ver si lo que explico en la última parte de este postz te sirviera de ayuda.
Eliminarsi!. 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. :)
EliminarVale... y agradecido :)
EliminarHola 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.
EliminarGracias 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.
ResponderEliminarPor 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....
:) Me alegro de que te fuera útil Gastre. Gracias por hacérmelo saber.
EliminarOloman! 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.
ResponderEliminarMuchísimas gracias ¡Qué sería de mí sin tus tutoriales!
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.
ResponderEliminarmi blog: http://joselmastortosa-escultor.blogspot.com.es/p/figuras-20-cm_25.html
Hola Jose L.
EliminarNo 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...
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¿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.
ResponderEliminarPor 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).
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
ResponderEliminarVisto y "bienfuncionando" ;)
EliminarMil gracias Oloman!!! Llevaba un montón de tiempo buscando esto.
ResponderEliminarEstimado Oloman! Este articulo es todo lo que he estado buscando! Gracias!!!
ResponderEliminarEstoy 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!
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.
EliminarGraciassss!!!! GRACIASSS!!!
EliminarPero 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!!!
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
EliminarMuchisimas gracias!!! Aunque estas 2 palabras no expresan el agradecimeinto que siento!!
EliminarFunciona 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!
Una vez más, Kangutingo al rescate.
EliminarGracias por cubrir mi ausencia ;)
lighbox no funciona con urls externas aun manipulandolo dentro del html del post.. gracias por alguna ayuda
ResponderEliminarola dick, cuál es el blog en el que te pasa eso?
EliminarPor 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.
ResponderEliminarHola 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.
ResponderEliminarQue 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
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
Eliminarla 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.
Eliminarya 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!
ResponderEliminarsi 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
ResponderEliminarEste comentario ha sido eliminado por el autor.
EliminarNo, 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.
ResponderEliminarPues 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.
EliminarTras ver lo de Publiteca y lo de La Rana, eso es lo único que se me ocurre que puede ser lo que quieres hacer
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.
ResponderEliminarOjala me pudiera explicar mejor pero ya no sé...
De todas formas muchas gracias a los dos, repito Feliz Navidad, y un abrazo fuerte.-
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
EliminarGRACIAS GRACIAS GRACIAS !!!!:::
ResponderEliminarME 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 )
Hola Noavy. Por lo que vi en tu blog, creo que ya lo has averiguado.
EliminarLas 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;}
Hola Oloman, tengo una duda que incluso no sé si tiene buena solución.
ResponderEliminarhttps://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.
Hola. Tal y como lo haces, con una tabla, no hay forma de automatizar eso.
EliminarA 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.
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.
EliminarPero 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
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.
EliminarHola, lo probé y ¡excelente! pero me gustaría 'personalizar' este efecto.
ResponderEliminar¿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.
Prueba accediendo al Escritorio > Configuración > Entradas, comentarios y elementos compartidos > Mostrar imágenes con Lightbox > No
EliminarCon eso desactivaras ese efecto que comentas.
Hola,
ResponderEliminarme 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.
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.
EliminarPor 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".
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
ResponderEliminarHola 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.
EliminarSi 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.
Hola!
ResponderEliminarLa 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á "}]]>!
Hola. Esos símbolos los encontraras si -como explica el tutorial- editas tu plantilla desde el Escritorio Blogger.
EliminarDe 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
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
ResponderEliminarHola por casualidad me puedes dar la misma solución para worpress, gracias, me funciona en blogger pero no en worpress
ResponderEliminarBuenísima galeria para torpes, ya estaba cansado de tablas. No saqbia como ajustar el tamaño de las imágenes, fabuloso!!
ResponderEliminar