Estás leyendo Sencilla galería de imágenes en tus entradas, en Entradas
Sencilla galería de imágenes en tus entradas
Desde que vimos como instalar una mini-galería de imágenes o slideshow en la barra lateral del blog muchos preguntaron si podría incluirse en una entrada. Por desgracia, la apariencia que debería tener la galería se pierde al mostrarla en un post y las imágenes suelen desordenarse.
Y bueno, después de haber estado unas horas frente al blog de pruebas aquí les traigo esta novedosa aplicación: un álbum o galería de imágenes sólo para entradas.
Una de las ventajas que ofrece el truco es que las imágenes cargarán a mayor velocidad.
Comprueba aquí el resultado:
La instalación es sorprendentemente rápida y sencilla.
Busca la etiqueta </head> en tu plantilla y justo antes añade esto:
Ahora guarda la plantilla. Accede a la entrada en la que te gustaría mostrar el álbum o crea una nueva para comprobar el resultado.
Este es el código necesario:
Reemplaza en cada caso URL IMAGEN X con la dirección de tu imagen (debe introducirse dos veces) y TITULO IMAGEN X con el texto que aparecerá bajo cada fotografía.
En caso de querer mostrar más imágenes, haz uso de otro bloque como este dado que únicamente puedes insertar cuatro imágenes en cada álbum (pero un número ilimitado de éstos últimos).
No olvides que al poner este código en la entrada, debes hacerlo en la pestaña de 'Edición de HTML' y no en la de 'Redactar'.
Pulsa el botón Publicar y listo
Y bueno, después de haber estado unas horas frente al blog de pruebas aquí les traigo esta novedosa aplicación: un álbum o galería de imágenes sólo para entradas.
Una de las ventajas que ofrece el truco es que las imágenes cargarán a mayor velocidad.
Comprueba aquí el resultado:
La instalación es sorprendentemente rápida y sencilla.
Diseño>Edición de HTML>expandimos artilugios
Busca la etiqueta </head> en tu plantilla y justo antes añade esto:
<link href='https://sites.google.com/site/editoriosus/fds/blJJGaleriaartic1.css' media='screen' rel='stylesheet' type='text/css'/><style type='text/css'>.blJJTeGaleris img {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwG6AJT4W2kp3RYNtvBUCeWS5MWau3reF1niSY2x_CLnQY2FN4e5y1KRbhzfPMWOvX3Y309oAvxoXbFfF8RYZdr90oDxBDAGp3ks4tb6ExsqaHmbgtoJXxe8KOxG8vxDCM9EO8cHR2iBQ/s320/balcnminiaut.png") no-repeat scroll 0 0 transparent;}</style>
Ahora guarda la plantilla. Accede a la entrada en la que te gustaría mostrar el álbum o crea una nueva para comprobar el resultado.
Este es el código necesario:
<div id="balCCGaleriaJaim1">
<a href="javascript:void(0);" class="blJJTeGaleris"><img width="100" src="URL IMAGEN 1"><span><img width="380" src="URL IMAGEN 1"><br>TITULO IMAGEN 1</span></a><a href="javascript:void(0);" class="blJJTeGaleris"><img width="100" src="URL IMAGEN 2"><span><img width="380" src="URL IMAGEN 2"><br>TITULO IMAGEN 2</span></a><a href="javascript:void(0);" class="blJJTeGaleris"><img width="100" src="URL IMAGEN 3"><span><img width="380" src="URL IMAGEN 3"><br>TITULO IMAGEN 3</span></a><a href="javascript:void(0);" class="blJJTeGaleris"><img width="100" src="URL IMAGEN 4"><span><img width="380" src="URL IMAGEN 4"><br>TITULO IMAGEN 4</span></a>
</div>
Reemplaza en cada caso URL IMAGEN X con la dirección de tu imagen (debe introducirse dos veces) y TITULO IMAGEN X con el texto que aparecerá bajo cada fotografía.
En caso de querer mostrar más imágenes, haz uso de otro bloque como este dado que únicamente puedes insertar cuatro imágenes en cada álbum (pero un número ilimitado de éstos últimos).
No olvides que al poner este código en la entrada, debes hacerlo en la pestaña de 'Edición de HTML' y no en la de 'Redactar'.
Pulsa el botón Publicar y listo
0 comentarios:
Publicar un comentario
¡Gracias por comentar!