Galeria de imagens com botões

Clique nos botões e veja o efeito desta galeria de imagens. Ela póde ser adaptada com imagem defundo, trocar as cores dos botões e trocar o tamanho para caber suas imagens.Serve para o post e para a sidbar.

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

Para ter uma assim é bem fácilopie o primeiro código vá até o HTML do seu blog e cole antes de: ]]></b:skin>

.galleryHcontenedor {
width: 480px;
/* el ancho total */
height: 400px;
/* el alto total */
margin: 0px auto;
background: #EEEEEE url(CASO QUEIRA PODERÁ COLOCAR AQUI UM ENDEREÇO DE IMAGEM PARA FUNDO A SUA GALERIA) no-repeat scroll 0px 0px;
/* la imagen por defecto */
border: 1px solid #AAAAAA;
text-align: center;
}
.galleryH {
position: relative;
width: 480px;
/* el ancho de las imágenes */
margin: 360px 0px 0px 0px;
/* el margen superior es igual al alto de la imagen */
padding: 0;
list-style-type: none;
}
.galleryH img {
border:none;
}.galleryH li {
float:left;
}
/* estas son las propiedades gráficas de los números inferiores */
.galleryH li a,
.gallery li a:visited {
float: left;
width: 32px;
margin: 6px 2px 0px;
padding: 3px 0;
background-color: #FFFFFF;
border: 1px solid #444444;
color: #000000 !important;
text-decoration: none !important;}
.galleryH li a img {
position: absolute;
visibility: hidden;
/* las imágenes están ocultas */
left: 0px;top: -360px;
/* la imagen se mostrará arriba */
border: none;}
.galleryH li a:hover
{
background-color: #DDDDDD;
/* efecto rollover */}
.galleryH li a:active img,
.galleryH li a:focus img {
visibility: visible;
/* mostrar la imagen al hacer click */
}
.galleryH li a:active,
.galleryH li a:focus {
background-color: #C2C4D0;}

Agora copie o segundo código e cole onde quiser. Insira os endereços de imagens que quer que apareça

<div class="galleryHcontenedor"><ul class="galleryH">
<li><a href="javascript:void(0);">01<img src="AQUI O ENDEREÇO DE SUA IMAGEM 1" /></a></li>
<li><a href="javascript:void(0);">02<img src="AQUI O ENDEREÇO DE SUA IMAGEM 2" /></a></li>
<li><a href="javascript:void(0);">03<img src="AQUI O ENDEREÇO DE SUA IMAGEM 3" /></a></li>
<li><a href="javascript:void(0);">04<img src="AQUI O ENDEREÇO DE SUA IMAGEM 4" /></a></li>
<li><a href="javascript:void(0);">05<img src="AQUI O ENDEREÇO DE SUA IMAGEM 5" /></a></li>
<li><a href="javascript:void(0);">06<img src="AQUI O ENDEREÇO DE SUA IMAGEM 6" /></a></li>
<li><a href="javascript:void(0);">07<img src="AQUI O ENDEREÇO DE SUA IMAGEM 7" /></a></li>
<li><a href="javascript:void(0);">08<img src="AQUI O ENDEREÇO DE SUA IMAGEM 8" /></a></li>
<li><a href="javascript:void(0);">09<img src="AQUI O ENDEREÇO DE SUA IMAGEM 9" /></a></li>
<li><a href="javascript:void(0);">10<img src="AQUI O ENDEREÇO DE SUA IMAGEM 10" /></a></li>
</ul></div>