Galeria de imágenes en tus entradas

Hoy vamos a explicar como podemos poner una sencilla galería de imágenes en nuestras entradas.

Simplemente tenemos que modificar nuestra plantilla HTML
Como siempre digo antes de realizar algún cambio en nuestra plantilla, tenemos que hacer una copia de seguridad de la misma, por si algo nos nos sale bien.



Lo explico paso a paso en este post.

Ahora que  ya tenemos nuestra copia de seguridad en un sitio a salvo,
procedemos a cambiar el código de nuestra plantilla.
Lo primero que tenemos que hacer es:

Tema> HTML>
y buscamos  </head> y justo antes pegamos este código:

<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>

 Guardamos la plantilla.
Ahora cada vez que escribamos una entrada nueva y queramos poner esta galería tenemos que añadir en el editor HTML este otro código:

<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>

Cambiamos URL IMAGEN marcado en rojo, por la Url de la imágen que queramos poner.
Y TITULO IMAGEN por el título que le queramos dar a la foto.

Y ya lo tenemos .
Fácil verdad?





Indice HTML Plantillas