.post-body:first-letter { float:left; color: #333333; font-size:100px; font-family:none; line-height:80px; padding-top:1px; padding-right:5px; } font-style: italic; } span.letracapital{ float: left; font-size: 40px; line-height: 35px; /* Dobla el alto de linea menos 1 pixel */ font-family: Georgia, "Times New Roman", Times, serif; color: #2583ad; /* Azul */ padding-right: 5px; } -->

Recent Posts

20 sept 2019
Indice HTML Plantillas


 

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.


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/AVvXsEjlLPAOHmrmscjvbdOdGxnWCSHwZukrv6HcQpX0UTPNBkDGEqkD4RuLD1p1s_Kdms_nAaiHOW2R237Ab5cWwPQAc35-6CsZznW3un2zVhFgUZt-705rghoxZL1XboDdSNwAX2TaJKHUZOE/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.

No hay comentarios:

Publicar un comentario

Deja tu comentario y en breve te contestaremos